Motion Graphics

GD5368.01 Spring 2012

General MoGraph Info

Motion Graphics

This class’s goals are to engage motion graphics & web technologies as strategic mediums for experimentation & communication, while introducing some of the software & techniques for creating motion & interactive work.

The first section (Projects 1 & 2) of the course will consist of a general After Effects "how to," covering the basic functions that will allow students to build many kinds of basic animations directly or, by combining several simple steps to generate more complex results. From the initial techniques, students will be expected to jump in & figure out where & how this program can be used in their design/art practice.

The second portion (Project 3) will focus on interactivity for web & mobile devices. We will look at new interactive & video embedding capabilities in HTML5, animation using CSS3 transitions, and some jQuery/Javascript Magic. Taking a variety of (mostly) pre-written code, students will focus on tweaking it to their needs as a way of laying a foundation for more complex coding in the future.

For reference the syllabus is linked below.

General Mograph Videos

Helpful Tutorials

Adobe has a lot of help on their site: After Effects CS5 & 5.5. Also, Lynda.com has plenty of helpful stuff on it as well--all accessible with your MICA logins from the "current classes" section on home.mica.edu.


Project 1: The Animated Text

Motion Graphics

Choose a song, a tv/movie scene, poem or any other section of text that has at least 150 words and you feel a connection to. Animate those words in After Effects for at least 1 minute (if you pick a song, it would be nice to do as much of the song as is possible--preferably the whole length).

Let your animation approach and graphic style depend on the text that you choose, and feeling in speed, movements, fades, etc. that seem right for the piece. Be inspired by the meaning of the words or the mood of the music. My preference is that you only use type--and the occasional abstract shape or form--incorporate illustrative graphics only if they reinforce the design or add something you have no other way of achieving.

In approaching this assignment, really we are making posters, or more ethereal books, so all the normal issues of scale, typography, color, etc. are what you really need to worry about. We are simply adding motion, depth of field, and maybe changes about the different axes you don't normally have control over on the flat picture plane. Nothing else is really changing. So, don't let the fact that this is a "motion" project get in the way of your otherwise good design decisions. With this in mind, make sure decisions about legibility are intentionally made as well. Too often, in trying to keep pace with a recorded dialogue or song, not enough time is allowed for the reading of kinetic typography.

Think about the interplay between realism and abstraction. If the words themselves are easy to interpret and understand, maybe something really abstract will work nicely. If the text itself is abstract, then perhaps more straightforward presentation is necessary.

Animated Text Links

Here is a random collection of links pertaining to the animated type project.


Project 2: Speculative Design

Project Info

Will be Critiqued on March 27th

PDF: Speculative Motion Design

Where use of motion graphics is often seen today is in speculative videos to either show design ideas, quickly mockup user interfaces, or give us a lens into a possible future. We’ll look into how one can use AfterEffects and simple video skills to build their own examples of this.

The ability to quickly manipulate and control space in AfterEffects—as well as in other tools—allows us as designers a new pace at which to build and create interface designs, hypothetical design situations, and more. Explore these ideas using whatever combination of graphics, motion, video, photos, text, illustration, sound, and anything else you desire.

Some examples of this idea take video—either contemporary footage, or actually scened, scripted, acted film—and overlay some clever graphics and text on top to create a suspension of disbelief: making the viewer think that what they are seeing is at least possible, if not actually real. Other examples of this could simply be purely graphic and illustrated works that either explain an idea, or demo an interaction or service concept.

Whatever direction you choose, please make sure that you’re passionate about the content and the direction.

Main Requirements
- Can use any combination of Video, Graphics, Type, Illustration, Photos, or anything else …
- Minimum 1 minute length
- Must have some sort of process, product, or potential future that the video describes/explains.
- The main goal is to really just try and incorporate as much as we have done this term as possible into one, solid, considered piece of motion graphics.

For additional reference the project sheet is linked below.

Reference Videos

The following video links are all examples of what I'm referring too when I say "Speculative Design." As you can see there is quite a variety--the sky is really the limit.

Helpful Tutorials

Adobe has a lot of help on their site: After Effects CS5 & 5.5. Also, Lynda.com has plenty of helpful stuff on it as well--all accessible with your MICA logins from the "current classes" section on home.mica.edu.

Specifically, any demos about motion tracking, shape layers, or actual video and graphics integration/combination will be useful for this project.


Project 3: Take it To the Web

Project Info

Project Sheet (TK)

This project has two main goals. To investigate the use of Motion Grahics on the web today and to analyze why and how we use motion in more detail. Common interactions, complex moving graphics, these all involve time, motion, and graphic design, so—based on our earlier discussions—this falls into the realm of Motion Graphics.

The main outcome of this project will be a stand-alone micro-site built with a combination of HTML5, CSS3, and JavaScript that examines some of the ways we can use ideas, techniques, and methods from motion graphics on the web today. A template with working examples will be provided for you for each of the “kinds” of motion graphics we cover.

Another aspect of the site is that you must write a short essay about what you think “Motion Graphics” means. This can be based on different contexts we’ve covered in class, or simply your opinion of what the term conjures in your mind, or an explanation of why you might add motion to something. 500 words should be enough to convey your thoughts in a concrete, direct manner. Please make these 500 words part of your site. Also, please include links to three excellent examples of motion graphics that you think help defend your points made in the short essay.

For the site itself, we’ll look at new evolutions in CSS3 Animations, HTML5 embedded video, HTML5 canvas, and some JavaScript magic which all allow for never before seen integration of motion and interactivity into websites (outside of maybe a full-flash solution). From the weekly explorations you’ll then be asked to put together your own site that uses at least 3 of the different techniques we’ll demo together.

Many of you already have website that you need to build for other projects, so integrating these techniques into other projects will be fine if you don’t want to build a stand-alone site.

Reference Sites, Videos + Links

Provided are websites I've referenced in class discussions and examples, or otherwise show interesting and clever use of the stuff we've talked about. Also included are videos that don't quite fall into the "tutorial" family, but still help explain or illustrate how the web is allowing for motion graphics to be more easily created and integrated.

Helpful Tutorials

Adobe has a lot of help on their site: After Effects CS5 & 5.5. Also, Lynda.com has plenty of helpful stuff on it as well--all accessible with your MICA logins from the "current classes" section on home.mica.edu.

Specifically, any demos about CSS3, JQuery, and HTML5 will be most useful.

Books + Readings

All supplied as downloadable PDFs. If you like the HTML5 or CSS3 books, please buy your own digital copies to help support A Book Apart, as they are awesome.


Coding Extras

jQuery Stuff

There are a number of JS libraries, frameworks and toolkits out there. jQuery is just one of them. However, it is a widely used one, covers a lot of bases, and has literally hundreds of extensions written to further extend it's functionality and use cases.