Banner design for the full version of the Yandex Home page
The descriptions show reduced-size images. to see the full-size examples.
- 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).
- The minimum font size is 11 pt (in logos, messages, graphics, and disclaimers). Exceptions: text on photos of packaging, photos of products, and screenshots.
The margin between the edge of the banner and the text must be at least 10 pixels.
This does not apply to age restriction positioning.
The logo or icon of the brand, product, or technology should not take up more than 10% of the banner space.
- 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.
- Yellow banner background, because this color is used in standard Yandex page design elements. The acceptable yellow is #F0E5AD and lighter.
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 1 pixel. The most suitable border color is #DADADA.
Duration of animation
- Banners and banner elements must not blink because this distracts the user from the webpage content.
- Banner elements should not change more often than once every two seconds.
- Only cycle banner animation is acceptable. One animation cycle can be up to 30 seconds long. The pause between cycles must be at least 30 seconds. An HTML5 banner can feature the “View again” button for restarting the animation scenario. An HTML5 banner can be interactive and respond to mouse cursor and/or banner click, changing the banner picture depending on the action.
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.
Interface elements on the banner
- The banner must not imitate user interface elements, such as a Windows system dialog box.
- Banners must not contain standard user interface elements (cursor, search bar, various buttons, and other elements) that do not perform their applicable functions.
- 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.
If you need to use an age label on a banner:
- Place it in the upper-right corner of the banner.
- Use “Arial regular” 12 pt font.
- 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
- Maximum size of the button or badge: 40px high, 140 px wide.
- 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.
- The app store badge must comply with the same requirements as logos.