Direkt zum Inhalt
Modules
Slideshow Image 1 Slideshow Image 2 Slideshow Image 3 Slideshow Image 4
 

Eine intuitive und serviceorientierte Benutzerführung gewährleistet ein positives Markenerlebnis und sichert eine starke Kundenbindung. Erfolgreiche Abläufe bei Interaktionen mit dem Kunden prägen das Markenbild daher entscheidend mit. 
Eine markenprägende Ansprache im digitale Raum wird gesichert durch den Einsatz einfacher, gut erkennbarer und selbsterklärender Elemente, die über
verschiedenste Anwendungen, Plattformen und Kundenkontaktpunkte hinweg stringend eingesetzt werden. 



Wir beraten Sie gern bei der Umsetzung von DB Interaktionselementen: 

 
 
Auf einen Blick:
 

DB Interaktionselemente-Bibliothek

 
UX Interaktionslemente_Uebersicht_B
 

Vektorbasierte Elemente-Bibliothek
Mit unserem „UI-Kit“ steht Ihnen eine Auswahl an DB Interaktionselementen im
RGB-Modus und Vektorformat zur Verfügung. Alle Elemente in dieser Bibliothek können nach Bedarf skaliert, modifiziert und CD-gerecht umgefärbt werden.
  
Code-Snippets
Hier finden Sie beispielhafte HTML5-Code-Snippets, welche die Umsetzung von Anwendungen vereinfachen. Sie können genutzt werden, um Hover-Effekte, einfache Animationen und Interaktionsmuster bspw. bei Drop-Down-Menüs einheitlich darzustellen.

 
Gestaltungsprinzipien:
 
Formensprache bei Interaktionselementen
 
UX Interaktionslemente Formensprache

Auf Basis der Designstrategie zeichnen sich DB Interaktions-elemente durch folgende
Attribute aus:
 

  • flächig und geradlinig 

  • konsistent, klar und plakativ

  • reduziert und selbsterklärend

  • mit guter Lesbarkeit

  • unter Verwendung der DB Icons

  • mit oder ohne Grundflächen

 
 
 
UX Interaktionslemente Videobesipiel

Die einzelnen Grundflächen sind rechtwinklig. Andere plakative Grundformen, beispielsweise Kreise, sind möglich, haben aber stets eine
klare Außenkante.

 

 

 

 

 

Weitere Informationen:

 

Dont's

 
UX Interaktionslemente Negativbeispiel

Schaltflächen mit starken Rundungen, unklare Außenformen,
starke Verläufe, Blur-Effekte, weiche Verlaufskanten und
unscharfe, unklare Flächen, die nicht der Benutzerführung,
sondern nur dekorativen Zwecken dienen, passen nicht zum
Erscheinungsbild der DB und werden daher nicht verwendet.

 
 
DB Farben
 
UX Interaktionslemente Farben 1

Interaktionselemente werden in unseren Unternehmensfarben angelegt.
Bei der Farbwahl ist stets auf optimale Kontrastwerte zu achten.

  

 
UX Interaktionslemente_Farben 2

Farben können für eine bessere Benutzerführung auch miteinander kombiniert werden – bspw. zur Differenzierung von Symbol und Text.

  

 
UX Interaktionslemente_Farben 3

Die Primärfarben DB Rot, DB Grau und DB Blau prägen als Geschäftsfeldfarben die visuelle Identität der Unternehmensbereiche.
Eine zusätzliche Palette mit DB Sekundärfarben kann für gezielt gesetzte Akzentuierung eingesetzt werden. Insbesondere Objektzustände, bspw. Hover- oder Aktiv-Zustände, können mit den harmonisch abgestimmten Abstufungen der DB Farbpalette deutlich gekennzeichnet werden.

 

Weitere Informationen:

 
Räumliche Anmutung
 
Raeumliche Gestaltung

Der Einsatz räumlicher Schatten, reduzierter Helligkeitsverläufe und
Lichtkanten ist möglich, wenn es der Benutzerfreundlichkeit dient.
Der Lichteinfall ist dabei einheitlich
und wirkt natürlich.

 

  

 
DB Type
 
UX Interaktionslemente Type1

Für Anwendungen in digitalen Medien wurden ausgewählte Schnitte der Hausschrift DB Type als Webfonts entwickelt. Für DB Interaktionselemente eignet sich insbesondere die serifenlose DB Sans und die DB Sans Condensed. 

Generell ist eine optimale Lesbarkeit zu gewährleisten. Schrift muss daher immer ausreichend groß abgebildet werden,  zudem wird für alle Textelemente die gut lesbare Gemischt-Schreibweise verwendet.
  
 
UX Interaktionslemente Type2

Objektzustände, bspw. inaktiv/aktiv, kann durch den Wechsel von einem Regular-Schriftschnitt zu Bold dargestellt werden.

  

 
UX Interaktionslemente Type3

Texte sind in Menü-Listen für eine gute Lesbarkeit stets linksbündig angeordnet.

  
  
  
  
  

 
UX Interaktionslemente_Type3-2

Bei größer Textmenge kann das Drop-Down-Menü in der Breite angepasst werden. Zudem ist eine mehrspaltige Anordnung möglich.
 
 
 
 
 

 
UX Interaktionslemente_Type 4

Auf Menüs oder Buttons können Textbausteine auch mittig ausgerichtet werden.

 

Weitere Informationen:

 
 
Transparenzen
 
UX Interaktionslemente Transparenzen

Der Einsatz von Transparenzen ist möglich. Sie werden vorrangig dann verwendet, wenn auf einer komprimierten Fläche Text- und Bildebene miteinander verbunden werden sollen.

Weitere Informationen:

 
 
 
veröffentlicht:
31.1.2017