digitale medien, ux-ui design > social media · digitale medien, ux-ui design > social media...

Digitale Medien, UX-UI Design > Social Media

Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 31.08.2016 Seite 1

Inhalte

Social Media auf einen Blick:

Profil- und Titelbild repräsentieren die Marke

CD-Regeln:

Gestaltungsprinzipien für Profilbilder

Was ist zu beachten?

Welche Vorlagen werden benötigt?

Gestaltungsprinzipien für Titelbilder

Die DB hat ein vielfältiges Informationsangebot im Bereich Social Media.Für die Anforderungen an die visuelle Kommunikation bedeutet dies einhohes Maß an Gestaltungsspielraum. Die dargestellten Prinzipien zeigenMöglichkeiten, sich auf Plattformen zu präsentieren, ohne die Linie der DBzu verlassen, bzw. sichert die Erkennbarkeit der Marke.

Nomenklatur Social MediaInformationen zur Benennung von DB-Profilen auf Facebook,Twitter oder Youtube finden Sie hier:

Wie funktioniert Marke im Alltag?



Social Media auf einen Blick:Profil- und Titelbild repräsentieren die Marke

Der erste Eindruck auf Social Media Seiten wird bestimmt von Bildern. Darum hatdie Kombination aus Profil- (1) und Titelbild (2) eine wichtige repräsentativeAufgabe. Das richtige Auftreten der Marke ist hier von besonderer Bedeutung.

Beachten Sie: Anwendungen wie Facebook oder Twitter ändern regelmäßig ihreVorgaben – darum überprüfen Sie regelmäßig die eigenen Seiten.

Die Prinzipien für Facebook, Twitter, Youtube, Google+ und Instagram lassensich auch auf andere Plattformen übertragen.



CD-Regeln:

Gestaltungsprinzipien für Profilbilder

Profilbilder kennzeichnen den Absender neben jedem Beitrag und stellen einenBezug zur Marke her. Sie sind keine Markenlogos, dienen aber derSelbstdarstellung und Differenzierung einzelner Geschäftsfelder der DB.Für das Profilbild gibt es drei Möglichkeiten der Darstellung:

Aus Gründen der Einheitlichkeitwerden Profilbilder mit Piktogramm-oder Textzusatz nur von dem TeamCorporate Design erstellt.

Profilbild mit Foto und Logobox:Das Foto kann sich an aktuellenThemen orientieren oder beispielsweiseein Kampagnenmotiv enthalten. DaProfilbilder sehr klein dargestelltwerden, wählen Sie ein Motiv, dasausreichend plakativ ist. Die Marke DBwird bei dieser Option als Logoboxplatziert. Die Logobox ist am linkenoder rechten Rand platzierbar.

Mehr über die Logobox finden Sie hier.

Profilbild mit Piktogramm:Das Profilbild, bestehend aus derMarke DB und einem Piktogramm, hateinen Seriencharakter. Piktogrammebieten dabei den Vorteil, mit einemhohen Maß an Wiedererkennbarkeit,komplexe Themen auf kleinstem Raumdarstellen zu können.

Profilbild mit Textzusatz:Alternativ zu den Piktogrammen ist alsErgänzung um die Marke DB auch derEinsatz von typografischen Kürzelnmöglich.

Was ist zu beachten?

Das Profilbild erscheint immer im Zusammenhang mit einemPost/Beitrag in der Timeline/Chronik des Benutzers und hatdaher einen sehr starken Wiedererkennungswert.In dieser Umgebung ist das Profilbild meist stark verkleinert.Die Verkleinerung führt dazu, dass Abbildungen nur nochschemenhaft erkennbar sind. Bei der Gestaltung desProfilbildes muss daher immer das kleine Miniaturbild mitbedacht werden.



Welche Vorlagen werden benötigt?

Die populärsten Social Media Plattformen Facebook, Twitter, Youtube undGoogle+ benötigen für das Profilbild eine viereckige Vorlage. Die Plattformenunterscheiden sich in der Mindest- und Maximalgröße der Vorlage, ebenso in derDarstellung des Profilbildes. Für Facebook und Twitter empfiehlt sich dieStandardvorlage mit der Größe von 400 x 400 Pixeln in quadratischer Grundform.

Bei Youtube (mobile) und Google+ werden Profilbilder in der Darstellungkreisförmig beschnitten. Die Größe und Position der Absendermarke sowie dasIcon, bzw. Textzusatz müssen daraufhin optimiert werden. (s. Sondervorlage)

Hinweis: Werden die Plattformen Youtube und Google+ über einen Google-Account betrieben wird dasselbe Profilbild verwendet.

Beispiele für Profilbilder



Gestaltungsprinzipien für Titelbilder

Das Titelbild bietet die Möglichkeit, mit ausdrucksstarken Motiven dem Auftritteine emotionale Ansprache zu verleihen. Großformatige Fotos repräsentieren dasUnternehmen oder Produkt. Auch der Einsatz mehrerer Fotos ist möglich.

Titelbilder können Textinformationen beinhalten. Um eine gute Lesbarkeit zugewährleisten oder die Wirkung von Fotos nicht zu beeinträchtigen, können diesein eine seperate Farbfläche gesetzt werden.Der Umgang mit der Headline ist ein charakteristisches Merkmal unseresErscheinungsbildes. Der Fett-Fein-Kontrast hebt einzelne Worte hervor undbetont die Kernaussage. Die Headline steht in dynamisch versetzten Zeilen und istzwei- oder dreizeilig.

Bei der Gestaltung des Titelsbildes muss auch die mobile Version der jeweiligenSocial Media Plattform bedacht werden. Folgende Beispiele zeigen das responsiveVerhalten von Titelbildern innerhalb der Desktop- und Mobile-Version.

Hinweis: Bitte beachten Sie, dass für Titelbilder ausschließlich diemarkenspezifischen DB Transparenzen in den Geschäftsfeldfarben mitcharakteristischem Transparenz- und Helligkeitsverlauf eingesetzt werden.

Weitere Informationenund Farbvorgaben:

Transparenzen

Facebook (mobile) skaliert und beschneidet das Titelbild am linkenund rechten Formatrand. Informationen oder Bildaussagen sollten sichidealerweise im Zentrum des Bilders befinden.



Twitter (mobile) skaliert das Motiv auf die Displaybreite.Das Bild bleibt in seiner Proportion erhalten. Die Abbildungen sollten dahermöglichst plakativ sein, damit sie auch in kleinen Abbildungsgrößen guterkennbar sind.

Youtube (mobile) skaliert und beschneidet das Titelbild am linkenund rechten Formatrand. Informationen oder Bildaussagen sollten sichdaher idealerweise im Zentrum des Bilders befinden.

Google+ (mobile) skaliert das Motiv auf die Displaybreite.Das Bild bleibt in seiner Proportion erhalten. Die Abbildung sollten dahermöglichst plakativ sein, damit sie auch in kleinen Abbildungsgrößen guterkennbar sind



Ansprechpartner

Fragen zum Inhalt dieser Seite? [1]

veröffentlicht: 25.02.2014

Verweisliste

[1] Fragen zum Inhalt dieser Seite?: [email protected]

[email protected]

[email protected]

digitale medien, ux-ui design > social media · digitale medien, ux-ui design > social media...

Documents