Digitale Medien, UX-UI Design > Website Prinzipien Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 1 Inhalte Auf einen Blick: Seitenaufbau – Header Fullscreen Background Prinzipien DB Farben DB Type Webfonts CD-Regeln: Logostreifen, Farbfläche und DB Winkel Angebots- und Regio-Markierungen Logobox Footer Typografie Headline und Subheadline Fließtext, Einführungstext und Zwischentitel Um den richtigen Auftritt unserer Marken in einem breiten Spektrum von Applikationen mit Web-Frontend zu gewährleisten, ist ein einheitlicher Umgang mit den Gestaltungselementen vorgegeben. Hier finden Sie die Grundprinzipien und CD-Regeln zur Gestaltung von Websites der DB.
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 1
Inhalte
Auf einen Blick:
Seitenaufbau – Header
Fullscreen Background Prinzipien
DB Farben
DB Type Webfonts
CD-Regeln:
Logostreifen, Farbfläche und DB Winkel
Angebots- und Regio-Markierungen
Logobox
Footer
Typografie
Headline und Subheadline
Fließtext, Einführungstext und Zwischentitel
Um den richtigen Auftritt unserer Marken in einem breiten Spektrum vonApplikationen mit Web-Frontend zu gewährleisten, ist ein einheitlicherUmgang mit den Gestaltungselementen vorgegeben. Hier finden Sie dieGrundprinzipien und CD-Regeln zur Gestaltung von Websites der DB.
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 2
Auf einen Blick:Seitenaufbau – Header
Die Website ist für Bildschirme miteiner Breite von mindestens 1024Pixeln angelegt. Bei einer höherenAuflösung bleibt die Website mittigim Browserfenster zentriert. Der Hintergrund (1) des Browser-fensters kann als FullscreenBackground in die Gestaltungeinbezogen werden. Um auch aufkleinere Displays reagieren zu könnenwerden die Prinzipien des responsiveWebdesigns angewandt.
Der Header einer Website enthält dievisuellen Kernelemente zurWiedererkennung der jeweiligenGeschäftsfeldmarke. Er setzt sich aushorizontalen Flächen zusammen,welche die gesamte Breite der Websiteeinnehmen und mit Ausnahme desLogostreifens in der Höhe variabel sind.Das Markenlogo wird links imLogostreifen (2) am oberen Seitenrandoder alternativ in der Logobox (3)platziert.
Eine Farbfläche (4) trägt dieKennfarbe des Absenders. Der Konzernhat alternativ die Möglichkeit, ganzohne Kennfarbe zu kommunizieren. DerHeader kann Bildflächen (5) und denDB Winkel (6) enthalten. Form undHöhe des Winkelversatzes sindfestgelegt. Der Footer (7) schließt dieWebsite ab und trägt die Kennfarbe desAbsenders.
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 4
Wenn der Header keine Bildflächeenthält, sitzt die Farbfläche direktunter dem Logostreifen.
Fullscreen Background Prinzipien
Moderne Bildschirme ermöglichen eine weitaus höhere Auflösung als1024 x 768 Pixel. Dies erlaubt das Aufziehen des Browserfensters über denInhaltsbereich der Website hinaus. Der Browserhintergrund kann zusätzlichals Gestaltungsfläche genutzt werden.
Dem Layout von Websites der DB liegt dasGestaltungsprinzip der betonten Horizontalen zugrunde,abgeleitet aus der horizontalen Bewegung im Raum bei derFortbewegung auf Schiene oder Straße. DiesesGestaltungsprinzip findet sich bei Websites in der betonthorizontalen Flächenaufteilung wieder. Flächen verlaufenhorizontal über die gesamte Breite.
Die Breite des Inhaltsbereiches (1) ist in der Regel bei derDB auf ca. 1000 px angelegt. Wenn das Browserfensteraufgezogen wird, bleibt die Website im Browserfensterzentriert (2) und der Browserhintergrund wird sichtbar.
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 5
Um Inhalte und Struktur der Seite zubetonen, kann derBrowserhintergrund in die Gestaltungeinbezogen werden:
Der Browserhintergrund (3) kann Weißoder in einem der DB Grautönegestaltet sein und sich zusätzlich durcheinen Schlagschatten vom Seiteninhalttrennen.
Zur Hinterlegung des Seiteninhalteskönnen vollformatige Bildmotive (4) imBrowserhintergrund platziert werden.Das Motiv muss als vollformatigesHintergrundbild geeignet sein:Kleinteilige Bildinformationen undungünstig angeschnittene Bilddetailssind zu vermeiden. Bildmotive imBrowserhintergrund sollten das imInhaltsbereich dargestellte Themaaufnehmen.
Elemente die über die ganze Breite desSeiteninhalts gehen, können überdiesen hinaus, bis zum Rand desBrowserfensters (5) fortgeführtwerden.
Die Bildfläche kann links und rechtsdurch Farbflächen (6) in einem derDB Grautöne bis zum Rand desBrowserfensters erweitert werden.
Alternative:Wenn Bildmotiv und Software dafürgeeignet sind, kann das Bild auchskaliert und dynamisch an die Größedes Browserfensters angepasst werden.
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 6
Wird die Logobox angewandt, richtetsich ihre Position, unabhängig vomzentrierten Inhaltsbereich, immerbündig zum Rand des Browserfenstersaus.
Hinweis: Die Internetnutzung, insbesondere über mobile Endgeräte mit sehrkleinen und unterschiedlichen Displaygrößen erfordert ein responsivesWebdesign.
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 7
DB Farben
Der konsequente Einsatz unserer DB Farben unterstütztdas 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 alsGeschäftsfeldfarben die visuelle Identität der Unternehmens-bereiche. DB Rot repräsentiert den Personen- undSchienengüterverkehr, DB Blau den Landverkehr, Luft- undSeefracht sowie die Kontraktlogistik und DB Grau dieGeschäftsfelder Infrastruktur und Dienstleistungen sowieden Konzern. In den Flächen von Header und Footerkennzeichnen sie den Absender der Website (1).
Farbaufhellungen und -abdunkelungen der DB Primärfarbenstehen zur Verfügung, um z.B. den aktiven Status innerhalbder Navigation (2) oder den Mouseover-Status von Links undButtons zu markieren. Sie werden nicht als Geschäftsfeld-farben zur Absenderkennzeichnung eingesetzt.
Eine umfangreiche Palette anDB Grautönen ersetzt die bisherigenmarkenunabhängigen Neutralgrautöne.Diese werden vor allem zurStrukturierung der Seite und zurGestaltung von DB Interaktions-elementen (3), Icons und Buttonsverwendet.
Als Standard-Textfarbe (4) wirdbei Screenanwendungen anstelle vonSchwarz der gut lesbare undkontrastoptimierte Farbton DB 03-13eingesetzt.
Eine zusätzliche Palette mitDB Sekundärfarben (5) kanneingesetzt werden, um komplexeIllustrationen/Big-Data oderInfografiken einzufärben oderThemenbereiche differenziert zukennzeichnen.
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 8
DB Type Webfonts
Zur Gestaltung von Websites stehenausgewählte Schriftschnitte unsererHausschrift DB Type als Webfonts zurVerfügung. Zugunsten eines einheitlichenErscheinungsbildes des DB?Konzerns imInternet wird die DB Type durchgängigfür sämtliche Textelemente einerWebsite eingesetzt. Eine alternativeserifenlose Schrift (z.B. Arial) ist nichtvorgesehen.
Die Schriften der DB Type Webfontssind durch ihre jeweiligenEigenschaften für verschiedeneBereiche und Funktionen innerhalb derWebsite geeignet. FolgendeSchriftschnitte werden als Standardempfohlen:Für die Hauptnavigation (1) wird dieDB Sans Condensed verwendet –Hervorhebungen stehen in der DB SansCondensed Bold. Headlines (2) werdenanalog den Printmedien in DB HeadBlack und DB Head Light gesetzt.
Für alle weiteren Textelemente wirdunsere Basisschrift DB Sans verwendet.
Fließtext (3) wird in der DB SansRegular gesetzt. Zur Auszeichnung undStrukturierung sowie für Zwischentitel und Einführungstexte (4) wird dieDB Sans Bold eingesetzt. WelcheSchriftschnitte darüber hinausVerwendung finden, hängt vonFunktion, Inhalt und Absender derWebsite ab.
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 9
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. DasLogo wird vertikal zentriert deutlich links im Logostreifen (2) und bündig mit den Elementen des Inhaltsbereichesplatziert.
Die Höhe der Farbfläche (3) ist variabel. In ihrer kleinstenEinheit als horizontaler Streifen (4) hat die Farbflächemindestens eine Höhe von 1/3 DBx, in Kombination mitDB Winkel (5) ist sie mindestens 1 DBx hoch.Der Winkelversatz verläuft von links nach rechts oben undhat eine feste Höhe von ½ DBx. Der Einsatz des DB Winkelsist optional.
CD-Regeln Logo, Logostreifen, Farbfläche, DB Winkel:Logostreifen Höhe: 1½ DBxMarkenlogo: links im Logostreifen, vertikal zentriertÜber und unter dem Markenlogo werden keineTextzusätze oder Angebotsnamen platziertAngebots- oder Regio-Markierungen werden imLogostreifen, rechts neben dem Markenlogo platziertMindesthöhe Farbfläche ohne DB Winkel: 1/3 DBxMindesthöhe Farbfläche mit DB Winkel: 1 DBxHöhe Winkelversatz: ½ DBx
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 10
Angebots- und Regio-Markierungen
Für die Platzierung von <a title="Angebots- und Regio-Markierungen" class="rte3Link" id="l+91381+1495467215"href="/index.php?id_navigation=1013942"target="_self">Markierungen und Textzusätzenim Logostreifen gilt folgende Regelung:
Platzierung: rechts der Marke DB auf einerSchriftlinie mit den Buchstaben „DB“Mindestabstand zur Marke DB: 1 DBxVersalhöhe: 1/3 DBx (auf ganze Pixel gerundet)Schrift Markierungen: DB Sans Alternate Bold Italic,Schriftfarbe: DB Grau
Wenn der zur Verfügung stehende Raum für die Platzierungin Standardgröße nicht ausreicht, wird der Zusatz verkleinertund 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 DBxZeilenabstand: 120% (auf ganze Pixel gerundet)
Textzusätze
Für Textzusätze, die keine Angebots- oder Regio-Markierungen sind, wird als Satzschrift die DB Head Lightin der Schriftfarbe DB 03-13 verwendet.
Zusatzlogos
Für die Platzierung von Zusatzlogos im Logostreifengilt folgende Regelung:
Platzierung: rechts der Marke DB,optisch vertikal zentriertMindestabstand zur Marke DB: 1 DBxAuf ein ausgewogenes Größenverhältniszur Marke DB ist zu achten
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 11
Logobox
Die Logobox (1) kann als Alternative zum Logostreifen eingesetzt werden.Größe und Platzierung der Logobox sind flexibel. Sie wird bündig am Seitenrandmit 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“.
Footer
Der Footer (1) befindet sich unterhalb des Seiteninhalts und schließt die Websiteab. Er trägt, ebenso wie die im Header befindliche Farbfläche, die Kennfarbe desAbsenders. Der Footer hat eine Höhe von mindestens 1/3 DBx und kannTextelemente enthalten.
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 12
Typografie
Der Umgang mit der Headline ist ein charakteristisches Merkmal unseresErscheinungsbildes. Dabei hebt der Fett-Fein-Kontrast einzelne Worte hervorund betont die Kernaussage. Dynamisch versetzte Zeilen greifen das visuelleGrundkonzept der betonten Horizontalen auf. Bei Websites werden solcheHeadlines vor allem im Seitenkopf und als Kapiteleinstieg verwendet.Headlines ohne Zeilenversatz und Fett-Fein-Kontrast sowie Subheadlines,Zwischenüberschriften und Einstiegstexte werden zur weiterenUntergliederung des Seiteninhalts eingesetzt.
Schriftgrößen sind frei wählbar.Eine gute Lesbarkeit ist zugewährleisten. Für alle Textelementegilt die Gemischt-Schreibweise.Innerhalb einer Website werden dieTextelemente einheitlich formatiert.
Headline und Subheadline
Headlines und Subheadlines heben sich durch Größeund/oder Farbe sowie durch ausreichenden Abstand vonanderen Textelementen ab.
Headlines (1) mit dynamisch versetzten Zeilen undFett-Fein-Kontrast von Wörtern sind zwei- oder dreizeilig.Bei mehr als drei Zeilen entfällt der dynamische Versatz unddie Headline wird linksbündig ausgerichtet.
Die Subheadline (2) dient zur Ergänzung der Headline undist ihr optisch direkt zugeordnet. Sie ist deutlich kleiner alsdie Headline und wird in der gleichen Farbe in nur einemSchriftschnitt (DB Head Light oder DB Head Black) gesetzt.
Headlines ohne Hervorhebung (3) werden linksbündigin der DB Head Black gesetzt.
CD-Regeln zum Umgang mit der Headline:Schriftart: DB Head Light und DB Head Black; ohneHervorhebung kommt die DB Head Black zum EinsatzZeilenabstand: 115–125%Schriftgröße: mindestens 20 pxSchriftfarbe: DB 03-13, DB Grau, DB Dunkelgrau, für dasGeschäftsfeld Landverkehr, Luft- und Seefracht sowieKontraktlogistik auch DB Blau, auf Bildern oder farbigenHintergründen Schwarz oder WeißInnerhalb der Headline kommt nur eine Schriftgrößeund -farbe zum Einsatz.
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 29.05.2017 Seite 13
Fließtext, Einführungstext und Zwischentitel
Der Fließtext (1) wird im linksbündigen Flattersatz gesetzt.
Er kann je nach Seitenstruktur ein- oder mehrspaltigverlaufen. Auf gute Lesbarkeit und eine lesefreundlicheZeilenlänge von maximal 70 Zeichen pro Zeile ist zu achten.
Einführungstext (2) und Zwischentitel (3) dienen alskurzer und prägnanter Einstieg in das Thema bzw.strukturieren und kennzeichnen Textabschnitte. Sie hebensich deutlich von Headline und Fließtext ab und werden inDB Sans Bold mindestens so groß wie der Fließtext und mitgleichem Zeilenabstand gesetzt. Als Schriftfarbe stehenDB 03-13, DB Grau, DB Dunkelgrau, auf Bildern oderfarbigen Hintergründen Schwarz oder Weiß zur Verfügung.
Für alle weiteren Textelemente (4) wie Menü, Untermenü,Bildunterschriften und Marginalien wird die DB Sans oderdie DB Sans Condensed verwendet.
CD-Regeln zum Umgang mit dem Fließtext:Schriftart: DB Sans RegularSchriftgröße: mindestens 13 pxZeilenabstand: 130–140%Schriftfarbe: DB 03-13, DB Grau, DB Dunkelgrau, aufBildern oder farbigen Hintergründen Schwarz oder WeißAuszeichnungen stehen in DB Sans Bold oderDB Sans Regular Italic und können in DB Rot, DB Grauoder DB 01-04 eingesetzt werden
