Digitale Medien, UX-UI Design > DB Icons Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.03.2017 Seite 1 Inhalte Auf einen Blick: Icon Systematik CD-Regeln: Form und Aufbau der DB Icons Gestaltungsraster Abbildungsgrößen Gestaltungsvarianten Konturlinien Schlagschatten Helligkeitsverläufe Farben Mehrfarbige Symbole DB Icons elektronische Medien Icons beeinflussen die Usability und prägen die ästhetische Qualität aller elektronischen Medien. Für die Gestaltung unserer Medien werden eigene DB Icons mit unserer einheitlichen Zeichensprache und Systematik eingesetzt. Vorlagen für die DB Icons stehen lizenzfrei zum Download zur Verfügung. Sie liegen im SVG-Format vor und können verlustfrei skaliert bzw. nach Vorgabe angepasst werden. Zum differenzierten Einsatz für unterschiedliche Inhalte, funktionale Anwendungen oder verschiedene Medien steht ein ganzes Sortiment an Gestaltungsmöglichkeiten wie Konturen, Farben, Helligkeitsverläufe und Schlagschatten zur Verfügung. Auf dieser Seite finden Sie die DB Icons für die wichtigsten Funktionen von elektronischen Anwendungen. DB Dashboard Icons für individuelle Anwendungszwecke finden Sie unter: DB Dashboard Icons Die Downloads werden schrittweise um weitere Icons ergänzt. Bei Fragen wenden Sie sich bitte an den Ansprechpartner (s. ganz rechts).
Transcript
Digitale Medien, UX-UI Design > DB Icons
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.03.2017 Seite 1
Inhalte
Auf einen Blick:
Icon Systematik
CD-Regeln:
Form und Aufbau der DB Icons
Gestaltungsraster
Abbildungsgrößen
Gestaltungsvarianten
Konturlinien
Schlagschatten
Helligkeitsverläufe
Farben
Mehrfarbige Symbole
DB Icons elektronische Medien
Icons beeinflussen die Usability und prägen die ästhetische Qualität allerelektronischen Medien. Für die Gestaltung unserer Medien werden eigeneDB Icons mit unserer einheitlichen Zeichensprache und Systematikeingesetzt.
Vorlagen für die DB Icons stehen lizenzfrei zum Download zur Verfügung.Sie liegen im SVG-Format vor und können verlustfrei skaliert bzw. nachVorgabe angepasst werden.
Zum differenzierten Einsatz für unterschiedliche Inhalte, funktionaleAnwendungen oder verschiedene Medien steht ein ganzes Sortiment anGestaltungsmöglichkeiten wie Konturen, Farben, Helligkeitsverläufe undSchlagschatten zur Verfügung.
Auf dieser Seite finden Sie die DB Icons für die wichtigsten Funktionenvon elektronischen Anwendungen. DB Dashboard Icons für individuelleAnwendungszwecke finden Sie unter:
DB Dashboard Icons
Die Downloads werden schrittweise um weitere Icons ergänzt. Bei Fragen wendenSie sich bitte an den Ansprechpartner (s. ganz rechts).
Digitale Medien, UX-UI Design > DB Icons
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.03.2017 Seite 2
Auf einen Blick:Icon Systematik
Digitale Medien, UX-UI Design > DB Icons
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.03.2017 Seite 3
Hinweis: Die volle Funktionalität des Tutorials ist nurbei Verwendung aktueller Browser gewährleistet.
Digitale Medien, UX-UI Design > DB Icons
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.03.2017 Seite 4
Der Aufbau der DB Icons folgt einemneu entwickelten System.Jedes Icon besteht aus einem Symbolund einer im festen Verhältnis zumSymbol stehenden Grundfläche (1).Die Grundfläche ist quadratisch und hatstumpfe Ecken.Der Gestaltung liegt ein gemeinsames,pixelbasiertes Gestaltungsraster (2)zugrunde. Die pixelgenaue Konstruktiondes Icons ermöglicht eine optimale(randscharfe) Wiedergabe auf Displaysund Bildschirmen.
Für den Einsatz der DB Icons werdenbestimmte Abbildungsgrößenbesonders empfohlen, in denen diepixelgenaue Konstruktion erhaltenbleibt und in denen eine verlustfreieDarstellung des Icons gewährleistet ist.
Für den Einsatz der DB Icons stehtein Sortiment an Gestaltungs-möglichkeiten zur Verfügung. Die Icons können als alleinstehendeSymbole oder mit einer Grundflächeeingesetzt werden.Es sind Positiv- oder Negativvariantenmöglich. Auf die Grundfläche könnennach festen Vorgaben Stilelemente wieKonturlinien, Schlagschatten oderHelligkeitsverläufe (3) angewendetwerden. Auf modische, kurzlebigevisuelle Effekte wie einepseudorealistische Darstellung durchNachahmung von Oberflächen undTexturen wird bewusst verzichtet.Als Farben werden die DB Grautöneverwendet. Für Icons, die mitFunktionen belegt sind, stehenzusätzlich die Web-Rottöne und DB Rotzur Verfügung.
Einheitliche Zeichen- undFormensprache Die Symbole unserer DB Iconsorientieren sich an bereits „gelernten“Zeichen und sind selbsterklärend undallgemein verständlich (4).Die Symbole sind mit Fokus auf dasWesentliche gestaltet und damit schnellzu erfassen. Sie sind nach einem Systemgeometrisch konstruiert, ihre Form darfnicht verändert werden.
Digitale Medien, UX-UI Design > DB Icons
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.03.2017 Seite 5
CD-Regeln:
Form und Aufbau der DB Icons
Die Form der DB Icons darf nicht verändert werden.
Die Icons sind vektorbasiert als SVG-Dateien angelegt.Sie können generell ohne Qualitätsverlust skaliert werden
und sind im Gegensatz zu pixelbasierten Dateiformatenfür die Darstellung von Bildschirm-Inhalten auf ver-schiedensten Endgeräten besonders geeignet. Zusätzlichstehen die Icons im PNG-Format zur Verfügung.
Vektordateien auf dem Bildschirm Auch Vektordateien werden bei derDarstellung auf dem Bildschirm in Formvon Pixeln wiedergegeben, was beiObjektkanten, die nicht passgenau imPixelraster liegen, zu Unschärfenführen kann, da weitere Pixel ergänztwerden.
Zum Vergleich: Nur bei einer passgenauen Ausrichtung des Objekts am Pixelraster wird das Icon optimalwiedergegeben.
GestaltungsrasterDie Gestaltung der DB Icons ist auf eineoptimale Darstellung am Bildschirmausgerichtet. Den DB Icons liegt einpixelbasiertes Raster von 32x32 Pixelnmit einer maximalen Symbolgröße von24x24 Pixeln zugrunde. Diepixelgenaue Konstruktion sowie dasfeste Verhältnis des Symbols zurumgebenden Grundfläche ermöglicheneine optimal scharfe Wiedergabe aufDisplays und Bildschirmen (trotzgeglätteter Darstellung)
AbbildungsgrößenUm eine optimale Darstellung zugewährleisten empfehlen wir für dieVerwendung der DB Icons fünfAbbildungsgrößen, die sich inGrößenabstufungen von jeweils 25%aus der Basisgröße ergeben. In diesenAbbildungsgrößen bleibt einepixelgenaue Konstruktion erhalten.Benötigte Zwischengrößen können vomAnwender als pixeloptimierte Varianteerstellt werden.
Empfohlene Abbildungsgrößen für eine optimale Darstellung
HinweisInformationen zum Gestaltungsraster und den Abbildungs-größen der DB Dashboard Icons finden Sie unter:
DB Dashboard Icons
DB Dashboard Icons
Digitale Medien, UX-UI Design > DB Icons
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.03.2017 Seite 6
Icon-VorlagenDie verktorbasierten SVG-Dateien setzen sich aus Grundfläche und Symbolzusammen. Positive Icon-Vorlagen sind mit transparenter Grundfläche angelegt.
Die Vorlagen können durch zertifizierte Agenturen bzw. über dafür ausgebildetesPersonal mit spezieller Software wie Adobe Illustrator bearbeitet oder über CSSfür den Bedarf angepasst werden.
Gestaltungsvarianten
Je nach Bedarf sind für den Einsatz der DB Iconsfolgende Gestaltungsvarianten definiert.
KonturlinienDie Grundfläche des Icons kann umeine Konturlinie in der Farbe desSymbols ergänzt werden.Die Konturlinie wird nach außenausgerichtet.
SchlagschattenUm Icons vom Untergrund abzuhebenund von anderen Gestaltungselementenzu differenzieren, kann die Grundflächedurch eine einfache Schattenkantegeringer Tiefe ergänzt werden.Auf einen Weichzeichnungseffekt wirddabei verzichtet. Das Icon-Symbol wirdohne Schatten eingesetzt.
HelligkeitsverläufeUm eine lebendige, objekthafteWirkung zu erreichen, kann dieGrundfläche des Icons mit einem vonoben nach unten gehendenHelligkeitsverlauf gestaltet werden.Der Helligkeitsunterschied beträgtdabei maximal 30%. Auf das Icon-Symbol wird kein Verlauf angewendet.
FarbenEs werden die DB Grautöne und Weißverwendet. Für Icons, die mitFunktionen versehen sind, stehenaußerdem DB Rot und weitere Rottönezur Verfügung. Farben können aufSymbol und Grundfläche angewendetwerden.In Absprache mit GNM 11 könnenweitere Farben eingesetzt werden.
Website Prinzipien
Digitale Medien, UX-UI Design > DB Icons
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.03.2017 Seite 7
Mehrfarbige SymboleUm die Aussage des Symbols zu verstärken oder das Icon umzusätzliche Informationen zu ergänzen, können die Symbolemehrfarbig unter Hinzunahme von DB Rot alsAuszeichnungsfarbe gestaltet werden. Damit einegleichbleibend prägnante Darstellung gewährleistet bleibt,werden nur eigenständige Formen innerhalb desIconsymbols mit DB Rot gekennzeichnet. Ein ausreichenderKontrast des mehrfarbigen Symbols zur Grundfläche ist nurin einigen Gestaltungsvarianten möglich.
Kennzeichnend für die Gestaltung ist ein Verzicht aufeine pseudorealistische Darstellung durch Nachahmungvon Oberflächen und Texturen. Unnötige und übertriebeneEffekte kommen im Sinne eines langfristig wirksamenAuftritts ebenfalls nicht zum Einsatz. Ausnahmen sindProjekt- oder Kampagnenthemen, die mit dem nötigen„Zeitgeist“ ausgestattet sein müssen, um einezielgruppengerechte Ansprache und publikumswirksameAußenwirkung über einen begrenzten Zeitraum zu erwirken.
DB Icons elektronische Medien
Alle Downloads beinhalten die kompletten DB Icons für elektronische Medienin der gezeigten Gestaltungsvariante, in den Formaten SVG und PNG.
Download: DB Icons eM 001-103DB Grau positiv v1.4Dateiformat: ZIPDateigröße: 7 MB
Download: DB Icons eM 001-103DB Grau negativ v1.4Dateiformat: ZIPDateigröße: 7.1 MB
Download: DB Icons eM 001-103Weiß v1.4Dateiformat: ZIPDateigröße: 7 MB
Download: DB Icons eM 001-103DB Dunkelgrau Kontur v1.4Dateiformat: ZIPDateigröße: 7.5 MB
Download: DB Icons eM 001-103DB Rot positiv v1.4Dateiformat: ZIPDateigröße: 5.7 MB
Download: DB Icons eM 001-103DB Rot negativ v1.4Dateiformat: ZIPDateigröße: 7.3 MB
Digitale Medien, UX-UI Design > DB Icons
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.03.2017 Seite 8
Download: DB Icons eM 001-103auf Verlauf negativ v1.4Dateiformat: ZIPDateigröße: 7.3 MB
Download: DB Icons eM 001-103mit Schatten positiv v1.4Dateiformat: ZIPDateigröße: 7.4 MB
Download: DB Icons eM 001-103mit Schatten negativ v1.4Dateiformat: ZIPDateigröße: 7.5 MB
Download: DB Icons eM 001-103Outline positiv v1.4Dateiformat: ZIPDateigröße: 7.3 MB
Download: DB Icons eM 001-103Outline negativ v1.4Dateiformat: ZIPDateigröße: 7.4 MB
Digitale Medien, UX-UI Design > DB Icons
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.03.2017 Seite 9
Stand: 20.04.2017 (Version 1.4) – Auswahl wird regelmäßig erweitert
Digitale Medien, UX-UI Design > DB Icons
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.03.2017 Seite 10
