Direkt zum Inhalt
Modules
Website Prinzipien
 

Um den richtigen Auftritt unserer Marken in einem breiten Spektrum von Applikationen mit Web-Frontend zu gewährleisten, ist ein einheitlicher Umgang mit den Gestaltungs­ele­men­ten vorgegeben. Hier finden Sie die Grundprinzipien und CD-Regeln zur Gestaltung von Websites der DB.


 
 
Auf einen Blick:
 

Seitenaufbau – Header

 
 
Seitenaufbau Kopf- und Sockelleiste
 

Die Website ist für Bildschirme mit einer Breite von mindestens 1024 Pixeln angelegt. Bei einer höheren Auflösung bleibt die Website mittig im Browserfenster zentriert.
Der Hintergrund (1) des Browser-fensters kann als Fullscreen Background in die Gestaltung einbezogen werden. Um auch auf kleinere Displays reagieren zu können werden die Prinzipien des responsive Webdesigns angewandt. 

Der Header einer Website enthält die visuellen Kernelemente zur Wiederer­kennung der jeweiligen Geschäftsfeldmarke. Er setzt sich aus horizontalen Flächen zusammen, welche die gesamte Breite der Website einnehmen und mit Ausnahme des Logostreifens in der Höhe variabel sind. Das Markenlogo wird links im Logostreifen (2) am oberen Seitenrand oder alternativ in der Logobox (3) platziert.

Eine Farbfläche (4) trägt die Kennfarbe des Absenders. Der Konzern hat alternativ die Möglichkeit, ganz ohne Kennfarbe zu kommunizieren. Der Header kann Bildflächen (5) und den DB Winkel (6) enthalten. Form und Höhe des Winkelversatzes sind festgelegt. Der Footer (7) schließt die Website ab und trägt die Kennfarbe des Absenders.

 
 
Hauptnavigation

Die Farbfläche in Kennfarbe des Absenders kann die Hauptnavigation enthalten und unter der Bildfläche angeordnet werden.

 
Logobox

Um dem Titelmotiv mehr Raum zu geben, kann die Logobox anstelle des Logostreifens eingesetzt werden.

 
Farbfläche in ihrer kleinsten Einheit

Die Höhe der Farbfläche ist variabel und wird in ihrer kleinsten Einheit 
als schmaler horizontaler Streifen platziert.

 
Kopfleiste ohne Bildfläche

Wenn der Header keine Bildfläche enthält, sitzt die Farbfläche direkt unter dem Logostreifen.

 
 

Fullscreen Background Prinzipien

 
 

Moderne Bildschirme ermöglichen eine weitaus höhere Auflösung als
1024 x 768 Pixel. Dies erlaubt das Aufziehen des Browserfensters über den Inhaltsbereich der Website hinaus. Der Browserhintergrund kann zusätzlich
als Gestaltungsfläche genutzt werden.

 

Dem Layout von Websites der DB liegt das Gestaltungsprinzip der betonten Horizontalen zugrunde, abgeleitet aus der ­horizontalen Bewegung im Raum bei der Fortbewegung auf Schiene oder Straße. Dieses Gestaltungsprinzip findet sich bei Websites in der betont horizontalen Flächenaufteilung wieder. Flächen verlaufen horizontal über die gesamte Breite. 

Die Breite des Inhaltsbereiches (1) ist in der Regel bei der DB auf ca. 1000 px angelegt. Wenn das Browserfenster aufgezogen wird, bleibt die Website im Browserfenster zentriert (2) und der Browserhintergrund wird sichtbar.
Fullscreen Background Prinzipien
 
 
Gestaltung des Browserhintergrundes

Um Inhalte und Struktur der Seite zu betonen, kann der Browserhintergrund in die Gestaltung einbezogen werden:

Der Browserhintergrund (3) kann Weiß oder in einem der DB Grautöne gestaltet sein und sich zusätzlich durch einen Schlagschatten vom Seiteninhalt trennen.

Zur Hinterlegung des Seiteninhaltes können vollformatige Bildmotive (4) im Browserhintergrund platziert werden.
Das Motiv muss als vollformatiges Hintergrundbild geeignet sein: Kleinteilige Bildinformationen und ungünstig angeschnittene Bilddetails sind zu vermeiden. Bildmotive im Browserhintergrund sollten das im Inhaltsbereich dargestellte Thema aufnehmen.

Elemente die über die ganze Breite des Seiteninhalts gehen, können über diesen hinaus, bis zum Rand des Browserfensters (5) fortgeführt werden.  

 
Gestaltung des Browserhintergrundes

Die Bildfläche kann links und rechts durch Farbflächen (6) in einem der
DB Grautöne bis zum Rand des Browserfensters erweitert werden.

Alternative:
Wenn Bildmotiv und Software dafür geeignet sind, kann das Bild auch skaliert und dynamisch an die Größe des Browserfensters angepasst werden. 

 
 

Wird die Logobox angewandt, richtet sich ihre Position, unabhängig vom zentrierten Inhaltsbereich, immer bündig zum Rand des Browserfensters aus. 

Fullscreen Background Prinzipien
 

Hinweis: Die Internetnutzung, insbesondere über mobile Endgeräte mit sehr kleinen und unterschiedlichen Displaygrößen erfordert ein responsives Webdesign.

 
 

DB Farben

 

Der konsequente Einsatz unserer DB Farben unterstützt das typische Bild der DB und ist für die Wiedererkenn-barkeit unserer Marken unverzichtbar.

Die Primärfarben DB Rot, DB Blau und DB Grau prägen als Geschäftsfeldfarben die visuelle Identität der Unternehmens-bereiche. DB Rot repräsentiert den Personen- und Schienengüterverkehr, DB Blau den Landverkehr, Luft- und Seefracht sowie die Kontraktlogistik und DB Grau die Geschäftsfelder Infrastruktur und Dienstleistungen sowie den Konzern. In den Flächen von Header und Footer kennzeichnen sie den Absender der Website (1).

Farbaufhellungen und -abdunkelungen der DB Primärfarben stehen zur Verfügung, um z.B. den aktiven Status innerhalb der Navigation (2) oder den Mouseover-Status von Links und Buttons zu markieren. Sie werden nicht als Geschäftsfeld-farben zur Absenderkennzeichnung eingesetzt. 
Farbe am Bildschirm
 

Eine umfangreiche Palette an
DB Grautönen ersetzt die bisherigen markenunabhängigen Neutralgrautöne.
Diese werden vor allem zur Strukturierung der Seite und zur Gestaltung von DB Interaktions-elementen (3), Icons und Buttons verwendet.

Als Standard-Textfarbe (4) wird
bei Screenanwendungen anstelle von Schwarz der gut lesbare und kontrastoptimierte Farbton DB 03-13 eingesetzt. 

Eine zusätzliche Palette mit
DB Sekundärfarben (5) kann
eingesetzt werden, um komplexe Illustrationen/Big-Data oder Infografiken einzufärben oder Themenbereiche differenziert zu kennzeichnen.

 
Einsatz der Unternehmensfarben
 
 

DB Type Webfonts

 
DB Type Webfonts
 

Zur Gestaltung von Websites stehen ausgewählte Schriftschnitte unserer Hausschrift DB Type als Webfonts zur Verfügung. 


Zugunsten eines einheitlichen Erscheinungsbildes des DB‑Konzerns im Internet wird die DB Type durchgängig für sämtliche Textelemente einer Website eingesetzt. Eine alternative serifenlose Schrift (z.B. Arial) ist nicht vorgesehen.

Die Schriften der DB Type Webfonts sind durch ihre jeweiligen Eigenschaften für verschiedene Bereiche und Funktionen innerhalb der Website geeignet. Folgende Schriftschnitte werden als Standard empfohlen:


Für die Hauptnavigation (1) wird die DB Sans Condensed verwendet – Hervorhebungen stehen in der DB Sans Condensed Bold. Headlines (2) werden analog den Printmedien in DB Head Black und DB Head Light gesetzt.

Für alle weiteren Textelemente wird unsere Basisschrift DB Sans verwendet. 

Fließtext (3) wird in der DB Sans Regular gesetzt. Zur Auszeichnung und Strukturierung sowie für Zwischentitel und Einführungstexte (4) wird die 
DB Sans Bold eingesetzt. Welche Schriftschnitte darüber hinaus Verwendung finden, hängt von Funktion, Inhalt und Absender der Website ab. 

Hier finden Sie weitere Informationen:

 
CD-Regeln:
 
Logostreifen, Farbfläche und DB Winkel
 

Die Größe des Markenlogos (1) ist flexibel. Für Desktop-Anwendungen wird als Standard eine Bildmarkenbreite (DBx) von minimal 42 px und maximal 54 px empfohlen. Das Logo wird vertikal zentriert deutlich links im Logostreifen (2) und bündig mit den Elementen des Inhaltsbereiches platziert.

Die Höhe der Farbfläche (3) ist variabel. In ihrer kleinsten Einheit als horizontaler Streifen (4) hat die Farbfläche mindestens eine Höhe von 1/3 DBx, in Kombination mit 
DB Winkel (5) ist sie mindestens 1 DBx hoch. 
Der Winkelversatz verläuft von links nach rechts oben und hat eine feste Höhe von ½ DBx. Der Einsatz des DB Winkels ist optional.

CD-Regeln Logo, Logostreifen, Farbfläche, DB Winkel:
  • Logostreifen Höhe: 1½ DBx

  • Markenlogo: links im Logostreifen, vertikal zentriert

  • Über und unter dem Markenlogo werden keine Textzusätze oder Angebotsnamen platziert

  • Angebots- oder Regio-Markierungen werden im Logostreifen, rechts neben dem Markenlogo platziert 

  • Mindesthöhe Farbfläche ohne DB Winkel: 1/3 DBx 

  • Mindesthöhe Farbfläche mit DB Winkel: 1 DBx

  • Höhe Winkelversatz: ½ DBx

 
Logostreifen, Farbfläche und DB Winkel
 
Angebots- und Regio-Markierungen
 

Für die Platzierung von ­Markierungen und Textzusätzen
im Logostreifen gilt folgende Regelung:

  • Platzierung: rechts der Marke DB auf einer
    Schriftlinie mit den Buchstaben „DB“

  • Mindestabstand zur Marke DB: 1 DBx

  • Versalhöhe: 1/3 DBx (auf ganze Pixel gerundet)

  • Schrift Markierungen: DB Sans Alternate Bold Italic,
    Schriftfarbe: DB Grau

Markierungen Bsp. 1
 

Wenn der zur Verfügung stehende Raum für die Platzierung
in Standardgröße nicht ausreicht, wird der Zusatz verkleinert und zweizeilig gesetzt:

  • Platzierung: zweizeilig rechts der Marke DB,
    Schriftlinie unten bündig mit „Marke DB“

  • Versalhöhe Markierung/Textzusatz bei langen Namen,
    zweizeilig: 1/4 DBx

  • Zeilenabstand: 120% (auf ganze Pixel gerundet)

Markierungen Bsp. 2
 
Textzusätze
 
  • Für Textzusätze, die keine Angebots- oder Regio-Markierungen sind, wird als Satzschrift die DB Head Light in der Schriftfarbe DB 03-13 verwendet.

Textzusätze
 
Zusatzlogos
 

Für die Platzierung von Zusatzlogos im Logostreifen
gilt folgende Regelung:

  • Platzierung: rechts der Marke DB,
    optisch vertikal zentriert

  • Mindestabstand zur Marke DB: 1 DBx

  • Auf ein ausgewogenes Größenverhältnis
    zur Marke DB ist zu achten

Zusatzlogos
 
Logobox
 

Die Logobox (1) kann als Alternative zum Logostreifen eingesetzt werden.
Größe und Platzierung der Logobox sind flexibel. Sie wird bündig am Seitenrand
mit einem Mindestabstand nach oben und unten von 3/4 DBx platziert.

Die skalierbaren Master-Vorlagendateien der Logobox finden Sie im Download-Bereich unter „Logobox-Vorlagen“.

 
Logobox
 
Footer
 

Der Footer (1) befindet sich unterhalb des Seiteninhalts und schließt die Website ab. Er trägt, ebenso wie die im Header befindliche Farbfläche, die Kennfarbe des Absenders. Der Footer hat eine Höhe von mindestens 1/3 DBx und kann Textelemente enthalten.

 
Footer
 
 
Typografie
 

Der Umgang mit der Headline ist ein charakteristisches Merkmal unseres Erscheinungsbildes. Dabei hebt der Fett-Fein-Kontrast einzelne Worte hervor und betont die Kernaussage. Dynamisch versetzte Zeilen greifen das visuelle Grundkonzept der betonten Horizontalen auf. Bei Websites werden solche Headlines vor allem im Seitenkopf und als Kapiteleinstieg verwendet. Headlines ohne Zeilenversatz und Fett-Fein-Kontrast sowie Subheadlines, Zwischenüberschriften und Einstiegstexte werden zur weiteren Untergliederung des Seiteninhalts eingesetzt.

Schriftgrößen sind frei wählbar. 
Eine gute Lesbarkeit ist zu gewährleisten. Für alle Textelemente gilt die Gemischt-Schreibweise. Innerhalb einer Website werden die Textelemente einheitlich formatiert.
 
Headline und Subheadline
 
Headline und Subheadline
 

Headlines und Subheadlines heben sich durch Größe 

und/oder Farbe sowie durch ausreichenden Abstand von anderen Textelementen ab.

Headlines (1) mit dynamisch versetzten Zeilen und 
Fett-Fein-Kontrast von Wörtern sind zwei- oder dreizeilig.
Bei mehr als drei Zeilen entfällt der dynamische Versatz und die Headline wird linksbündig ausgerichtet. 

Die Subheadline (2) dient zur Ergänzung der Headline und 
ist ihr optisch direkt zugeordnet. Sie ist deutlich kleiner als 
die Headline und wird in der gleichen Farbe in nur einem Schriftschnitt (DB Head Light oder DB Head Black) gesetzt.

Headlines ohne Hervorhebung (3) werden linksbündig 
in der DB Head Black gesetzt.
CD-Regeln zum Umgang mit der Headline:
  • Schriftart: DB Head Light und DB Head Black; ohne Hervorhebung kommt die DB Head Black zum Einsatz

  • Zeilenabstand: 115–125%

  • Schriftgröße: mindestens 20 px 

  • Schriftfarbe: DB 03-13, DB Grau, DB Dunkelgrau, für das Geschäftsfeld Landverkehr, Luft- und Seefracht sowie Kontraktlogistik auch DB Blau, auf Bildern oder farbigen Hintergründen Schwarz oder Weiß

  • Innerhalb der Headline kommt nur eine Schriftgröße
    und -farbe zum Einsatz.

 
Fließtext, Einführungstext und Zwischentitel
 
Fließtext, Einführungstext und Zwischentitel
 

Der Fließtext (1) wird im linksbündigen Flattersatz gesetzt. 

Er kann je nach Seitenstruktur ein- oder mehrspaltig verlaufen. Auf gute Lesbarkeit und eine lesefreundliche Zeilenlänge von maximal 70 Zeichen pro Zeile ist zu achten.

Einführungstext (2) und Zwischentitel (3) dienen als kurzer und prägnanter Einstieg in das Thema bzw. strukturieren und kennzeichnen Textabschnitte. Sie heben sich deutlich von Headline und Fließtext ab und werden in DB Sans Bold mindestens so groß wie der Fließtext und mit gleichem Zeilenabstand gesetzt. Als Schriftfarbe stehen
DB 03-13, DB Grau, DB Dunkelgrau, auf Bildern oder farbigen Hintergründen Schwarz oder Weiß zur Verfügung.

Für alle weiteren Textelemente (4) wie Menü, Untermenü, Bildunterschriften und Marginalien wird die DB Sans oder die DB Sans Condensed verwendet.

CD-Regeln zum Umgang mit dem Fließtext:
  • Schriftart: DB Sans Regular

  • Schriftgröße: mindestens 13 px

  • Zeilenabstand: 130–140%

  • Schriftfarbe: DB 03-13, DB Grau, DB Dunkelgrau, auf Bildern oder farbigen Hintergründen Schwarz oder Weiß

  • Auszeichnungen stehen in DB Sans Bold oder
    DB Sans Regular Italic und können in DB Rot, DB Grau oder DB 01-04 eingesetzt werden




 
 
Anprechpartner
Name

Fragen zum Inhalt dieser Seite?

E-Mail

marke@deutschebahn.com

veröffentlicht:
25.09.2014