ERKLÄRUNIT
In der ERKLÄRUNIT werden alle infografischen und animierten Inhalte für alle Formate erstellt.
Infografiken vermitteln Fakten und ermöglichen einen übersichtlichen, anschaulichen Zugang zu Informationen. Sie unterstützen die Glaubwürdigkeit der Aussagen und die Seriosität der Berichterstattung.
Abstrakte Information
Datenvisualisierung ist eine der zentralen Aufgaben von Infografik. Grafiken können schematisch abstrakte Vorgänge abbilden, so z.B. Funktionsweisen verdeutlichen, den Aufbau von Dingen veranschaulichen, z.B. aus Technik und Naturwissenschaften.
Komplexe Information
Mehrschichtige Erklärstücke ermöglichen den Zugang zu Information, die nicht linear erzählt werden kann. Vereinfachung und Reduktion sind Mittel zur Steigerung des Verständnisses. Die wichtigsten Gestaltungsprinzipien sind
- Wiedererkennbarkeit durch Designgrundsätze
- Klare reduzierte Bildsprache
- Darstellung nach Sachinformationen
- Fokussierte Beschriftungen innerhalb einer verbindlichen Typografie
- Piktogramme mit definierten Größen zur Veranschaulichung
Unterscheiden wird zwischen reiner Infografik und Erklärwelt.
-
- Infografiken vermitteln plakativ eine Information in Form von Diagrammen, Linegraphs, Listen oder Karten.
- In der Erklärwelt werden mit Piktogrammen, Karten und einer eigenen Farbwelt, Sequenzen von Inhalten auf die Platinfläche gestellt.
GESTALTUNGSELEMENTE
Vollbildhintergrund
Der Vollbildhintergrund für Grafiken lehnt sich an die Gestaltung des Corporate Backgrounds für die Medienwand an. Er fungiert als hinterste Ebene und wird selber nicht als Träger für typografische Information oder Diagramme verwendet. Einzige Ausnahme: Zusatzinformationen neben dem Dauerlogo, z.B. Quellenangaben.
Trägerfläche
Eine platinfarbene Fläche bildet die Trägerfläche für Informationen. Sie ist die Bühne für z.B. Graphen, Balkendiagramme, Piktogramme, Fotos oder 3D Objekte. Andere Trägerflächen
und andere Farbigkeiten sind nicht zulässig. Diese Vorgabe bezieht sich ausschließlich auf freigestellte Objekte und Grafiken. Die Fläche zeigt grundsätzlich einen Lichtverlauf, der in der Regel diagonal verläuft, der Winkel dafür ist variabel. Ein horizontaler Verlauf ist auch möglich.
platin dunkel: r 177, g 176, b 168 und platin hell: r 248, g 248, b 244
FARBEN
Basis
Für Piktogramme, Formen, Tabellen wird das „emotional grey“/anthrazit (ggf. in Abstufungen) genutzt. Text-Elemente und Beschriftungen sind anthrazit oder weiß (ggf. Highlight durch Auszeichnungsfarben).
|
#33322F GRAU dunkel (emotional grey) |
#5E5C5C GRAU hell |
#FFFFFF WEISS |
Auszeichnung
Für zusätzliche Highlights gibt es Auszeichnungsfarben aus der bisherigen ARD-aktuell-Farbpalette. Sie können im Zusammenspiel mit Platin und GRAU kombiniert werden und so starke Kontraste erzielen. Der Fokus kann eindeutig gelenkt werden.
| #CC2E2B | #DF611A | #F6DF36 | #9BC320 | #54AFE2 | #3DB8BB | #861A4D | #A84693 |
| #6F1918 | #7B3711 | #AD7A1E | #637A29 | #2F627E | #47796F | #4A0E2A | #772270 |
Infowelt
| #81bcfb | #f6df36 | #f6df36 | #324377 | #864712 | #293669 | #7a360d | #9bc21e |
| #2b3d84 | #902105 | #81bcfb | #3b5185 | #935816 | #4a61bc | #df611a | #bcce21 |
| #3b7a9d | #e79524 | #df611a | #435e93 | #9f691a | #81bcfb | #f6df36 | #84ae2a |
| #668edd | #cb2e2b | #80ddcb | #4c6ca3 | #ac7a1e | |||
| #631f3d | #124261 | #861a4d | #5579b1 | #b88a21 | |||
| #4a61bc | #df611a | #b3dc3d | #5e85c0 | #c49c25 | |||
| #df611a | #54afe2 | #dd14c8 | #6693cf | #d1ac29 | |||
| #6fa0de | #ddac29 | ||||||
| #78aded | #e9cf31 |
Beispiel Farben Infowelt
Erklärwelt
Erklärgrafiken und -filme erklären komplexe Zusammenhänge und gehen in die Tiefe. In der Gestaltung gibt es zwei Ebenen der Auszeichnung: Gedeckte Flächenfarben für grundlegende Informationen und kontrastreiche, intensive Farben, um entscheidende Elemente in den Fokus zu rücken.
Die Flächenfarben können je nach inhaltlichen Anforderungen kombiniert oder in Abstufungen angewandt werden. Die Flächenfarben sind vor allem für großflächige Elemente (z.B. Karten, große Formen/Piktogramme) vorgesehen.
| ROT #703131 |
ORANGE #A95D29 |
GELB #Cf9D4D |
BRAUN #6F614C |
BLAU #2A4556 |
GRÜN #1A4843 |
LILA #5D3F61 |
PINK #A63D9B |
Abstufungen: Farbauftrag in 10%-Schritten auf Weiß, nicht auf Platin.
| #7D4646 | #B26F40 | #D4A75C | #7D715E | #3F5867 | #315A56 | #6D5271 | #AF51A5 |
| #8C5A5A | #BB7E55 | #D9B16E | #8C8170 | #556A78 | #486D69 | #7D6581 | #B864AF |
| #9A6F6F | #C38E6B | #DDBA80 | #9A9082 | #6A7D89 | #5F7F7B | #8E7990 | #C177B9 |
| #A88282 | #CC9E80 | #E2C492 | #A9A094 | #7F8F9A | #76918E | #9E8CA0 | #C98BC3 |
Farben in der Erklärwelt
-
- Verwendete Farben auf ein Minimum reduzieren
- Kontrast zum Hintergrund sollte in Karten nicht zu stark sein
- hellere Schattierung für große Flächen wählen
- dunkle Schattierung für kleine Flächen wählen
- Harmonische Farbkombinationen wählen
- Schattierung einer Farbe nicht unter einem Wert von 50% benutzen
- geeignete Grundfarben aus der Farbpalette „Erklärwelt“
Beispiel Farben Erklärwelt
DIAGRAMME
Torten
Es gibt sowohl die Darstellungsmöglichkeit einer 2D-Torte als auch einer 3D-Torte. Die Farben sind der Farbtabelle zu entnehmen. Wenn es sich thematisch anbietet kann man eine Farbe mit verschiedenen Abstufungen verwenden. Möglich ist auch, ein Element mit einer Auszeichnungsfarbe hervorzuheben. Die Beschriftung sollte mittels Rauszieher-Text-Label stattfinden. Dieses Element kann optisch ebenfalls durch leichtes Abrücken hervorgehoben werden.
Balken
Die Balkenbreite kann in einem bestimmten Rahmen variieren. Es kommt hier auf den verfügbaren Raum an. Das Gesamtbild muss stimmig erscheinen. Die Balken können sowohl horizontal als auch vertikal dargestellt werden. Zudem gibt es sowohl positive als auch negative Balken. Die Farben sind der Farbtabelle zu entnehmen. Wenn es sich thematisch anbietet, kann eine Farbe mit verschiedenen Abstufungen verwenden werden. Möglich ist auch, ein Element mit einer Auszeichnungsfarbe hervorzuheben.
Dieses Element kann optisch ebenfalls durch leichtes Abrücken hervorgehoben werden. Sind mehrere Balken auf einer Grafik, sollten sie in einem Animationsschritt erscheinen, denn so hat der Betrachter längere Zeit, die Inhalte zu erfassen. In einigen Anwendungsfällen muss jedoch thematisch eine nacheinander reinanimierte Abfolge stattfinden.
Linegraph
Der Linegraph sollte nicht zu kleinteilig erscheinen. Die Linien nicht zu dünn. Teile des Koordinatensystems können transparenter gestaltet werden, um nicht so sehr vom eigentlichen Linegraph abzulenken. Die Beschriftung der X und Y- Achse sollte möglichst auf das Wesentliche beschränkt sein. Einzelne wichtige Punkte können mit Rauszieher-Text-Label angezeigt werden. Die Farben sind der Farbtabelle zu entnehmen. Wenn es sich inhaltlich anbietet, kann auch eine Balken-Darstellung des Linegraphs gewählt werden.
LISTEN
Einzelne Listenpunkte werden gewöhnlich mit dem Aufzählungs-Piktogramm dargestellt. Möglich ist auch, statt des Aufzählungs-Piktogramm illustrative Piktogramme zu verwenden. In einigen Fällen können die Piktogramme hier auch animiert werden. Im Listentext können einzelne Wörter oder Text-Bereiche durch fettere Schrift hervorgehoben werden.
Die Listen-Punkte können sich in einer Animation sowohl statisch untereinander aufbauen als auch in einer gescrollten Variante, die sich mit jedem neuen Listenpunkt ein Stück hochschiebt, sodass der gerade aktuellen Listenpunkt immer mittig auftaucht.
