Full site version

Requirements for formatting banners

All sizes are specified for 728 × 90 format. Sizes for 1456 × 180 format must be twice as large. The page shows reduced-size images. Download this archive to view them in full size.

  1. Text font
  2. Text layout
  3. Logo size
  4. Background color
  5. Mandatory frame
  6. Duration of animation
  7. Readability of obligatory information
  8. Interface elements in the banner
  9. Age restriction mark
  10. App store badge or button

Text font

  1. The banner font height shouldn't be more than:
    • 70 pixels if text occupies no more than 10% of the banner.

    • 52 pixels if text occupies no more than 15% of the banner.

    • 44 pixels if text occupies no more than 25% of the banner.

    • 32 pixels if text occupies one line.

    • 20 pixels if text occupies two lines.
    • 15 pixels if text occupies three lines.

  2. The minimum font size for logos, messages, illustrations, and warnings is 11 pixels. The exception is package and product photos and screenshots.

Text layout

The margin from the edge of the banner to the text must be at least 10 pixels.

Note.

This requirement doesn't apply to the placement of age restrictions.

Background color

We don't recommend using:
  1. Text against a very colorful background with small elements. Text should contrast with the background and be easy to read.
  2. A yellow background, as this color is used in standard elements of Yandex page designs. Acceptable yellow is #F0E5AD and lighter.

Mandatory frame

The banner must have a frame along all borders. The frame must contrast with the banner background color where they meet. The frame width must be 1px. The most suitable color is #dadada.

Duration of animation

  1. Banners and banner elements shouldn't blink because this distracts the user.
  2. Banner elements should change no more than once every two seconds.
  3. The banner animation must be looped. One animation cycle can be up to 30 seconds. The pause between cycles must be at least 30 seconds. During a pause, the banner must be static and display the main information of the advertising message. An HTML5 banner can feature the View again button for restarting the animation scenario. The HTML5 banner itself can be interactive and react to mouse movements or banner clicks, which change the image depending on the user's action.

Readability of obligatory information

Obligatory legal information (for example, the bank name in the list of legal entities, terms of a promotional offer, and so on) must be visible immediately, before the user interacts with the banner. For details, see additional recommendations.

Interface elements in the banner

  1. A banner can't be disguised as a user interface element, such as a Windows system window.
  2. A banner may not contain standard user interface elements (such as a cursor, search field, and buttons) that don't perform the corresponding functions.
  3. Don't use yellow in the interface elements, since this color is used in standard design elements on Yandex pages. Acceptable yellow is #F0E5AD and lighter.

Age restriction mark

If a banner requires an age restriction:

  1. Place it in the top-right corner of the banner.
  2. Font: “Arial Regular”, 12 pt.
  3. Color: #DADADA.
    Note.

    If the grey font can't be read, because it's against a multicolor background for example, place it on a white base layer.

App store badge or button

  1. Maximum button or badge size: 40 pixels high and 140 pixels wide.
  2. Don't make the button or badge yellow, since this color is used in standard design elements on Yandex pages. Acceptable yellow is #F0E5AD and lighter.
  3. The margin from the edge of the banner to the button must be at least 10 pixels.
  4. The app store badge must comply with the same requirements as logos.

Additional recommendations for the full and mobile site versions

Font readability

Unreadable font is the cause for 90% of rejections during banner moderation.

  1. Avoid fractional coordinates when aligning the font in an HTML5 banner, because they can “blur” the text (you need to check this in all popular browsers).
  2. We recommend using vector fonts.
    Tip.

    If vector fonts can't be used, save bitmap text blocks in the best possible quality (within the banner size restrictions).

  3. In some cases, the font in vector format also causes “blurring”.

    There can be several reasons for this effect:

    • Small size.

    • Complex font shape (such as serif fonts).

    • Font isn't adapted for the web or is designed for headers and large font sizes.

    There are several ways to solve the problem of a “blurry” font, including in vector format:
    • Increase the font size.

    • Replace the font with a simpler one.

    • Use a font adapted for the web and small font sizes.

Avoid special effects and decorations

Decorations of fonts and text boxes (shadows, outlines, and 3D effects) can make the message less readable.

Reduce the number of fonts

  1. Use a maximum of two fonts or font styles.
  2. Use a maximum of three colors in fonts.
These two requirements don't apply to:
  • The brand, product or technology logo.
  • Warnings and mandatory legal information.
  • The age restriction mark font.
  • A font that is part of an illustration.

Don't use low-quality images/photos

  1. With compression artifacts.

  2. With blurring or excessive sharpness.

Focus your message

Don't try to fit a lot of information in a narrow banner. Create a short and simple text so that the message can be grasped instantly.

Avoid small sizes

  1. Don't use small images with a lot of small details.

  2. Don't use photos with a lot of small details for the banner background.

Layout of obligatory legal information

Text should contrast with the background and be easy to read. The minimum font size is 11 pixels. Information must be displayed for at least 3 seconds.

Design options:

Combining automatic and manual scroll
Obligatory information (such as the name of a bank, its form of incorporation, and the terms of a promotional offer) must be visible without the user interacting with the banner.

Splitting into frames
Obligatory information must be placed in separate frames:
  • Dates of the promotional offer are shown in the first frames.
  • Other information must be accessed from the “legal information” box when the user points to it.
Attention.

The frame with obligatory information must be shown for at least three seconds.

Pausing for a few seconds and controlling the pause
The frame with obligatory information is shown for at least three seconds. The user should be able to click on pause and read the rest of the information. If the user doesn't click on pause, the banner animation continues.

Pausing and pointing with the cursor
The legal information is displayed for at least three seconds and is also available afterwards when hovering the cursor over it.