Online-Banner bieten besonders flexible, gestalterische Möglichkeiten. Das Designsystem passt sich diesen Gegenheiten ebenso flexibel an und bietet einen großen, kreativen Spielraum, in dem Ideen visuell wirkungsvoll präsentiert werden können.
Logo und Raster
- Logogrößen
Die Logogrößen sind für jedes Format definiert und mit allen anderen Gestaltungselementen in jeweils vier Größen in der Figma-Datei angelegt.
Bei der Platzierung der Elemente müssen die jeweiligen Schutzzonen eingehalten werden. - Formate und Einheiten
Einzelne Einheiten in der Größe X, Logogrößen und der Satzspiegel können der Liste der Formate und Einheiten entnommen werden. - Logo
Das R+V-Logo wird bevorzugt oben links platziert. Je nach Content und Format kann es in den Ecken des Satzspiegels frei platziert werden. Die Mindestbreite inklusive der Schutzzone liegt bei 120 px.
Das GFG-Logo inklusive Schutzzone wird nur bis zu einer Mindestbreite von 220 px eingesetzt.
Wenn das Format die Platzierung des R+V-Logos in der Mindestbreite von 120 px nicht zulässt, kann das R+V-Logo ohne Claim verwendet werden.
Die Breite des R+V-Logos inklusive Schutzzone beträgt 6 X, die des GFG-Logos inklusive Schutzzone 5,5 X. Das Raster, an dem die Elemente ausgerichtet werden, ist in 4-Pixel-Einheiten aufgebaut, der Satzspiegel beträgt 1 X.
Wenn der Abstand des R+V-Logos inklusive Schutzzone zu einer der gegenüberliegenden Seiten weniger als 1 X beträgt, wird die zentrierte Version verwendet und das Logo inklusive Schutzzone auf die Formatbreite vergrößert. Der Satzspiegel bleibt 1 X
Typografie
Der Zeilenabstand für Headlines in Online-Bannern ist mit 110% definiert, der Zeilenabstand für die Copy mit 130%. Die Schriftgröße der Headline soll erkennbar über der Schriftgröße der Copy liegen, mindestens um das 1,5-fache. Der Mindestabstand zwischen Headline und Copy beträgt 8 Pixel.
Bei der Wahl der Schriftgröße darf die Mindestgröße von 12 pt nicht unterschritten werden.
Markenelement
Das Markenelement gibt es in zwei Größen: 1,25 X auf Bildern und 1 X für Botschaften. Auf Dunkelblau und dunklen Bildbereichen kommt Hellorange zum Einsatz, auf hellen Bildbereichen wird Dunkelorange für das Markenelement eingesetzt.
Buttons und Störer
Es sollte entweder ein Störer oder ein Button in einem Banner eingesetzt werden, um Botschaften klar zu kommunizieren.
Buttons dürfen nur bei Full-Bleed-Bannern auf dem Bild platziert werden. Und auch dann nur, wenn der Bildhintergrund ausreichend Kontrast zum Button bietet.
Buttons werden entweder direkt unter dem Text oder am Satzspiegel platziert. Der Abstand von Text zu Button beträgt mindestens 0,5 der Höhe des Buttons.
Störer können auf Bild oder der dunkelblauen Fläche frei platziert werden.
Formate und Einheiten
Für die gängigen Banner-Formate sind die Einheit X sowie die daraus abgeleiteten Logo-Größen und der Satzspiegel definiert.
Falls ein Format nicht aufgeführt ist, kann der X-Wert von den bestehenden Formaten abgeleitet werden. Der minimale X-Wert beträgt 20 px und muss durch vier teilbar sein, die Mindestgröße des R+V-Logos beträgt 120 px.
Diese Formate sind bereits in der Figma-Datei angelegt.
Gängige Bannergrößen im Bereich der Größe S
| Maße in Pixel | ||||
| Breite | Höhe | 1 X | 6 X | 5,5 X |
| Satzspiegel | Breite R+V-Logo inkl. Schutzzone |
Breite GFG-Logo inkl-Schutzzone |
||
| 120 | 600 | 20 | 120 | n.v. |
| 160 | 600 | 24 | 144 | n.v. |
| 180 | 150 | 20 | 120 | n.v. |
| 200 | 200 | 20 | 120 | n.v. |
| 240 | 400 | 20 | 120 | n.v. |
| 250 | 250 | 20 | 120 | n.v. |
| 300 | 250 | 20 | 120 | n.v. |
| 300 | 600 | 32 | 192 | n.v. |
| 336 | 280 | 24 | 144 | n.v. |
| 728 | 90 | 20 | 120 | n.v. |
Bannergrößen im Bereich der Größe M
| Maße in Pixel | ||||
| Breite | Höhe | 1 X | 6 X | 5,5 X |
| Satzspiegel | Breite R+V-Logo inkl. Schutzzone |
Breite GFG-Logo inkl- Schutzzone |
||
| 575 | 292 | 28 | 168 | n.v. |
| 600 | 305 | 28 | 168 | n.v. |
| 620 | 315 | 28 | 168 | n.v. |
| 720 | 300 | 32 | 192 | n.v. |
| 930 | 270 | 32 | 192 | n.v. |
| 940 | 315 | 40 | 240 | n.v. |
| 970 | 250 | 36 | 216 | n.v. |
Gängige Bannergrößen im Bereich der Größe L
| Maße in Pixel | ||||
| Breite | Höhe | 1 X | 6 X | 5,5 X |
| Satzspiegel | Breite R+V-Logo inkl. Schutzzone |
Breite GFG-Logo inkl. Schutzzone |
||
| 1024 | 578 | 52 | 312 | 286 |
| 1200 | 672 | 60 | 360 | 330 |
| 1280 | 720 | 64 | 384 | 352 |
| 1600 | 550 | 68 | 408 | 374 |
Gängige Bannergrößen im Bereich der Größe XL
| Maße in Pixel | ||||
| Breite | Höhe | 1 x | 6 x | 5,5 x |
| Satzspiegel | Breite R+V-Logo inkl. Schutzzone |
Breite GFG-Logo inkl. Schutzzone |
||
| 1080 | 1080 | 92 | 552 | 506 |
| 1920 | 1080 | 100 | 600 | 550 |
| 2205 | 1080 | 108 | 648 | 594 |
Anwendungsbeispiele
Don´ts
Kein Einsatz des GFG-Logos unterhalb der Mindestbreite von 220 px
Keine Platzierung des Buttons auf Bildern, außer auf Full-Bleed-Bannern
Kein Einsatz des R+V-Logos ohne Claim, wenn die Mindestgröße von 120 px eingehalten werden kann