Direkt zum Inhalt
Modules
Transparenzen
 

Transparenzen spielen eine zunehmend wichtige Rolle in der visuellen
Gestaltung und sind insbesondere im UX-UI Design ein wesentlicher Bestandteil
des dynamischen und zeitgemäßen Auftretens der Marke DB.
Sie können medienübergreifend in Print- und digitalen Medien verwendet
werden. Transparenzeffekte werden von allen modernen Browsern, Layout-
und Officeprogrammen unterstützt.

Bei der DB kommen zwei Arten von Transparenzen zum Einsatz –
die markenspezifischen DB Transparenzen in den Geschäftsfeldfarben
für image­prägende und repräsentative Anwendungen und
einfache Transparenzen (ohne Verlauf) für funktionale Einsatzbereiche.

 


 
Auf einen Blick:
 


 Markenspezifische DB Transparenzen

 
 
Markenspezifische DB Transparenzen
 

Die markenspezifischen
DB Transparenzen sind charakterisiert durch einen Transparenz- und Helligkeitsverlauf.

Der Transparenz- und Helligkeitsverlauf
gewährleistet eine bessere Lesbarkeit und eine originalgetreue Wiedergabe der Geschäftsfeldfarben auf unterschiedlichsten Hintergründen – auch bei Bewegtbild.

DB Transparenzen sind für plakative und markenprägende Anwendungen vorgesehen, wie z.B. Header von Websites oder AV-Medien.

    
   

Der vordefinierte Verlauf wirkt dynamisch und unterstreicht visuell
das Thema Fortbewegung.

Eine Anpassung der Deckkraft ist nicht notwendig. Für einfache und effiziente Realisierungen stehen Templates für Print- und digitale Medien zur Verfügung.

     
 

Für den Einsatz der
DB Transparenzen gilt:

  • In den Templates stehen Vorlagen zur Verfügung, bei denen weder die
    Deckkraft noch die Farbigkeit modifiziert werden soll

  • DB Transparenzen können flexibel auf Bildern und Bewegtbild platziert
    werden – eine gute Lesbarkeit der Texte und eine gute Wiedergabe der Geschäftsfeldfarben ist dabei garantiert




 

Einfache Transparenzen (ohne Verlauf)

 
 
Einfache Transparenzen (ohne Verlauf)
 

Einfache Transparenzen werden durch gleichmäßige Reduzierung
der Deckkraft (Opacity/Alphawert) eines Objektes erzielt und sind in jedem Medium einfach umzusetzen. 

Einfache Transparenzen werden in erster Linie auf Bildern und AV-Medien eingesetzt. Sie können dezente visuelle Ebenen schaffen und Layoutbereiche deutlich strukturieren. Zudem können Funktion von grafischen Benutzer-oberflächen hervorgehoben oder der Fokus auf einen bestimmten Bereich gelenkt werden.

Durch den Einsatz von Transparenzen wird die Textebene mit der Hinter-grundebene verknüpft und die Benutzerfreundlichkeit und Lesbarkeit deutlich erhöht. 

Darüber hinaus können die Funktion und das Verhalten von Interaktions-elementen durch Variation der Deckkraft verdeutlicht werden –
wie etwa Hover-Effekte von Buttons oder die Darstellung von Aktivität und Inaktivität bei Schaltflächen oder
Drop-down-Menüs.

 
Einfache Transparenzen (ohne Verlauf)
Einfache Transparenzen (ohne Verlauf)
 

Für die Anwendung einfacher Transparenzen gilt:

  • Es werden die Farben der DB Farbpalette verwendet

  • Die Deckkraft wird je nach Hintergrundmotiv für den Einzelfall optimiert

  • In einer Anwendung können mehrere einfache Transparenzen nebeneinander platziert und miteinander kombiniert werden

  • Zu vermeiden sind unscharfe Kanten und großflächige Transparenzen, die Bilder im Ganzen verfärbt oder vertrübt erschienen lassen



 
CD-Regeln für DB Transparenzen:
 
Farben und Transparenzverlauf
 

DB Transparenzen können in den Geschäftsfeldfarben
DB Rot, DB Blau, DB Grau und in Weiß eingesetzt werden.

Die Farbflächen sind zum linken Rand hin leicht abgedunkelt. Diese dezente und räumlich wirkende Abdunkelung wird durch den Einsatz des nächstdunkleren Farbtons aus der DB Farbpalette erzielt und sorgt für eine gesättigte, plakative Darstellung der Geschäftsfeldfarben.

Die Farbflächen haben zudem einen Transparenzverlauf von links nach rechts. Die partiell hohe Deckkraft garantiert einen hohen Kontrast und eine gute Lesbarkeit der auf der Fläche platzierten Texte – unabhängig vom Hintergrund auf dem die DB Transparenz platziert wird. 

Hinweis: Die Templates enthalten bereits die korrekten, vordefinierten Farb- und Transparenzwerte.

Farben:

  • DB Rot 01-03 (+ DB 01-04 für die Abdunkelung) 

  • DB Blau 02-03 (+ DB 02-04 für die Abdunkelung)

  • DB Grau 03-08 (+ DB 03-09 für die Abdunkelung)

  • Weiß

  • Beschriftung auf DB Rot, DB Blau und DB Grau in Weiß; Beschriftung auf Weiß in Schwarz (online: DB 03-13)



Transparenzverlauf:

  • 90% Deckkraft bei Reglerposition 30%

  • 65% Deckkraft bei Reglerposition 65%

 
Farben und Transparenzverlauf
 
Gestaltungsprinzipien
 
Gestaltungsprinzipien

Die Flächen der DB Transparenzen können genutzt
werden, um z.B. kurze und prägnante Teasertexte zu platzieren.

Die Abstände der Schrift zu den Rändern stehen in einem optisch ausgeglichenen Verhältnis zur Schriftgröße. 

Werden zwei Flächen eingesetzt, so ist eine der beiden Flächen in einer Geschäftsfeldfarbe, die andere in Weiß.
Die beiden Flächen werden dabei seitlich versetzt, direkt untereinander platziert. 

Wird nur eine Fläche verwendet, so kann zwischen einer Geschäftsfeldfarbe und Weiß gewählt werden.

Hinweise:
Bei der Anwendung ist auf die farblich richtige Absenderkennung zu achten. 
Die Templates enthalten bereits geeignete Vorlagen.


Aufbau der DB Transparenzen:

  • Zwei Textflächen (Geschäftsfeldfarbe und Weiß):
    werden seitlich versetzt

  • Mindestabstand des Textes zum Rand:
    ca. ½ bis 1 Versalhöhe 



 
Platzierung von DB Transparenzen
 
Platzierung von DB Transparenzen
 

DB Transparenzen werden auf Bildern oder filmischen Hintergründen eingesetzt. Wichtig hierbei ist ein ausreichender Abstand zu anderen Gestaltungselementen, damit die Flächen möglichst plakativ zur Geltung kommen.

Platzierung von DB Transparenzen:

  • Frei im Format (1)

  • Auch in animierter Form in Filmen und Animationen

  • Einzelne Flächen auch einseitig im Anschnitt (2)

  • asymetrisch mit Versatz

  • Niemals beidseitig im Anschnitt oder direkt am DB Winkel



 
Animation und Bewegtbild
 

Markenspezifische DB Transparenzen
sind besonders geeignet für: 

  • Animationen, z.B. als Textteaser in Bildslidern

  • Bewegtbild, z.B. als AV-Elemente in Videos


Anders als einfache Transparenzen müssen sie nicht motivabhängig in der Deckkraft angepasst werden –
eine gute Lesbarkeit aller Texte ist stets garantiert.

Bei Animation erfolgt die Bewegung der Flächen bevorzugt von links nach rechts. Das Ein- und Ausblenden erfolgt in einer natürlichen dynamischen Bewegung. Verschränkte Flächen werden dabei leicht zeitversetzt eingeblendet.
Mehr Informationen und Animationsbeispiele sowie ein Adobe After Effects Template für AV-Medien und CSS-Code Snippets für Online-Anwendungen finden Sie unter:
    

 
Vorlagen und Templates
 
Vorlagen und Templates
Vorlagen und Templates
 

Für digitale Medien werden eine vektorbasierte
Elemente-Bibliothek, HTML5-Code-Snippets für
Online-Anwendungen sowie ein Adobe After Effects-Template für audiovisuelle Applikationen zum Download angeboten. 

Für Printmedien sind die Vorlagen für Transparenzen bereits in den Templates für Broschüren, Anzeigen und Plakate und Newsletter integriert.

 
 
veröffentlicht:
30.05.2017