Week 9 LAB
Advertising on the web
using RICH MEDIA
With Duane Weaver
OUTLINE
•
•
•
•
Trends in Online Design
Storyboarding
Self-Review and BLOG info
Survey
Trends in Online Design
• http://www.sitepoint.com/article/top-trendsonline-ad-design
Storyboarding for Rich Media
Advertisements
• A storyboard is rough representation of a
finished rich media advertisement, “frame” by
“frame” (or screenshot by screenshot).
• This will usually be presented to a client for
approval before work is started.
• A storyboard generally includes graphics (rough
sketches or representations of objects, rather
than the finished product), text, fonts, links, calls
to action etc.
• Storyboarding is used extensively in video
production, TV commercial production and
website production, as well as in interactive
advertising.
Interactive Rich Media
Storyboards
• The big difference between a TV
commercial storyboard, and a storyboard
for a web-based interactive advertisement,
is that the latter is not necessarily linear.
• The storyboards may also be
accompanied by a flow chart showing how
the “frames” will link to each other, and the
various possible “paths” that a user might
take through the advertisement.
The following elements will be present in a
storyboard:
•
•
•
•
•
•
•
•
•
•
•
A sketch or drawing of the contents of the frame.
Color, placement, and size of graphics.
Actual text, if any is present, for each frame.
Color, size, and type of font, if there is text.
Voice-over, if any (if this is extensive, then the script
will be included on a separate sheet of paper, cross
referenced to the storyboard number
Animation, if any.
Video, if any.
Audio, if any.
Audience interaction (ie. link, mouseover etc.)
Call to action (measurable)
A number for each storyboard (1 of 12; 2 of 12 etc)
Sample Storyboard
• Absolut Lemondrop (Macromedia)
Number: 1 of
Description: No Flash Player detected, alternate gif file. Objective is to get user to download
Flash to view the ad.
Voice over: None
Music/sound: Crashing sound
Text: As shown on screenshot
Font: Arial, and Arial Black (white)
ABSOLUT SHAME.
Graphic: Black background, fuzzy white circular
overlay
We’d hate you to miss Absolut Online
DOWNLOAD FLASH
Interactivity: Link on Download Flash text to
Macromedia website
Call to action: Download Flash viewer
Number: 2
Description: Bottle appears from above
Voice over: None
Music/sound: None
Text: None
Font: N/A
Graphic: Bottom third of bottle
Interactivity: Bottle will shake if moused over
Call to action: Mouse over image to see what
happens
Number: 3 of
Description: One third of the bottle in top of screen – no movement unless user interacts. First
lemon drops automatically after 4 seconds if no user interaction.
Voice over: None
Music/sound: Crashing sound as lemons drop to
bottom of screen.
Text: None
Font: N/A
Graphic: Bottom third of bottle
Interactivity: Bottle shakes and lemons drop as
user mouses over
Call to action: Continue to mouse over image to
see what happens
Other Storyboard Considerations
• Storyboards cannot stand alone on their
own
• They should be founded on some sort of
fundamental marketing criteria such as:
– Target Market
– Core Features/Benefits promoted
– Key Message
– Expected End-State
– Executional Element
Self Review
• Check out Brandsuicide link
• Look into design elements such as colour
• Post any new links in our class BLOG