Banner design for the mobile version of the Yandex Home page

The descriptions show reduced-size images. Download the archive to see the full-size examples.

      Text font

      1. The banner font must not be higher or wider than the capital letter “W” in “Arial Bold”:
        • For a single line, the maximum font size is 36 pt (the height and width of a square with 26 px sides).
        • If the banner has two lines, the maximum size is 25 pt (a square with 20 px sides).
        • If the banner has three lines, the maximum size is 20 pt (a square with 15 px sides).
      2. The minimum font size is 11 pt (in logos, messages, graphics, and disclaimers). Exceptions are: photos of packages, photos of products, and snapshots.

      Text positioning

      The margin between the edge of the banner and the text must be at least 10 pixels.

      Note.

      This does not apply to age restriction positioning.

      Logo size

      The logo or icon of the brand, product, or technology should not take up more than 10% of the banner space.

      Example of a good banner in enlarged view:

      Background color

      It is not recommended to use:
      1. Complex multicolor backgrounds (with small elements all over the surface) or a background color similar to the font color. The text must contrast against the background and be easily readable.
      2. Yellow banner background, because this color is used in standard Yandex page design elements. The acceptable yellow is #F0E5AD and lighter.

      Border

      Only horizontal banner borders are acceptable.

      The frame is optional unless there are white elements that cross the banner border, or the background color isn't white.

      If there are white elements that cross the banner border, or the background color is white, add a contrasting 1-pixel horizontal frame (at the top and at the bottom). The most suitable border color is #DADADA.

      Duration of animation

      1. Banners and banner elements must not blink because this distracts the user from the webpage content.
      2. Banner elements should not change more often than once every two seconds.

      Readability of the mandatory information

      Obligatory legal information (such as the bank name and legal entity, terms of a promotional offer, and so on) must be clearly visible immediately, before the user interacts with the banner. For more information, see additional recommendations.

      Example of a good banner in enlarged view:

      Interface elements on the banner

      1. The banner must not imitate user interface elements, such as a Windows system dialog box.
      2. Banners must not contain standard user interface elements (cursor, search bar, various buttons, and other elements) that do not perform their applicable functions.
      3. Don't use yellow in interface elements, because this color is used in standard design elements on Yandex pages. The acceptable yellow is #F0E5AD and lighter.

      Age label

      If you need to use an age label on a banner:

      1. Place it in the upper-right corner of the banner.
      2. Use “Arial regular” 12 pt font.
      3. Use the color #DADADA for the label.
        Note.

        If the grey label is not readable (for example, because it's on a multicolor background), put a white background layer under the label.

      Button/badge of an app store

      1. Maximum size of the button or badge: 50px high, 150 px wide.
      2. Don't use yellow for the button color, because this color is used in standard design elements of Yandex pages. The acceptable yellow is #F0E5AD and lighter.
      3. The app store badge must meet the same requirements as the logo.