General
The online banners follow the same design principles as the entire smart brand design system. Where applicable the banners can be interactive and animated. These following standard formats show the variety of designs for online banners.
Banner
Grid
The banners are based on a square grid. Grid units with a side length of 10 px form the basis for the calculation. These are divided by the height and width of the final format. The distance to the format edge is at least 2 raster units.
Design
Text is always placed on the stage area with no picture; alternatively on the image if sufficient contrast is considered. The stage can be highlighted with accent colors for more attention. The font size is at least 10 px to ensure legibility. Only the primary buttons should be used for the banners.
Elements
Each standard banner contains: Logo, headline, subline, and call-to-action button as well as an image. Images can be format-filling or in the ratio 1/2, 1/3 or 1/4 to the format. Each format has a 1 px outline in black to make the banner stand out against light backgrounds.
Elements & Structure
The online banners follow the same design principles as the entire smart brand design system. Where applicable the banners can be interactive and animated. These following standard formats show the variety of designs for online banners.
1. Logo
Scale only within the grid.Note typeset space.
2. Image
Note the detail of the picture.Car must be clearly recognizable.
3. Stage
Standard: White. Accent colors also possible. Note contrast with font.
4. Headline
FOR smart Next Bold. Line spacing 110%. Minimum text size 20px.
5. Subline
FOR smart Sans Regular. Line spacing 120%. Minimum text size 10px.
6. Button
FOR smart Sans Regular. Line spacing 120%. Minimum text size 10px.
Skyscraper
Leaderboard
Medium rectangle