CD202 Interface, Representation & Sequence

Introduction to motion design and 2D animation

Course created by Sarah Phillipssphillips@lecturers.billyblue.edu.au

BBCD Melbourne BAPDCOM Version 1 – February 2013.http://bbcdcomdes.weebly.com/

Flash banners

Flash banners generally appear on sites other than your own, to push traffic to your site.

Most common sizes are 300x250 (MREC)160x600 (Skyscraper)728x90 (Leaderboard)

MREC

Leaderboard

Screen shot from http://www.ninemsn.com.au Accessed 4/2/13

Flash banners

Best practice is to… Keep file size LOW! The most common

web banners I’m asked to make needs to be under 40kb.

Most web banners will loop, so make sure this is seamless. Some websites will only allow a banner to play for 30sec though before it needs to stop, so make sure you read the banner specs before designing!

Flash banners

Make sure brand logos are clear & easy to read. Often clients like the logo on screen at all times, (others only at the end). Make sure you know your client’s preference so you can work it into the design

A 1px border around the banner is polite and sometimes required. If your banner is on a white background and the website it’s going on also has a white background – this is a must!

Flash banners

Clear call to action. The user needs to know what they’re getting or where they’re going if they click on your banner.

Keep the amount of copy as low as possible – but make it relevant, interesting and punchy. Simple, right?

Think about how your concept will work in different sizes. Most of the time, multiple sizes are required, and they need to work in the same way

Flash banners

Cottees – ‘Boys vs Girls’ 300x250 728x90

Personal design work. Client: Cottees. Studio: BD Network.

Interactive Flash banners

Close to Home http://www.interactiveentries.com/closet

ohome/index.html

Stride – ‘Ridiculously Long Lasting’ http://www.weworkweekendsforbrands.c

om/stride/2011-2/brll-banner-case-study/

Award winning flash banners Fedex – ‘Just in time’

http://www.judgehere.com/justin/index.html

Pringles – ‘Can Hands’ http

://awardshome.com/cannes2009/pringles/can-hands.html

Aljazeera – ‘Every angle, every side’ http://74.207.233.159/Webby/Aljazzera/l

anding.html

Continuing with Flash

Flash tutorials

http://www.smashingmagazine.com/2008/01/17/adobe-flash-tutorials-best-of/

http://www.adobe.com/devnet/flash.html

http://www.youtube.com/user/AlanBeckerTutorials

http://www.newgrounds.com/wiki/creator-resources/tutorials/flash-tutorials

Continuing with Flash

Graphic clip vs movie clip Classic tweens Shape tweens Easing Importing PSD and AI into Flash Photoshop save for web

For a recap later, go to ‘Up and Running with Flash Professional’ on Lynda.com

Storyboarding

Storyboarding

A series of sketches of what your animation will look like and what will happen.

Shows composition, staging, movement and design, as well as referencing the pace

It is quicker to change things in the storyboard stage than the production stage. Sketches are cheap!

Batman (TV Series 1992–1995). Title Sequence Storyboard, Drawn by Bruce Timm & Colored by Eric Radomski, 1992http://livlily.blogspot.com.au/2011/03/batman-tv-series-19921995-storyboards.html

Storyboarding

Quick sketches vs actual mockups Sketches are quicker and easier but also leave

a lot open to interpretation. Maybe what you have in your head is not quite what’s in the client’s head.

Mockups leave less open to interpretation, but the client can get bogged down in the details. For example, can reject an idea based on a colour or font, rather than the idea itself.

Best to start with sketches and then move into mockup storyboards

Storyboarding

Video – Toy Story Storyboarding http://www.youtube.com/watch?

v=QOeaC8kcxH0

Storyboarding exercise

Design a min 8 frame storyboard of the obstacles you face getting here in the morning. (Doesn’t have to be true!)