Tabellen, Diagramme und Infografiken

Mit Tabellen und Diagrammen, Piktogrammen oder Infografiken können den Betrachter*innen komplexe Gesamtzusammenhänge leicht verständlich vermittelt werden. Durch die visuelle Aufbereitung der Daten werden individuelle Informationen für Web, Print usw. anschaulich und überzeugend dargestellt. Die grafischen Elemente sind geprägt durch eine klare, aufgeräumte und übersichtliche Darstellung. Die Tabellen, Diagramme usw. werden grundsätzlich in 2D2D
2D steht für Zweidimensionalität. Die Position jedes Punktes eines 2D-Objektes basiert auf zwei ... ohne Schatteneffekte dargestellt.

Tabellen und Diagramme

Allen Tabellen und Diagrammen liegt ein 1 x 1 mm Raster zugrunde. Die Grundlinien verlaufen horizontal und in Schwarz in der Linienstärke 0,25 pt bzw. 0,75 pt für die Hervorhebung von Überschriften. Zur Hervorhebung von Texten, Werten oder Flächen kann die AkzentfarbeAkzentfarbe
Im Daimler-Farbsystem sind dies: Petrol, Deep Red und Light Grey. Petrol mit seinen entsprechenden Aufhellungen und Abdunkelungen eingesetzt werden. Deep Red wird nur sparsam für Hervorhebungen verwendet. Tabellen und Diagramme stehen auf Weiß oder auf einem Hintergrund in Light Grey. Texte und Ziffern stehen in Schwarz auf weißen oder hellen Hintergründen bzw. auf dunklem Hintergrund in Weiß. Zeilen und/oder Spalten einer Tabelle können in Light Grey einschließlich der aufgehellten oder abgedunkelten Farbtöne dargestellt werden. Steht eine Grafik innerhalb eines Fließtextes, wird sie nach oben mit einer 1pt dicken Linie vom FließtextFließtext
Auch Lauftext genannt. Der fortlaufende Text eines Beitrages oder Artikels. begrenzt. Unterhalb dieser Linie steht dann die dazugehörige Tabellen-Überschrift. Wird die Tabelle oder das Diagramm nicht in den Fließtext integriert (z. B. innerhalb einer PowerPoint-Präsentation), steht die Tabellen- oder Diagramm-Überschrift oberhalb dieser Linie.

Tabellen auf weißem Hintergrund und auf Light Grey mit farbig akzentuierten Werten in Petrol

Diagrammvarianten
Liniendiagramme eignen sich am besten um Auf- oder Abwärtstrends herauszustellen. Sie sind vorzugsweise in horizontaler Ausrichtung anzulegen. Für die Darstellung der verschiedenen Trends stehen Linienstärken von 1 pt, 1,5 pt, 2 pt und 3 pt zur Verfügung. Liniendiagramme können auch als Flächendiagramm angelegt werden.

Liniendiagramm auf weißem Hintergrund und Flächendiagramm auf Light Grey

Säulendiagramme erklären Veränderungen über einen Zeitraum hinweg. Farbige Flächen werden vertikal oder horizontal nebeneinandergestellt. Die Säulenstärke sollte mindestens 2 mm betragen. Es ist darauf zu achten, dass die Säulen nicht direkt aneinander sondern immer mit einem Abstand zueinander angeordnet werden.

Deep Red wird auch in Säulendiagrammen nur sparsam für Hervorhebungen genutzt.

Mit Balkendiagrammen können sehr gut Rangfolgen aufgezeigt werden. Die einzelnen Elemente additiver Balkendiagramme werden durch eine 0,5 pt starke, weiße Linie unterteilt. Die Breite der Balken sollte mindestens 3 mm betragen.

Balkendiagramme in vertikaler und horizontaler Ausrichtung und in Abstufungen von Petrol bzw. Light Grey

Kreisdiagramme eignen sich gut für die Darstellung von Verteilungen und Anteilen. Sie werden als Ring- oder Tortendiagramme verwendet. Die Breite des Rings beträgt mindestens 2 mm. Die einzelnen Segmente werden durch eine 0,5 pt starke, weiße Linie getrennt. Bei der Erstellung ist darauf zu achten, dass das erste Element auf der 12:00-Uhr-Linie beginnt.

Kreisdiagramme in der Form eines Ringdiagramms und bzw. eines vollflächigen Tortendiagramms

Piktogramme

Piktogramme stehen für ganz konkrete Gegenstände oder Sachverhalte. Sie müssen deshalb eine klare und visuell eindeutige Sprache sprechen, müssen selbsterklärend und international verständlich sein. Die Formensprache der Piktogramme bei Daimler ist prinzipiell eckig, ihre Linienstärke orientiert sich an dem Schriftschnitt Daimler CS Demi. Textelemente in Piktogrammen, z. B. das Wort „Exit“, werden in VersalienVersalien
Großbuchstaben. ebenfalls aus dem Schriftschnitt Daimler CS Demi gesetzt.

Piktogramme Teil 1:
[01] Pfeil nach oben, [02] Pfeil nach oben rechts, [03] Pfeil nach rechts, [04] Pfeil nach unten rechts, [05] Pfeil nach unten, [06] Pfeil nach unten links, [07] Pfeil nach links, [08] Pfeil nach oben links und [09] Richtungen

Piktogramme Teil 2:
[01] Rolltreppe nach oben, [02] Rolltreppe nach unten, [03] Notausgang nach links, [04] Notausgang nach rechts, [05] Rollstuhl, [06] Abfall, [07] Toilette, [08] WC Herren, [09] WC Damen, [10] Treppe aufwärts, [11] Treppe abwärts, [12] Treffpunkt, [13] Aufzug, [14] Parkhaus, [15] Parkplatz, [16] Behindertentoilette und [17] Bushaltestelle

Piktogramme Teil 3:
[01] Säulendiagramm 1, [02] Säulendiagramm 2, [03] Säulendiagramm 3, [04] Einzelperson, [05] Gruppe, [06] Hierarchie, [07] Handschlag, [08] Teilen, [09] Netzwerk, [10] Ampel, [11] Ampel rot, [12] Ampel gelb und [13] Ampel grün

Piktogramme Teil 4:
[01] Erste Hilfe, [02] Raucher, [03] Rauchverbot, [04] Kaffee, [05] Essen, [06] Garderobe, [07] Feuerlöscher, [08] Telefon, [09] Eis, [10] Spaten, [11] Schließfach, [12] Home, [13] Fabrikgebäude, [14] Stadt und [15] Schloss

Piktogramme Teil 5:
[01] erledigt, [02] Checkliste, [03] Stift, [04] Aufgabe, [05] Zertifikat, [06] Drucken, [07] Kopieren, [08] Dokument, [09] Archiv, [10] Mitteilung, [11] Bibliothek, [12] Kalender, [13] Taschenrechner, [14] Kreditkarte, [15] Geld, [16] Herunterladen, [17] Hochladen, [18] Daumen hoch und [19] Daumen runter

Piktogramme Teil 6:
[01] Megafon, [02] Ziel, [03] Hindernis, [04] Siegerpodest, [05] Pokal, [06] Fernglas, [07] Brille, [08] Bildung, [09] Gesundheit, [10] Waage, [11] Schlaf, [12] Konzentration, [13] Analyse 1, [14] Analyse 2, [15] Motivation 1, [16] Motivation 2, [17] Zahnräder, [18] Idee, [19] Musik und [20] Ziel

Piktogramme Teil 7:
[01] Kreis leer, [02] Kreis ein Viertel gefüllt, [03] Kreis halb gefüllt, [04] Kreis drei Viertel gefüllt, [05] Kreis gefüllt, [06] Störer 1, [07] Störer 2, [08] Wiedergabe rückwärts, [09] Wiedergabe vorwärts, [10] Pause, [11] Suche, [12] Verkleinern, [13] Vergrößern und [14] Globus

Piktogramme Teil 8:
[01] Smartphone, [02] Tablet, [03] Desktop, [04] Laptop, [05] digitale Medien, [06] Kamera, [07] Link, [08] Cloud, [09] WLAN, [10] Aktualisieren, [11] Sprechblase, [12] Information, [13] Trichter, [14] Einkaufswagen, [15] Google+, [16] Facebook, [17] Twitter, [18] LinkedIn, [19] Xing und [20] Instagram

Piktogramme Teil 9:
[01] Vernetzung, [02] Autonomes Fahren, [03] Sharing & Services, [04] Elektromobilität, [05] Pkw, [06] Taxi, [07] Zug, [08] Bus, [09] Fahrrad, [10] Fuhrpark, [11] Werkzeug, [12] Tachometer, [13] Kompass, [14] Elektroladestation, [15] Zapfsäule, [16] Blitz, [17] E-Batterie, [18] Stopp, [19] Vorsicht und [20] Verbot

Piktogramme Teil 10:
[01] Medienwand, [02] Geschäftsbeziehungen, [03] Präsentation, [04] Wartezone, [05] Virtual Reality, [06] Augmented Reality, [07] Snapchat, [08] WhatsApp und [09] YouTube

Piktogramme Teil 11:
[01] Flugzeug, [02] Drohne, [03] Lufttaxi, [04] Lieferwagen, [05] Helpdesk, [06] Geschäftsvorgänge, [07]  Strommast, [08] Windrad, [09] Sparschwein, [10] Videokamera, [11] Verteiler, [12] Themensammlung, [13]  Thinktank, [14] Diskussion, [15] Tabuthema 1, [16] Tabuthema 2, [17] Tabuthema 3, [18] kritisches Thema 1 und [19] kritisches Thema 2

Piktogramme Teil 12:
[01] Pkws 1, [02] Pkws 2, [03] Lkw, [04] Lkws, [05] Van,  [06] Vans, [07] Busse, [08] Verkehr, [09] Plugin-Hybrid, [10] selbstfahrender Pkw, [11] Elektro-Pkw, [12] Elektro-Pkws 1, [13] Elektro-Pkws 2, [14] Elektro-Lkw, [15] Elektro-Lkws, [16] Elektro-Van, [17] Elektro-Vans, [18] Elektro-Bus, [19] Elektro-Busse und [20] Autoschlüssel

Typografische Piktogramme:
öffentlich, vertraulich, geheim, internal, Taxi, WC und Exit in den Farben Schwarz und Signalrot

Die Piktogramme können in den Farben Schwarz, Weiß, Petrol und Light Grey einschließlich ihrer Abdunkelungen und Aufhellungen sowie in der Volltonfarbe Deep Red eingesetzt werden. Bei Piktogrammen, die auf Verbote hinweisen, wird das Zeichen mit einem Querbalken oder einem Kreis mit Querbalken in Signalrot kombiniert. Alle Pfeile und Figuren haben gerade beschnittene Enden und stehen dadurch mit der HausschriftHausschrift
Die Schrift, mit denen sich ein Unternehmen nach außen und innen identifiziert und präsentiert. Bei ... in direktem gestalterischem Bezug.

Alle Daimler-Piktogramme stehen als PDF-Datei (vektorbasiert und frei skalierbar) sowie als Grafik-Datei im PNG-Format zur Verfügung.

Die Piktogramme orientieren sich an der Formensprache des Schriftschnitts Daimler CS Demi.

Typografische Piktogramme werden mit einem Rahmen kombiniert. Der Rahmen kann auch als wegweisendes Element mit Pfeilspitze ausgeführt werden. Bildhafte Piktogramme werden mit eckigen Linienenden ausgeführt und fügen sich so harmonisch in das Gesamterscheinungsbild von Daimler ein. Figuren werden flächig angelegt und können ggf. mit weiteren Elementen wie Rahmen, Pfeil oder Typografie kombiniert werden.

Typografische Piktogramme werden mit einem Rahmen kombiniert.

Figuren sind flächig angelegt.

Die Corporate Piktogramme werden sowohl in gedruckten Medien, in der Begegnungskommunikation, in Infografiken, in Bildschirmpräsentationen etc. als auch in Richtungs- und Wegeleitsystemen eingesetzt. Nur in der Programmierung von Webanwendungen und nativen Apps für mobile Endgeräte finden sie keine Verwendung, da dafür die Streamline-Web-Piktogramme zur Verfügung stehen (http://styleguide.daimler.com/stilelemente/icons/).

Einheitliche Linienstärken und eine eckige Formensprache geben den Piktogrammen ihren Charakter.

Sollten Sie feststellen, dass wichtige Piktogramme fehlen, schreiben Sie uns bitte eine E-Mail (corporate.design@daimler.com) und wir werden versuchen, die Bibliothek so schnell wie möglich zu ergänzen. Wollen Sie selbst Piktogramme für nicht vorhandene Sachverhalte anlegen, achten Sie bitte darauf, dass die Formensprache und Linienstärken den hier gezeigten Beispielen entsprechen.

Infografiken

Bei der Gestaltung von Infografiken soll darauf geachtet werden, dass die genutzten Elemente aus Form und Text eine harmonische Gesamtheit bilden und den Grafikstil von Daimler widerspiegeln.

Für die Gestaltung von Infografiken kommen reduzierte Darstellungen zum Einsatz, bei denen auf überflüssige Details verzichtet wird.

Bei der Erstellung einer Infografik sollten folgende Fragen vorab beantwortet sein:

• Über welchen Kanal (Web, Print, Blog, Begegnungskommunikation usw.) soll die Botschaft kommuniziert werden? Darüber hinaus ist auch der crossmediale Einsatz zu beachten.
• Um welche Art von Informationen (Statistiken, Prozesse, Chronologien, Gegenüberstellungen usw.) handelt es sich?
• Welche Elemente (Charts, Diagramme, Fotos usw.) müssen mit abgebildet werden bzw. können die Daten und Fakten unterstützen?

Es muss zwischen einfachen und komplexen Informationen unterschieden werden. Grundsätzlich gilt: komplexe Zusammenhänge einfach und verständlich abzubilden. Der Leser muss in der Lage sein, die Themen schnell erfassen zu können. 

Einheitlich gestaltete Piktogramme gewährleisten hohe Wiedererkennung.

Durch eine Kombination aus Piktogrammen, Illustrationen, Fotos und Texten können statische oder animierte Infografiken komplexe Informationen und Daten leicht verständlich visualisieren. So kann eine Infografik als eigenständiger Inhalt stehen, aber auch im Kontext eines Artikels mit Zusatztext dargestellt werden. 

Farben
Für die Gestaltung von Infografiken stehen zusätzlich die Farben der erweiterten Daimler-Farbpalette zur Verfügung. Empfehlenswert ist es, sich vorab für ein Farbschema zu entscheiden. Es hat sich bewährt, Infografiken mit zwei oder drei Farben zu gestalten, die einen hohen Kontrast aufweisen.

Die erweiterte Farbpalette mit Aufhellungen und Abdunkelungen darf nur für Infografiken verwendet werden. 

Wenn eine Infografik z. B. Formen mit kräftigen Farben auf einen hellen Hintergrund aufweist, wird die Aufmerksamkeit sofort auf die dominanten Farben gelenkt. Auf diese Weise werden Informationen besser organisiert und es entsteht eine visuelle Hierarchie. Die erweiterte Farbpalette mit Aufhellungen und Abdunkelungen von Orange und Green sowie die Aufhellungen von Deep Red dürfen nur für Infografiken verwendet werden. Darüber hinaus können transparente farbige Flächen (ohne Kontur) eingesetzt werden.

Typografie
Als Standardschrift kommt grundsätzlich die Daimler CS zum Einsatz, wobei alle Schriftschnitte zur Verfügung stehen. Generell gilt, dass zwei bis maximal drei Schriftschnitte kombiniert werden. Versalien können für Schlagwörter genutzt werden. Headlines und längere Texte sind in gemischter Schreibweise (Groß-/Kleinschreibung) vorgesehen.

Informationsgrafiken müssen einfach und verständlich aufgebaut sein, damit der Betrachter das Thema schnell erfassen kann.

Jede Infografik benötigt eine Überschrift, die normalerweise in der größten SchriftgrößeSchriftgröße
Die Maßeinheit für die Schriftgröße ist Punkt (Pt.). gesetzt wird, so dass die Leser das Thema sofort erfassen. Die Überschrift sollte kurz und prägnant gehalten und die Textmenge auf ein Minimum begrenzt werden. Die besten Infografiken haben den größten Effekt durch ihre anschauliche und überzeugende Darstellung.

Piktogramme
Wird eine Infografik hauptsächlich aus Piktogrammen erstellt, sollten diese immer im selben Stil gehalten sein, um Einheitlichkeit zu gewährleisten und die Wiedererkennung zu erhöhen. Da Piktogramme für konkrete Gegenstände oder Sachverhalte stehen, müssen sie eine klare und eindeutige Sprache sprechen, selbsterklärend und international verständlich sein.

Wird eine Infografik hauptsächlich aus Piktogrammen erstellt, sollten diese immer im selben Stil gehalten sein.

Verwendet werden die Icons aus dem Bestand der Daimler-Piktogramm-Bibliothek. Der Bestand wird kontinuierlich nach Bedarf erweitert. Bei der Neuerstellung von Piktogrammen für nicht vorhandene Gegenstände oder Sachverhalte müssen die Formensprache und die Linienstärken der Daimler-Piktogramme übernommen werden.

Grafische Elemente
Innerhalb einer Infografik sollte eine visuelle Hierarchie die Betrachter durch die Vielfalt der dargestellten Informationen führen. Werden Elemente willkürlich dimensioniert und ohne ersichtlichen Grund farblich differenziert, wird die Botschaft der Infografik schwer zu entziffern sein. Infografiken sollten konsistent gestaltet sein, z. B. indem durchgängig gefüllte Symbole anstatt Strichzeichnungen verwendet werden. Dieser Stil sollte dann für das gesamte Thema angewandt werden. Das Gleiche gilt auch für die verwendete Bildsprache, die Schriftschnitte und die ausgewählte Farbkombination. Dadurch wirkt die Infografik aufgeräumt und lesbar.

Infografiken sollten konsistent gestaltet sein, z.B. indem durchgängig gefüllte Symbole anstatt Strichzeichnungen verwendet werden. 

Werden Piktogramme mit Fotos kombiniert, sollte man mit einer farbigen Fläche arbeiten, die maximal ein Drittel des Bildformats bedeckt. Je nach Kontrast kann das PiktogrammPiktogramm
Grafisches Bildsymbol mit international verständlicher Bedeutung. in Daimler Petrol oder Weiß abgebildet werden. Piktogramme sollten nicht alleine stehen, sondern immer in Kombination mit Informationstext. Vertikale, horizontale und diagonale Linien können Text und Form zu einer Einheit verbinden.

Durch eine Kombination aus Illustrationen und Texten können Infografiken komplexe Informationen und Daten leicht verständlich visualisieren. 

Wird die Infografik mit zu vielen Elementen überfüllt, kann dies den Leser überfordern und die Aufnahme und Verarbeitung der Informationen erschweren. Weniger ist mehr!

Fotos
Werden Fotos in Infografiken integriert, dann sollten nur solche mit homogenem Farbhintergrund zum Einsatz kommen. Werden mehrere Fotos verwendet, sollten diese eine einheitliche Bildsprache aufweisen. Es ist wichtig, sich an einen bestimmten Stil zu halten. Fotos, die eindeutig nicht in das Set passen, können von den übermittelten Informationen ablenken.

Infografiken gestaltet aus einer Kombination von Fotos und Piktogrammen.

Animation
Animationen sollten mit Bedacht und reduziert eingesetzt werden. Für ein harmonisches Gesamterlebnis sollte das Timing aller Elemente genau abgestimmt sein. Übermäßige Animationen können den Betrachter von der eigentlichen Botschaft ablenken. Die Animation sollte einheitlich und nicht zu hektisch oder abgehackt sein, Sie sollte sanfte Übergänge und fließende Veränderungen in den Abbildungen aufweisen.