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

Download Digitale Medien, UX-UI Design > Social Media .Digitale Medien, UX-UI Design > Social Media Deutsche

Post on 26-Aug-2019

213 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • 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 ein hohes Maß an Gestaltungsspielraum. Die dargestellten Prinzipien zeigen Möglichkeiten, sich auf Plattformen zu präsentieren, ohne die Linie der DB zu verlassen, bzw. sichert die Erkennbarkeit der Marke.

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

    Wie funktioniert Marke im Alltag?

  • Digitale Medien, UX-UI Design > Social Media

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

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

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

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

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

  • Digitale Medien, UX-UI Design > Social Media

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

    CD-Regeln:

    Gestaltungsprinzipien für Profilbilder

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

    Aus Gründen der Einheitlichkeit werden Profilbilder mit Piktogramm- oder Textzusatz nur von dem Team Corporate Design erstellt.

    Profilbild mit Foto und Logobox: Das Foto kann sich an aktuellen Themen orientieren oder beispielsweise ein Kampagnenmotiv enthalten. Da Profilbilder sehr klein dargestellt werden, wählen Sie ein Motiv, das ausreichend plakativ ist. Die Marke DB wird bei dieser Option als Logobox platziert. Die Logobox ist am linken oder rechten Rand platzierbar.

    Mehr über die Logobox finden Sie hier.

    Profilbild mit Piktogramm: Das Profilbild, bestehend aus der Marke DB und einem Piktogramm, hat einen Seriencharakter. Piktogramme bieten dabei den Vorteil, mit einem hohen Maß an Wiedererkennbarkeit, komplexe Themen auf kleinstem Raum darstellen zu können.

    Profilbild mit Textzusatz: Alternativ zu den Piktogrammen ist als Ergänzung um die Marke DB auch der Einsatz von typografischen Kürzeln möglich.

    Was ist zu beachten?

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

  • Digitale Medien, UX-UI Design > Social Media

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

    Welche Vorlagen werden benötigt?

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

    Bei Youtube (mobile) und Google+ werden Profilbilder in der Darstellung kreisförmig beschnitten. Die Größe und Position der Absendermarke sowie das Icon, 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

  • Digitale Medien, UX-UI Design > Social Media

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

    Gestaltungsprinzipien für Titelbilder

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

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

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

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

    Weitere Informationen und Farbvorgaben:

    Transparenzen

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

  • Digitale Medien, UX-UI Design > Social Media

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

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

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

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

  • Digitale Medien, UX-UI Design > Social Media

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

    Ansprechpartner

    Fragen zum Inhalt dieser Seite? [1]

    veröffentlicht: 25.02.2014

    Verweisliste

    [1] Fragen zum Inhalt dieser Seite?: marke@deutschebahn.com

    marke@deutschebahn.com marke@deutschebahn.com