Web tutorial: How to design a brilliant animated web banner

PROMOTION: Learn tips from designers Radek and Alex on how they created this dynamic web banner for Wacom.

By Wacom Creative Pros

Prev Step

Next Step

Intro

As part of a campaign about the new update to the software driving Wacom's incredible Inkling digital drawing pen, professional designers Radek and Alex have designed the Flash banner above.

The Inkling records as you draw – so you have the freedom you're used to with pen on paper, but with digital version saved to your laptop or desktop as a drawing to colour and composite in Photoshop or Corel Painter or as vector file ready for editing in Illustrator.

We visited the two in their studio, where they have shared with us their 10 tips for creating the perfect web banner.

.articleBody, #thumbNavContainer{ display: none !important } #stepDescription { background: #f2f2f2; padding: 5px; margin-bottom: 15px } #slide_0 { margin-top: 23px } .nsSteper{ margin-top: 20px; }

Step 1

As part of a campaign about the new update to the software driving Wacom's incredible Inkling digital drawing pen, professional designers Radek and Alex have designed the Flash banner above.

We visited the two in their studio, where they have shared with us their 10 tips for creating the perfect web banner.

Step 2

Make sure you understand what the main USP (unique selling proposition) of your banner is.

Clarify with your customer if necessary. Even the prettiest banner is pointless if it misses the message.

Step 3

Develop a good concept within the boundaries of your customer request. But always push yourself to break some rules.

Be playful, as even a slightly different size gives you room to explore.

Step 4

Plan the animation with a storyboard. This way, you can make sure your banner contains all the important information.

This is especially useful if you're working with another creative to who will do the Flash work, as they will be thankful they can design the dynamics of the animation to fit perfectly.

Step 5

When people view a banner, you have just a few seconds to catch their attention.

Think of several ways to make use of that time. Then decide for the best.

Step 6

Speak the language of the people you want to reach – both visually and verbally.

Step 7

Take a look at where the banner will be positioned in the end. Apply your design according to that environment.

It’s an art in itself to make the banner fit into the overall picture and still make it stand out.

Step 8

Add a bit of surprise. There’s nothing more boring than a standard “seen-it-100-times” layout.

Adding an element of humour will always give a better result.

Step 9

Pay attention that your banner has a clear Call-To-Action. That is essential for its success.

Step 10

Sometimes you need more than 35kB for a banner. A friendly request at your media partner to increase the size should come first before you start slimming down your design down.

Step 11

Keep it simple. Full stop.

Web tutorial: How to design a brilliant animated web banner

By Wacom Creative Pros

Intro

More

Adobe Illustrator tutorial: Create X-ray vector art

Portfolio: Tom Gordon

Portfolio: Bence Bilekov

Adobe Illustrator tutorial: Master Illustrator CS6's new Pattern tool

Portfolio: Laura Hopewell

Portfolio: Holly Goodwin

Comments

Read Next...