Visual guidelines for banner design

To help you design great banners we’ve created some visual guidelines. You can find an abbreviated version below, or download a detailed pdf with gradation for various quality levels.

The abbreviated version contains examples for excellent quality, as well as poor quality. The pdf contains more examples.

You can use the table of contents to find specific topics, or read the whole article to gain a better understanding of our banner guidelines.

Image Issues

  1. Image Quality

  2. Pixelated images

  3. Blurry images

  4. Image Noise

  5. Border Clipping

  6. Text size

  7. Text color contrast

  8. Image Relevance

  9. Mimicking Software

  10. Multiple interpretations

  11. Direct comparison

  12. Graphic and inappropriate content

    1. Nudity

    2. Injuries


  1. Image Quality

The overall quality of your image must be high enough to clearly showcase your product. Below you can see examples of acceptable and unacceptable levels of image quality.

ACCEPTABLE:

 

UNACCEPTABLE: 

Back to top

  1. Pixelated images

    1. Pixelated Backgrounds:

ACCEPTABLE:

 

 

UNACCEPTABLE:


 

 

  1. Pixelated product image

It’s important that your product image is clear and free of pixelation so that users know exactly what they are clicking on.

ACCEPTABLE:

UNACCEPTABLE:


 

Back to top

  1. Blurry images

    1. Blurry background

Backgrounds are allowed to be blurry as long as the main image is clear.


Blurry background is acceptable as long as the product is clear

 

  1. Blurry Products

Your main product cannot be blurry. Secondary products are allowed to be blurry as long as the main product is clear.

ACCEPTABLE:

Above: Main product is clear

 

UNACCEPTABLE:

Above is unacceptable as main product must be clear 
 
 
Above: The main product cannot be blurry, even if secondary products are clear

Back to top

  1. Image Noise

Image noise greatly reduces the quality of your banners. Please avoid images with too much noise.

  1. Background image noise

ACCEPTABLE:

UNACCEPTABLE:

  1. Product image noise

ACCEPTABLE:

UNACCEPTABLE:

Back to top

  1. Border Clipping

This image illustrates the levels of border clipping that are acceptable and unacceptable. 

ACCEPTABLE:

UNACCEPTABLE:

The border is poorly cut

Back to top

  1. Text size

Any text included in your images must be easy to read. If you use normal width fonts, your text should be larger than 10 pt. For thin fonts, your text should be at least 11 pt.

Back to top

  1. Text color contrast

Contrast between text and background color will decide if your banner text is easy to read. Without enough contrast, your text will be difficult to read. Conversely, too much contrast can cause eye strain. Either way, users will be less likely to click on your ad

  1. Low contrast

Low contrast between text color and background color makes it hard for users to read your ad text:

Low contrast makes it hard to read the text
  1. Too much contrast

Too much contrast between text color and background color causes eye strain and makes your text less readable:

  1. Image Relevance

Images should clearly relate to the content of the ad

The cat is not relevant to what the ad text says

Back to top

  1. Mimicking Software

 Images are not allowed to mimic elements of popular software

The banner on the right looks like Microsoft Windows interface

Back to top

  1. Multiple interpretations

Your image may not have multiple interpretations. Please ensure your image only has one clear interpretation.

Back to top

  1. Direct comparison

Your image may not make direct comparisons to a competitor without proof.

Back to top

  1. Graphic and inappropriate content

    1. Nudity

  • Swimsuit – women

The image below illustrates the levels of dress that are appropriate for women in swimsuits:

  • Swimsuit -- men

The image below illustrates the levels of dress that are appropriate for men in swimsuits:

  • Transparent clothing

ACCEPTABLE:

UNACCEPTABLE:


 

  • Overly Focused on One Body Part

Images cannot focus on individual body parts, especially in an inappropriate manner.

  1. Injuries

The image below illustrates the levels of injury that ads are allowed to depict:

ACCEPTABLE:

A small wound, injury is acceptable

 

UNACCEPTABLE:

Big, bloody or gross injury is not acceptable

Back to top

 

We hope this guide is useful for you! Don't forget you can always read the detailed version for more thorough examples here.

 

If you need help about banner design, call us via:

Hotline:  (024) 38 838 838

Emailsales@coccoc.vnsupport_qc@coccoc.vn

Skype: coccoc_qc or Yahoo: coccoc_qc