The various sizes and placements of banner ads mean that consistent design is key from the off.

Lock Down Your Palette and Type Scale

Use embedded fonts. Specify exact hex values for colour. Specify the exact font files to use. If a display environment substitutes a fallback font, your carefully chosen type scale collapses instantly.

Use One Master Template

Use one Master Template and resize from there, to ensure correct spacing, button styles and overall layout, while maintaining the correct ratio.

Handle Logos Carefully at Small Sizes

For smaller size placements (e.g. 125×125, 120×60) a simplified version of your mark (wordmark only or icon only) is usually more readable than a full lockup with tagline. Specify minimum clear space around the mark so that it will not be crowded by surrounding objects.

Keep Animation Style On-Brand

The type of animation and the easing and timing used to play it out will define the brand personality, mirroring what is used elsewhere in your touchpoints and communication.

For HTML 5 Ads, see The Bannermen.

Check Contrast Against Every Background

Test the ad against a white background and a dark background to check that the text and logo are visible enough. Note that for display ads, this must comply with the display ad standards as set out by IAB UK.

Match the Visual Hierarchy of Your Other Touchpoints

Make sure the hierarchy of the information on your website is mirrored in the banner ad, so people who click through feel they have arrived at a familiar place.

Consistency is not accidental it just happens because you make decisions in the same way.