SWR Aktuell Infografik

Für die Erstellung von SWR Aktuell-Informationsgrafiken stehen verschiedene Standardelemente und Gestaltungsmittel zur Verfügung.

 

Trägerfläche

Die graublaue Trägerfläche ist der neutrale Hintergrund für alle Informationsgrafiken.

 



Trägerfläche

 

Farbraum



1. Primärfarbe (Petrol): 5r 85g 106b
2. Eisblau: 0r 219g 215b
3. Eisblau abgetönt (Verlaufsfarbe 1): 0r 150g 160b
4. Dunkelblau (Verlaufsfarbe 2): 10r 30g 60b,
5. Leuchtendes Orange: 255r 78g 60b

 

Graustufen



1. Graustufe 1: 34r 52g 79b
2. Graustufe 2: 59r 75g 99b
3. Graustufe 3: 83r 97g 118b
4. Graustufe 4: 108r 120g 138b
5. Graustufe 5: 132r 142g 157b
6. Graustufe 6: 157r 165g 177b
7. Graustufe 7: 181r 187g 196b
8. Graustufe 8: 206r 210g 216b
9. Graustufe 9: 230r 232g 235b

 

Typografie

Die Standard-Typografie bei SWR Aktuell ist die Schriftfamilie TheSansB. Diese Schrift wird in allen Projekten verwendet. Head- und Subline der Standardgrafiken sind am linken Rand des Cornerlogos ausgerichtet.

 



1. Headline: TheSansB W3 Light, Größe: 70
2. Subline: TheSansB W3 Light, Größe: 44
3. Datum: TheSansB W5 Plain, Größe: 25
4. Quelle: TheSansB W5 Plain, Größe: 25

 

 

Animation und Grundaufbau

Die Animationen bei SWR Aktuell sind fließend und weich. Dies bezieht sich sowohl auf Blenden, als auch auf die Animation einzelner Grafikelemente. Harte Bewegungen oder abrupte Starts und Stops sind stets zu vermeiden.

Schriften und Texte (Zitate, Headlines, Sublines etc.) werden zeilenweise, weich von links nach rechts eingeblendet.

Der Aufbau von Standardgrafiken orientiert sich an vier Grundrastern. Dabei ist zu beachten, dass die Varianten (2 und 4) mit der erhöhten Headline über der Linie nur in Sonderfällen wie beispielsweise Karten oder bei Google Earth-Flügen zu verwenden sind.

 

Videobeispiel Grundaufbau ohne Bild

 

 

Videobeispiel Grundaufbau ohne Bild (Variante)

 

 

Videobeispiel Grundaufbau mit Bild

 

 

Videobeispiel Grundaufbau mit Bild (Variante)

 

 

 

 

Piktogramme

Alle Piktogramme liegen nun als Pfade mit Konturlinien vor.

Dies ermöglicht einen flexiblen Umgang vor allem bei Grafikanimationen, da beispielsweise bei Skalierungen die Dicke der Kontur passend mit animiert werden kann. Die Stärke der Kontur sollte immer nachkorrigiert werden, damit optisch immer der gleiche Eindruck einer dünnen Linie bestehet.

Die Piktogramme liegen sowohl als Illustrator-File vor, wurden aber auch direkt in After Effects als Formebenen mit angelegt.

 



Referenz für Linienstärken bei Skalierung

 

Die Piktogrammsammlung ist nach Kategorien sortiert und wird den aktuellen und inhaltlichen Anforderungen entsprechend ständig erweitert.

 



1. Kategorie Basispiktogramme
2. Kategorie Mensch, Tier und Natur
3. Kategorie Verkehr
4. Kategorie Verkehrsschilder

 



1. Kategorie Gebäude
2. Kategorie Finanzen und Geld
3. Kategorie Technik und Elektronik
4. Kategorie Kommunikation und Versand

 



1. Kategorie Medizin
2. Kategorie Haushalt und Wohnen
3. Kategorie Sonstiges

 

 

Karten

Die Hauptauszeichnungsfarbe bei Karten ist die Primärfarbe (Petrol). Angrenzende Länder werden grau dargestellt mit dunkelgrauen Grenzen. Regional- und Bundesländergrenzen sind hellgrau. Für weitere Auszeichnungen können die Abstufungen aus der Graupalette verwendet werden.

Karten zeigen keine Topografie, außer in begründeten Ausnahmefällen. Städtenamen sind weiß und ohne Trägerfläche mit einem weißen Punkt verortet. Die Auszeichnung mit Label wird ausschließlich bei Google Earth-Karten eingesetzt.

Für die Gestaltung von weiteren Auszeichnungselementen wie Bahnstrecken, Autobahnen, etc. liegen ein Styleguide und unterschiedliche Arbeitsdokumente in den Standortgrafiken vor.

 



Deutschlandkarte

 



Auszeichnung Bundesland. Auszeichnungsfarbe: Leuchtendes Orange, 255r 78g 60b

 



1. Auszeichnungsstil 1 (z.B. für Länder, Regionen, etc.), TheSansB W5 Plain, Größe: 66px
2. Auszeichnungsstil 2 (z.B. für Länder, Regionen, etc.), TheSansB W5 Plain, Größe: 44px
3. Auszeichnung Stadt, TheSansB W8 ExtraBold, Größe: 44px
4. Auszeichnung Gewässer, TheSansB W5 Plain, Größe: 32px

 

Sollten Städte sehr nah beieinander liegen und es mit der Beschriftung zu eng werden, kann auf eine Zeigervariante zurückgegriffen werden.

 



1. Standard-Auszeichnung für Städte
2. Alternative Zeigerversion, falls Platzmangel besteht

 

Karten, die in den Moderationshintergründen eingesetzt werden, verwenden größere Schriftschnitte. Auszeich- nungsfarbe für Bereiche innerhalb des Bundeslandes ist das Leuchtende Orange.

 



1. Auszeichnung Stadt, TheSansB W8 ExtraBold, Größe: 60px
2. Auszeichnungsstil 2 (z.B. für Länder, Regionen, etc.), TheSansB W5 Plain, Größe: 60px
3. Auszeichnung Bereich, Leuchtendes Orange: 225r 78g 60b

 



Beispiel für Karte auf Moderationshintergrund

 

Videobeispiel Google Earth-Flug mit Labelvariante für Auszeichnung

 



Kartenlegende für weitere Auszeichnungselemente

 

 

Erklärstücke

Für die Gestaltung der Erklärstücke wurde ein benutzerfreundliches After Effects-Projekt anglegt, das alle Elemente enthält, die man für die animierte Grafikproduktion benötigt. Darüber hinaus finden sich darin viele vorformatierte Unterkompositionen für immer wiederkehrende Standards wie Aufzählungen, Torten, Wahlgrafiken, Kurvengrafiken und Arbeitslosenzahlen. Nähere Informationen zu Schriftschnitten, etc. können dem After Effects-Projekt entnommen werden (SWR Aktuell Infografiken).

 

Videobeispiel Aufzählung mit Bild

 

 

Videobeispiel 4 Balken mit Bild

 

 

Videobeispiel 5 Balken ohne Bild (Alternative)

 

 

Videobeispiel Wahlgrafik mit Bild

 

 

Videobeispiel Halbe Torte ohne Bild

 

 

Videobeispiel Ganze Torte mit Bild

 

 

Videobeispiel Zitat mit Bild

 

 

Videobeispiel Graph ohne Bild

 

 

 

Wetter

Für das Wetter bei SWR Aktuell wurden sowohl die Karten als auch die Piktogramme überarbeitet und in die Produktion der Wetter-Vollbildkarten und des moderierten Wetters integriert.

 



1. Moderiertes Wetter BW mit Bild
2. Moderiertes Wetter BW Nachtkarte
3. Moderiertes Wetter BW Tagkarte
4. Moderiertes Wetter BW Aussichten

 



1. Vollbildkarte RP Nacht
2. Vollbildkarte RP Tag
3. Vollbildkarte RP Aussichten

 

Übersicht Wetter-Piktogrammanimationen

 

 

Einzelne Seiten anzeigen