Tabellen, Diagramme, Piktogramme 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
Petrol, Deep Red und Light Grey werden als Akzentfarben bezeichnet. 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 in einer Publikation, Presse-Information etc. 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 den Daimler namenstragenden Gesellschaften 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 in der Bibliothek „Nachhaltigkeit“

Piktogramme in der Bibliothek „Nachhaltigkeit“

Die Bibliothek „Nachhaltigkeit“ enthält 44 Piktogramme:
[1] Nachhaltigkeit, [2] Strategie („Spurwechsel“), [3] Strommast, [4] Windrad, [5] Elektromobilität, [6] Elektroladestation, [7] Zapfsäule, [8] Blitz, [9] E-Batterie, [10] Fabrikgebäude, [11] Stadt, [12] Klimaschutz, [13] Ressourcenschonung 1, [14] Ressourcenschonung 2, [15] Ressourcenschonung 3, [16] Emissionsfreies Fahrzeug, [17] Kohlenstoffdioxid, [18] Wasserstoff, [19] Wassermolekül, [20] Wasserstoffperoxid, [21] Sauerstoff, [22] Sonnenenergie, [23] Wasserverbrauch, [24] Abfälle, [25] Rohmaterial, [26] Recycelbare Batterie, [27] Rohöl, [28] Erdgas, [29] Biomasse, [30] Elektrizität, [31] Grundwasserverschmutzung, [32] Boden-/Grundwasserverschmutzung, [33] Bodenverschmutzung, [34] Gewässer, [35] Energieeffizienz, [36] Pflanze, [37] Laubbaum, [38] Nadelbaum, [39] Tiere, [40] Elch, [41] Eisbär, [42] Wassertropfen (einzeln), [43] Wasserschutz und [44] Wassertropfen

Piktogramme in der Bibliothek „Coronavirus-Pandemie“

Die Bibliothek „Coronavirus-Pandemie“ enthält 23 Piktogramme: 
[1] Coronavirus, [2] Schutzmaßnahme, [3] Mund-Nasen-Maske (Seitenansicht), [4] Mund-Nasen-Maske (Vorderansicht), [5] Abstand halten, [6] In die Armbeuge husten, [7] Nicht in die Hand niesen, [8] Aktuelle Sonderregelungen für Kantine beachten, [9] Sonderregelungen bei Verkehrsmitteln beachten, [10] Aushänge vor Ort beachten, [11] Nicht die Hand geben, [12] Bei Fieber: zu Hause bleiben, [13] Türklinke ohne Hautkontakt betätigen, [14] Kontaktflächen reinigen, [15] Gruppenbildung vermeiden, [16] Auf Krankheitsanzeichen achten, [17] Regelmäßig lüften, [18] Krankheit auskurieren, [19] Hände unter fließendes Wasser halten, [20] Seife in den Händen verreiben, [21] Seife zwischen den Fingern verreiben, [22] Hände gründlich abspülen und [23] Hände sorgfältig abtrocknen

Piktogramme in der Bibliothek „Allgemein“

Piktogramme in der Bibliothek „Allgemein“

Die Bibliothek „Allgemein“ enthält 41 Piktogramme:
[1] Beratung, [2] Lesezeichen, [3] Puzzle, [4] Leistungsbereitschaft, [5] Werkstatt, [6] Kundenorientierung, [7] Kundenübergabe, [8] Home, [9] Kontinente Afrika-Europa, [10] Kontinente Nordamerika-Südamerika, [11] Kontinente Asien-Australien, [12] Globus, [13] Werkzeug, [14] Tachometer, [15] Kompass, [16] Stopp, [17] Kreis leer, [18] Kreis ein Viertel gefüllt, [19] Kreis halb gefüllt, [20] Kreis drei Viertel gefüllt, [21] Kreis gefüllt, [22] Störer 1, [23] Störer 2, [24] Verbot, [25] Vorsicht, [26] Musik, [27] Zielfahnen, [28] Hindernis, [29] Siegerpodest, [30] Pokal, [31] Fernglas, [32] Brille, [33] Stift, [34] Daumen hoch, [35] Daumen runter, [36] Bibliothek, [37] Ampel, [38] Ampel rot, [39] Ampel gelb, [40] Ampel grün und [41] Kalender

Piktogramme in der Bibliothek „Arbeitswelt“

Piktogramme in der Bibliothek „Arbeitswelt“

Die Bibliothek „Arbeitswelt“ enthält 31 Piktogramme:
[1] Teamwork, [2] Integrität, [3] Feedbackkultur, [4] Vernetzung, [5] Partizipation, [6] Team-Mix, [7] Sparschwein, [8] Themensammlung, [9] Thinktank, [10] Bildung, [11] Gesundheit, [12] Waage, [13] Schlaf, [14] Konzentration, [15] Analyse 1, [16] Analyse 2, [17] Motivation 1, [18] Motivation 2, [19] Zahnräder, [20] Idee, [21] Zielscheibe, [22] Checkliste, [23] Aufgabe, [24] Zertifikat, [25] Besprechung, [26] Büroarbeitsplätze, [27] Arbeitsplatz, [28] Geschäftsbeziehungen, [29] Erledigt, [30] Hierarchie und [31] Handschlag

Piktogramme in der Bibliothek „Mobilität“

Piktogramme in der Bibliothek „Mobilität“

Die Bibliothek „Mobilität“ enthält 22 Piktogramme:
[1] Pkw, [2] Elektro-Pkw, [3] Plugin-Hybrid, [4] Selbstfahrender Pkw, [5] Autonomes Fahren, [6] Autonomes Fahren (Lenkrad), [7] Taxi, [8] Van, [9] Elektro-Van, [10] Pkw und Van, [11] Zug, [12] Lieferwagen, [13] Autoschlüssel, [14] Sharing & Services, [15] Ziel, [16] Route, [17] Fußgänger, [18] Fahrrad, [19] Fahrradfahrer, [20] Flugzeug, [21] Drohne und [22] Lufttaxi

Piktogramme in der Bibliothek „Social Media“

Die Bibliothek „Social Media“ enthält neun Piktogramme:
[1] LinkedIn, [2] Twitter, [3] Xing, [4] YouTube, [5] Facebook, [6] Instagram, [7] WhatsApp und [8] Snapchat

Piktogramme in der Bibliothek „Kommunikation“

Die Bibliothek „Kommunikation“ enthält 28 Piktogramme:
[1] Mobile App, [2] Zuhören, [3] Mikrofon, [4] Videokamera, [5] Helpdesk, [6] Megafon, [7] Verteiler, [8] Sprechblase, [9] Dialog, [10] Informieren, [11] kritisches Thema 1, [12] kritisches Thema 2, [13] Tabuthema 1, [14] Tabuthema 2, [15] Tabuthema 3, [16] Diskussion, [17] Medienwand, [18] Präsentation, [19] Smartphone, [20] Tablet, [21] Desktop, [22] Laptop, [23] Digitale Medien, [24] Kamera, [25] Information, [26] Dokument, [27] Archiv und [28] Mitteilung

Piktogramme in der Bibliothek „Technologie/IT“

Die Bibliothek „Technologie/IT“ enthält 30 Piktogramme:
[1] Künstliche Intelligenz, [2] Fingerabdruck, [3] Sicherheit, [4] Datenbank, [5] Blockchain, [6] Analysetools, [7] Datenverarbeitung, [8] Aktualisieren, [9] Cloud, [10] Datenschutz (Cloud), [11] Vernetzung, [12] Link, [13] Virtual RealityVirtual Reality
Als virtuelle Realität bezeichnet man eine allumfassende Computer-generierte Nachbildung der ..., [14] Augmented Reality, [15] WLAN, [16] Trichter, [17] Einkaufswagen, [18] Wiedergabe rückwärts, [19] Wiedergabe vorwärts, [20] Pause, [21] Suche, [22] Verkleinern, [23] Vergrößern, [24] Drucken, [25] Kopieren, [26] Herunterladen, [27] Hochladen, [28] Schloss, [29] Teilen und [30] Netzwerk

Piktogramme in der Bibliothek „Geschäftsvorgänge“

Die Bibliothek „Geschäftsvorgänge“ enthält acht Piktogramme:
[1] Geschäftsvorgänge, [2] Finanzielle Verantwortung, [3] Geld, [4] Kreditkarte, [5] Taschenrechner, [6] Säulendiagramm 1, [7] Säulendiagramm 2 und [8] Säulendiagramm 3

Piktogramme in der Bibliothek „Personen“

Die Bibliothek „Personen“ enthält acht Piktogramme:
[1] Mann und Frau (Teilansicht), [2] Weibliche Personen, [3] Einzelperson, [4] Weibliche Person, [5] Gruppe, [6] Mann (Vollansicht), [7] Frau (Vollansicht) und [8] Bevölkerung

Piktogramme in der Bibliothek „Beschilderung“ 

Piktogramme in der Bibliothek „Beschilderung“

Die Bibliothek „Beschilderung“ enthält 42 Piktogramme:
[1] Treffpunkt, [2] Treppe, [3] Treppe aufwärts, [4] Treppe abwärts, [5] Wartezone, [6] Rolltreppe nach oben, [7] Rolltreppe nach unten, [8] Notausgang nach links, [9] Notausgang nach rechts, [10] Rollstuhl, [11] Toilette, [12] WC Damen, [13] WC Herren, [14] Abfall, [15] Aufzug, [16] Erste Hilfe, [17] Kaffee, [18] Essen, [19] Garderobe, [20] Raucherzone, [21] Rauchverbot, [22] Feuerlöscher, [23] Telefon, [24] Eis, [25] Baustelle, [26] Parkhaus, [27] Parkplatz, [28] Behindertentoilette, [29] Schließfach, [30] Bushaltestelle, [31] Dusche, [32] Dusche Damen, [33] Dusche Herren, [34] Umkleide, [35] Umkleide Damen, [36] Umkleide Herren, [37] Liegeraum/Ruheraum, [38] Taxi, [39] WC, [40] Exit, [41] Exit links und [42] Exit rechts

Piktogramme in der Bibliothek „Pfeile“

Die Bibliothek „Pfeile“ enthält neun Piktogramme:
[1] Pfeil nach oben rechts, [2] Pfeil nach unten links, [3] Pfeil nach oben links, [4] Pfeil nach unten rechts, [5] Pfeil nach rechts, [6] Pfeil nach links, [7] Pfeil nach oben, [8] Pfeil nach unten und [9] Richtungen

Typografische Piktogramme zur Klassifizierung von Informationen

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 der sich ein Unternehmen oder eine Marke nach außen und innen identifiziert und ... in direktem gestalterischem Bezug.

Alle Daimler-Piktogramme stehen als vektorbasierte und frei skalierbare Dateien in den Formaten PDF und SVG sowie als Grafik-Datei im Format PNG 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 der Daimler namenstragenden Gesellschaften 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 Piktogramme können zur Visualisierung komplexer Zusammenhänge zu einer Grafik kombiniert werden. Die einzelnen Symbole werden dabei im erweiterten Raster mit gleicher Skalierung proportional aneinander ausgerichtet. Bei Übergängen sollte der Abstand zwischen einzelnen Linien jeweils der allgemeinen Konturstärke entsprechen. Damit die neue Komposition eine klar erkennbare Wirkung erzielen kann, sind perspektivische Verzerrungen an der Linienführung oder Änderungen an der geometrischen Formsprache der Original-Dateien zu vermeiden.

Überlagerungen einzelner Piktogramme werden im gleichen Abstand zur allgemeinen Konturstärke verwendet.

Bei Kompositionen aus mehreren Piktogrammen sollte auf eine einheitliche Skalierung und die proportionale Ausrichtung im Raster geachtet werden.

Die Piktogramme werden sowohl in gedruckten Medien, in der Begegnungskommunikation, in Infografiken, in Bildschirmpräsentationen etc. als auch in Richtungs- und Wegeleitsystemen eingesetzt.

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

Infografiken

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

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 Infografiken 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 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.

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

Infografiken sollten konsistent gestaltet sein, z. B. indem durchgängig gefüllte Symbole anstatt Strichzeichnungen verwendet 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.

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 den Farben 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.

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.