Der Grafikstil 29. Mai 2019 - Daimler Brand & Design ...
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Daimler Brand & Design Navigator 29. Mai 2019 Der Grafikstil Mit Tabellen und Diagrammen, Piktogrammen oder Informationsgrafiken können dem Betrachter 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 2D 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 Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 1 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
Hervorhebung von Texten, Werten oder Flächen kann die Akzentfarbe 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ßtext 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 Schriftschnitt Größe/ZAB Schriftsatz Farbe
Überschrift Daimler CS Bold 9 pt/4 mm linksbündig Schwarz
Zwischenüberschrift Daimler CS Regular 9 pt/4 mm linksbündig Schwarz, Petrol
7,5 pt/4 mm
Fließtext Daimler CS Regular 7,5 pt/4 mm linksbündig Schwarz
Auszeichnung Daimler CS Regular 9 pt/4 mm linksbündig Schwarz, Petrol
Daimler CS Bold 7,5 pt/4 mm
Diagramme Schriftschnitt Größe/ZAB Schriftsatz Farbe
Überschrift Daimler CS Bold 9 pt/4 mm linksbündig Schwarz
Legenden Daimler CS Regular 7,5 pt/3 mm linksbündig Schwarz
Beschriftung/Ziffern Daimler CS Regular 7,5 pt/4 mm linksbündig Schwarz, Weiß
rechtsbündig
Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 2 von 18
https://designnavigator.daimler.com
© 2019 Daimler AG. Alle Rechte vorbehalten.
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 Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 3 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
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 Millimeter 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 Millimeter betragen. Balkendiagramme in vertikaler und horizontaler Ausrichtung und in Abstufungen von Petrol bzw. Light Grey Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 4 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
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 Versalien ebenfalls aus dem Schriftschnitt Daimler CS Demi gesetzt. Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 5 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
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: Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 6 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
[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 Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 7 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
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 Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 8 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
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 Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 9 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
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 Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 10 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
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 Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 11 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
stehen dadurch mit der Hausschrift in direktem gestalterischem Bezug. Die Daimler Piktogramme stehen als PDF-Datei (vektorbasiert und frei skalierbar) sowie als Grafik-Datei im PNG-Format zur Verfügung. Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 12 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
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. Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 13 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
Typografische Piktogramme werden mit einem Rahmen kombiniert. Figuren sind flächig angelegt. Die Corporate Piktogramme werden sowohl in gedruckten Medien, in der Begegnungskommunikation, in Informationsgrafiken, 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/). Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 14 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
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 entspricht. Infografiken Für die Gestaltung von Infografiken stehen alle Farben der Daimler Farbwelt zur Verfügung. Allerdings ist auch hier Deep Red nur sehr sparsam zu verwenden. Die Infografiken können auf Weiß oder auf Light Grey und dessen Abdunkelungen stehen. Sie stehen jedoch niemals auf der silbernen Bürstungsfläche. Grundsätzlich zeichnen sich Infografiken durch gefüllte Flächen aus, die konturlos sind, ausnahmsweise sind aber auch Transparenzen möglich. Zum Einsatz kommen reduzierte Darstellungen, bei denen auf überflüssige Details verzichtet wird. Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 15 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
Organigramm mit einer Hervorhebung in Petrol auf einem Hintergrund in Light Grey Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 16 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
Weltkarte auf weißem Hintergrund mit thematischen Hervorhebungen in petrolfarbener Tranparenz Funktions- oder Objektdarstellung auf Hintergrund in Light Grey Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 17 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
Schaubild auf weißem bzw. Light Grey Hintergrund mit Hervorhebungen in Deep Red und Petrol Veröffentlicht am 29. Mai 2019 um 11:04 Uhr Seite 18 von 18 https://designnavigator.daimler.com © 2019 Daimler AG. Alle Rechte vorbehalten.
Sie können auch lesen
