CD202 Interface, Representation & Sequence
Introduction to motion design and 2D animation
Course created by Sarah [email protected]
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!)