Digitale Medien, UX-UI Design > DB Icons. Inhalte

Transkript

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). Seite 1

2 Auf einen Blick: Icon Systematik Seite 2

3 Hinweis: Die volle Funktionalität des Tutorials ist nur bei Verwendung aktueller Browser gewährleistet. Seite 3

4 Der Aufbau der DB Icons folgt einem neu entwickelten System. Jedes Icon besteht aus einem Symbol und einer im festen Verhältnis zum Symbol stehenden Grundfläche (1). Die Grundfläche ist quadratisch und hat stumpfe Ecken. Der Gestaltung liegt ein gemeinsames, pixelbasiertes Gestaltungsraster (2) zugrunde. Die pixelgenaue Konstruktion des Icons ermöglicht eine optimale (randscharfe) Wiedergabe auf Displays und Bildschirmen. Für den Einsatz der DB Icons werden bestimmte Abbildungsgrößen besonders empfohlen, in denen die pixelgenaue Konstruktion erhalten bleibt und in denen eine verlustfreie Darstellung des Icons gewährleistet ist. Für den Einsatz der DB Icons steht ein Sortiment an Gestaltungsmöglichkeiten zur Verfügung. Die Icons können als alleinstehende Symbole oder mit einer Grundfläche eingesetzt werden. Es sind Positiv- oder Negativvarianten möglich. Auf die Grundfläche können nach festen Vorgaben Stilelemente wie Konturlinien, Schlagschatten oder Helligkeitsverläufe (3) angewendet werden. Auf modische, kurzlebige visuelle Effekte wie eine pseudorealistische Darstellung durch Nachahmung von Oberflächen und Texturen wird bewusst verzichtet. Als Farben werden die DB Grautöne verwendet. Für Icons, die mit Funktionen belegt sind, stehen zusätzlich die Web-Rottöne und DB Rot zur Verfügung. Einheitliche Zeichen- und Formensprache Die Symbole unserer DB Icons orientieren sich an bereits gelernten Zeichen und sind selbsterklärend und allgemein verständlich (4). Die Symbole sind mit Fokus auf das Wesentliche gestaltet und damit schnell zu erfassen. Sie sind nach einem System geometrisch konstruiert, ihre Form darf nicht verändert werden. Seite 4

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 Vektordateien auf dem Bildschirm Auch Vektordateien werden bei der Darstellung auf dem Bildschirm in Form von Pixeln wiedergegeben, was bei Objektkanten, die nicht passgenau im Pixelraster liegen, zu Unschärfen führen kann, da weitere Pixel ergänzt werden. und sind im Gegensatz zu pixelbasierten Dateiformaten für die Darstellung von Bildschirm-Inhalten auf verschiedensten Endgeräten besonders geeignet. Zusätzlich stehen die Icons im PNG-Format zur Verfügung. Zum Vergleich: Nur bei einer passgenauen Ausrichtung des Objekts am Pixelraster wird das Icon optimal wiedergegeben. Gestaltungsraster Die Gestaltung der DB Icons ist auf eine optimale Darstellung am Bildschirm ausgerichtet. Den DB Icons liegt ein pixelbasiertes Raster von 32x32 Pixeln mit einer maximalen Symbolgröße von 24x24 Pixeln zugrunde. Die pixelgenaue Konstruktion sowie das feste Verhältnis des Symbols zur umgebenden Grundfläche ermöglichen eine optimal scharfe Wiedergabe auf Displays und Bildschirmen (trotz geglätteter Darstellung) Abbildungsgrößen Um eine optimale Darstellung zu gewährleisten empfehlen wir für die Verwendung der DB Icons fünf Abbildungsgrößen, die sich in Größenabstufungen von jeweils 25% aus der Basisgröße ergeben. In diesen Abbildungsgrößen bleibt eine pixelgenaue Konstruktion erhalten. Benötigte Zwischengrößen können vom Anwender als pixeloptimierte Variante erstellt werden. Empfohlene Abbildungsgrößen für eine optimale Darstellung Hinweis Informationen zum Gestaltungsraster und den Abbildungsgrößen der DB Dashboard Icons finden Sie unter: DB Dashboard Icons DB Dashboard Icons Seite 5

6 Icon-Vorlagen Die verktorbasierten SVG-Dateien setzen sich aus Grundfläche und Symbol zusammen. Positive Icon-Vorlagen sind mit transparenter Grundfläche angelegt. Die Vorlagen können durch zertifizierte Agenturen bzw. über dafür ausgebildetes Personal mit spezieller Software wie Adobe Illustrator bearbeitet oder über CSS für den Bedarf angepasst werden. Gestaltungsvarianten Je nach Bedarf sind für den Einsatz der DB Icons folgende Gestaltungsvarianten definiert. Konturlinien Die Grundfläche des Icons kann um eine Konturlinie in der Farbe des Symbols ergänzt werden. Die Konturlinie wird nach außen ausgerichtet. Schlagschatten Um Icons vom Untergrund abzuheben und von anderen Gestaltungselementen zu differenzieren, kann die Grundfläche durch eine einfache Schattenkante geringer Tiefe ergänzt werden. Auf einen Weichzeichnungseffekt wird dabei verzichtet. Das Icon-Symbol wird ohne Schatten eingesetzt. Helligkeitsverläufe Um eine lebendige, objekthafte Wirkung zu erreichen, kann die Grundfläche des Icons mit einem von oben nach unten gehenden Helligkeitsverlauf gestaltet werden. Der Helligkeitsunterschied beträgt dabei maximal 30%. Auf das IconSymbol wird kein Verlauf angewendet. Farben Es werden die DB Grautöne und Weiß verwendet. Für Icons, die mit Funktionen versehen sind, stehen außerdem DB Rot und weitere Rottöne zur Verfügung. Farben können auf Symbol und Grundfläche angewendet werden. In Absprache mit GNM 11 können weitere Farben eingesetzt werden. Website Prinzipien Seite 6

7 Mehrfarbige Symbole Um die Aussage des Symbols zu verstärken oder das Icon um zusätzliche Informationen zu ergänzen, können die Symbole mehrfarbig unter Hinzunahme von DB Rot als Auszeichnungsfarbe gestaltet werden. Damit eine gleichbleibend prägnante Darstellung gewährleistet bleibt, werden nur eigenständige Formen innerhalb des Iconsymbols mit DB Rot gekennzeichnet. Ein ausreichender Kontrast des mehrfarbigen Symbols zur Grundfläche ist nur in einigen Gestaltungsvarianten möglich. Kennzeichnend für die Gestaltung ist ein Verzicht auf eine pseudorealistische Darstellung durch Nachahmung von Oberflächen und Texturen. Unnötige und übertriebene Effekte kommen im Sinne eines langfristig wirksamen Auftritts ebenfalls nicht zum Einsatz. Ausnahmen sind Projekt- oder Kampagnenthemen, die mit dem nötigen Zeitgeist ausgestattet sein müssen, um eine zielgruppengerechte Ansprache und publikumswirksame Außenwirkung über einen begrenzten Zeitraum zu erwirken. DB Icons elektronische Medien Alle Downloads beinhalten die kompletten DB Icons für elektronische Medien in der gezeigten Gestaltungsvariante, in den Formaten SVG und PNG. DB Grau positiv v1.4 Dateigröße: 7 MB DB Grau negativ v1.4 Dateigröße: 7.1 MB Weiß v1.4 Dateigröße: 7 MB DB Dunkelgrau Kontur v1.4 Dateigröße: 7.5 MB DB Rot positiv v1.4 Dateigröße: 5.7 MB DB Rot negativ v1.4 Dateigröße: 7.3 MB Seite 7

8 auf Verlauf negativ v1.4 Dateigröße: 7.3 MB mit Schatten positiv v1.4 Dateigröße: 7.4 MB Outline positiv v1.4 Dateigröße: 7.3 MB Outline negativ v1.4 Dateigröße: 7.4 MB mit Schatten negativ v1.4 Dateigröße: 7.5 MB Seite 8

9 Stand: (Version 1.4) Auswahl wird regelmäßig erweitert Seite 9

10 Ansprechpartner Fragen zum Inhalt dieser Seite? [1] veröffentlicht: Verweisliste [1] Fragen zum Inhalt dieser Seite?: Seite 10