Banner Ad Design: Anatomy and Formats

Banner Ad Basics

• Banner ads are ads that appear as a thin bar at the top or side of a webpage.
• Paid banner ads are web banners or display ads.
• Banner ads consist of an image or multimedia that focus on visual elements.
• Banner ads can be static or animated.
• Most companies run them via Google Ads.
• Google reaches 90% of internet users, the most popular choice for banner ads.

Banner Ad Anatomy: Size

• Banner ad sizes matter in ad campaigns.
• Choose popular sizes to increase the chances of getting banner ads in front of people.
• Most websites accept ads that are 728×90, 160×600 and 300×250.
• The IAB standard ad package includes banner ads, but these are not popular with publishers.
• Google recommends keeping ad banners under 150 KB.

Banner Ad Anatomy: Accepted Formats

• Acceptable formats include: GIF, PNG, JPG, JPEG, and SWF (Flash).
• Due to recent changes, SWF (Flash) banners are no longer supported; HTML5 is said to take its place.

Banner Ad Anatomy: Animated Banners

• Banner animations cannot run longer than 30 seconds.
• Banners can be looped but must stop after 30 seconds.
• GIF banners must have a speed of 5 frames per second or lower.
• Flash ads must have a speed of 20 frames per second or lower and set the click TAG variable.

Banner Ad Anatomy: Structure

• Every banner should contain four main components:
• A company logo or name should be included.
• Inclusion of a logo builds brand recognition
• Showcase the value of a service or product to determine how it benefits the audience.
• Value propositions should include a unique selling point or offer that appeals to an audience and their situation.
• For example, Brown-Daub Hyundai's motion banner ad offers complimentary warning light scans and tire checks plus inflation.
• Include a relevant visual component that draws the audience in and gets them to notice an ad.
• Ads should also include a compelling call to action (CTA) button.
• A CTA lets the audience know what to expect after clicking an ad.
• An example is provided where people know they can try the product for free when they click it.

Banner Ad Anatomy: Graphics And Images

• Use only clear, professional images because blurry or hard-to-recognize images can lead to disapproval.
• Visuals should be processed 60,000x faster in the brain than text.
• Images should be high-quality and avoid appearing amateurish.
• An image's main purpose is to support and reinforce a message.
• Feature images of how good products make people look to help communicate effectively, or feature themed images and times.
• Select images that work with both messaging and branding that connect with a target audience to be persuasive.
• Low contrast images are difficult to read.
• The use of emotions evoke a strong emotion.
• Positive emotions elicit better results as a positive tone is set.
• Seasonal or themed images should set the stage and tell the customer what to expect.

Banner Ad Anatomy: Color

• Color grabs people’s attention, evokes emotion, and associates a color scheme with a brand.
• Men and women have different color preferences: men prefer blue (57%) and green (14%), women prefer blue (35%) and purple (23%).
• Use colors in a display ad that instill trust in a brand.
• Color palettes should be minimal with about 2-3 major colors.
• Contrasting colors can emphasize certain parts of the image.
• Choose colors wisely based on impact and audience need.

Banner Ad Anatomy: Typography

• Typography is a design element drawing an eye to critical information.
• A clear and legible typographic hierarchy is a crucial step.
• Typeface is also influential along with different complementary typefaces.
• A hierarchy also makes use of different typefaces with the use of more unusual fonts for conveying key information.
• Bold typeface or styles make certain parts stand out.
• Font usage in banner ads should make fonts simple, concise, and clear.
• It is equally crucial to understand the psychology of fonts before using them in banner ads.
• Headlines should be bold along with differing font sizes.
• When using serif or script fonts, choose a sans-serif font for the secondary text.
• Avoid using cursive fonts that are hard to read.
• Balance photos, text, and backgrounds, so the message has enough white space.

Design Principles: Contrast

• Good design looks simple, smart, and effortless.
• When items in design are much the same, it is difficult to notice.
• Contrast allows readers to distinguish elements and important information.
• Contrast is a method to attract visual attention to banner ads by using color, size, font, spacing, weight, and typeface.
• Bigger differences within elements result in the better application of the contrast principle.

Design Principles: Repetition

• Contrast makes elements on the banner noticeable, repetition brings organization and structure.
• The repetition principle requires repeating an aspect of a design throughout work that brings unity and consistency.
• Repetition helps using same the same font, size, contrast, texture, color or the same graphical element (logo, bullet or clip art for example).
• Logos should be placed in the same place same size across banners, yet colors or contrasts should not be too different.

Design Principles: Alignment

• Alignment makes the design distinct from others that convey or are misunderstood.
• Nothing is placed randomly or arbitrarily and type, images, and buttons should connect banner in a visual way.
• Alignment also increases a feeling of stronger cohesive unity that gives more strength and balance for a cleaner trustworthy look.

Design Principles: Simplicity

• Display ads are compact in their design.
• The message must convey clearly and quickly with an inclusion of simplicity.

Design Principles: Proximity

• Items/elements scattered all over the design are harder to understand.
• Proximity should group related things together to organize.
• The proximity principle means items similar to/or related to one another should be grouped forming a visual whole rather than distinct groups.
• This in turn organizes elements and information to be easier to read and understand.

General Design Principles

• Contrast, Repetition, Alignment and Proximity are the basis for good banner ad design.
• There should be no overcrowding.
• Split all the information so it isn't all in one small space.
• Keep an eye open for consistency and connection visually with the design

Native Banners: Optimal areas

• Industries have unique approaches that are applied in native banners to websites.
• Websites and marketing strategies should integrate ads without imposing or being difficult.

Native Banners: Best areas identified

• Two concepts needed to be applied are:
• Visible Parts of Site:
  • Native banner ads should be in a visible portion of a website.
• "Above the fold" or the top of the adds are more likely to be noticed.

Above The Fold

• Above the fold is the portion of a page viewable in the browser before scrolling.
• Pages that require scrolling content are said to be "below the fold."

Popular Pages

• The most popular pages on a website attract the most traffic and generate increased revenue.
• Exposure of ads increases the probability of landing an interaction.
• Ads to entrances on website pages increases awareness.

General Locations: Implementation

• It better perform, other techniques help improve CTR along with several banners on one page.
• Heat-mapping tools may help locate which areas on the site attract the most customers.
• This occurs with 3-4 widgets of content, giving spaces for creative titles and images while not cluttering the pages.
• Above 10 blocks affect the CTR.

Native Ads: Size and Connection

• Most native ads and banners should also be coherent with the same color scheme and maintain matching fonts and styles.

Website Tips: Blog and news outfits

• Native banners on sites mimic content and places above the told in content or the sidebars on the page.

Website Tips: Video Streaming

• Sidebars do not work for video streaming sites.
• Banners should be paced around the videos, either above or below the video player itself.

Website Tips: Online Services

• Native banners should be placed on Thankyou Pages where after a user converts or downloads information, the page would be used as a focal point.

Banner Ad Implementation: Applications

• Location:
  • Banners should not be put over the app content of app controls, so it does not affect access.
  • Actions or clickable areas must move towards the banner.
  • They may need to be moved from where balloons float to other areas.
  • Click quality increases when banners are in one location, either above or below the screen, and do not move.
  • App content should be not blocked or put between a banner. Banners should be either above or below all content.

Banners: Ad Timing

• Loading:
  • Banners should loads with app content and sync.

Banners: Ad Design

• It is important to use background colors and borders to help the ad placement stand out or it may clash.
• Spacing will help so that clicking isn't accidental when going to the ad section and the exit button/ choices are not near clickable area.
• Labels for ads stand out and so is the click through rate with choice icons or sponsored labels.
• Banners should incorporate less "flashy and or distracting borders" that compete the placement with other banners.

Banners and Ads: Design

• It is important they they not be set in the same general spot as a call of actions.
• Layouts should understand and work with the layouts of the app to integrate banners..
• Quality and timing are great, placing native ads formatted like interstitials before users engage is critical.

Rotation

• Rotating banners are a series of images that rotate on the homepage of a website
• There are few of these carousel types used in website designs, most notable being image slider and ad rotator.
• Ads may be rotated under normal condition with placements that are similar.
• Studies have show little return and minimal results for rotating banner.
• Viewpoints from designers should note attractivness, balances,clear branding and haramony.
• For users, it needs to be useful, not to many choice, and little distraction.
• The effectiveness of this tool as a marketing strategy also is important along with clarity in messaging and customer journey.
• Banners that rotate should not exceed 3 on the homepage.
• Automatic scrolling can help visitors be more aware or allows to more at own speed and direction.
• With arrows on either buttons that are easy to use.