$MTBlogName encode_html="1"$

Designing motion graphics part1: Inspiration

One of the most common questions I get asked from readers of my Flash books is ‘How do you start creating motion graphics?’. We’re not talking here about the actual mechanics of implementation. We're talking about the inspiration behind some of the more creative Flash user interfaces...

It's common for traditional web designers and print based graphic designers to think in terms of pages and page based sites. In such sites new information appears when you click something. This is similar to how new content appears when you turn a page in a book.

Motion graphics is more about simulating things other than page based content. The best way to explain it is like this:

• Think of something that is tied to your site's subject.


• Build a concept for the site user interface around it.


• Use how that thing moves and works in real life as the basis for your transition animations and navigation oncepts.

For example, at the moment I am involved in something for the BBC here in the UK. They want online educational content for children. One of my early ideas was to simulate a school desk, as viewed from directly above. The user can pick up a pencil and write on stuff. If they write directly onto the table, a piece of lined paper floats onto the desk, and the text 'I will no write on school property' appears 100 times. They can also do stuff with the pencil sharpener, pencil eraser, ruler (they can bend the ruler off the edge of the desk so that it makes that flub-flub-flub noise). There's a cellular phone sat on the desk that they can play around with (it is used as a video clip player), and content appears via various objects on the desk.

So the idea is all about emulating a school desk rather than use a print based mindset (i.e pages in a book), and that’s the starting point for moving away from static stuff towards motion graphics. As soon as you start thinking in terms of real things that move, the motion graphic elements start to suggest themselves.

Another thing I was asked to do once was to think up an online advertising microsite for a big chewing gum brand. What I thought of was:

• Lots of people se chewing gum to stop themselves grinding their teeth away after they take dance drugs.


• If you have a good night out, you often forget exactly what you did


• After a night out clubbing, you tend to have lots of stuff in your pocket (well, men do), including small change, club flyers, notes... and chewing gum wrappers.


• The contents of your pocket can tell the story of what happened if you look at them in a particular way

So the idea was for the site to be based around someone emptying the contents of their pockets onto a table the day after a good night out, and trying to piece what happened. You can interact with these contents to build up a narrative, and that chewing gum wrapper would be the pivotal thing - the thing that makes you remember how good the night out was. We thus have a navigation based around sifting through the contents of your pockets. Bit edgy via the drugs connection, and lots of opportunity for animation and video (oh... and humor!). Certainly not page based either.

If I had to write a couple of rules about the process of creating motion graphics, they would look something like this:

It’s best to stop thinking of pages and start thinking about other things when designing motion graphics - school desks, steam engines, a film set, the way the contents of your pocket after a night out can form a narrative, the way leaves fall from trees in autumn, the way sketches develop into paintings, whatever - and then try to emulate how that thing moves (or changes over time) as part of the navigation.

What you should avoid is take the subject and think 'how can I turn that into something that is page based'. Instead, think about how something related to the subject content of the site works (or changes over time to form a transition or narrative) in real life and think about turning it into a navigation.

Coming soon - thoughts on how to code up scripted motion graphics.

Posted by motiongraphics at 09:06 PM | Comments (9)