Styleguide Facebook-Seiten der Robert Bosch Stiftung

Transkript

1 Styleguide Facebook-Seiten der Robert Bosch Stiftung

2 Inhalt Robert Bosch Stiftung Facebook-Startseite Einleitung Facebook-Startseite Übersicht Coverfoto & Profilbild der Robert Bosch Stiftung-Startseite Coverfoto und Profilbild der Projektseiten App Images Facebook-Apps Allgemeine Layoutregeln Kopfzeile Bühne Bild rechts/links Zweispaltige Teaserbox Publikationen Google Maps Videos Klickgalerie Expandable Box Kommentar-Template

3 Facebook-Startseite Einleitung Robert Bosch Stiftung Der vorliegende Styleguide legt den Rahmen für die Gestaltung von Facebook-Seiten der Robert Bosch Stiftung fest. Er gilt für alle Facebook-Aktivitäten der Robert Bosch Stiftung, für die Seiten einzelner Programme und Aktivitäten sowie für angeschlossene Institutionen, die ebenfalls das Corporate Design der Robert Bosch Stiftung verwenden.

4 Facebook-Startseite Übersicht Robert Bosch Stiftung 4 Anpassung des Layouts von Facebook-Startseiten Cover-Foto Profilbild App Images

5 Facebook-Startseite Cover-Foto und Profilbild für die Robert Bosch Stiftung Robert Bosch Stiftung 5 Cover-Foto Das Cover-Foto der Startseite zeigt ein charakteristisches Motiv der Robert Bosch Stiftung. Kippeffekt durch Anschneiden des Fotos (schräge Kante) sowie ein Schlagschatten am rechten und unteren Rand. Der Effekt wird ebenso wie der hellblaue Hintergrund in das Bild integriert. Der Schlagschatten des Profilbilds muss durch den Grafiker in das Cover-Foto integriert werden. Abmessungen: 85 x 5 px Hintergrund: RGB, 5, 4 Schlagschatten: RGB 9, 78, 48 Füllmethode: Multiplizieren Deckkraft: 00 Prozent Neigung: 0 Grad Abstand: px Größe: 8 px Profilbild Das Profilbild der Startseite zeigt das für Facebook angepasste Logo der Robert Bosch Stiftung. Abmessungen: 80 x 80 px Schlagschatten: RGB 0, 0, 0 Füllmethode: Multiplizieren Deckkraft: 75 Prozent Neigung: 0 Grad Abstand: 5 px Größe: 6 px

6 Facebook-Startseite Cover-Foto und Profilbild für Programmseiten Robert Bosch Stiftung 6 Cover-Foto Das Cover-Foto einer Programmseite zeigt ein typisches Motiv, das idealerweise medienübergreifend verwendet wird. Kippeffekt durch Anschneiden des Fotos (schräge Kante) sowie ein Schlagschatten am rechten und unteren Rand. Der Effekt wird ebenso wie der hellblaue Hintergrund in das Bild integriert. Abmessungen: 85 x 5 px 4 Die Facebook-Vorgaben zur Verwendung von Text und Logos in Cover-Fotos sind zu beachten. Cover-Foto Stele Hinter dem Profilbild ist eine»stele«mit dem Logo der Robert Bosch Stiftung platziert. Diese»Stele«muss einschließlich des Schatten-Effekts in das Cover-Foto integriert werden. Schlagschatten: RGB 0, 0, 0 Füllmethode: Multiplizieren Deckkraft: 75 Prozent Neigung: 0 Grad Abstand: 5 px Größe: 6 px Cover-Foto Text Text wird auf einer leicht gekippten, weißen Fläche gesetzt. Fläche und Text sind in das Profilbild integriert. Abmessungen: 0 x 9 px Höhe variabel, je nach Textmenge Neigung der Fläche:,5 Grad Schrift: Bosch Sans Regular 6 px, ZAB 8 px RGB 5, 0, 0

7 Facebook-Startseite Cover-Foto und Profilbild für Programmseiten Robert Bosch Stiftung 7 Schlagschatten: RGB 9, 78, 48 Füllmethode: Multiplizieren Deckkraft: 00 Prozent Neigung: 0 Grad Abstand: px Größe: px 4 Profilbild Das Profilbild der Projektseite zeigt das Key Visual des jeweiligen Projekts. Abmessungen: 80 x 80 px 4 Die Facebook-Vorgaben zur Verwendung von Text und Logos in Cover-Fotos sind zu beachten.

8 Facebook-Startseite Robert Bosch Stiftung 8 App Images Icons für Ansichten (Views), z.b.»fotos«,»karte«und»likes«werden von Facebook automstisch eingesetzt. Icons für Anwendungen (Apps) werden mit einem Outline-Icon versehen und auf einer gekippten Fläche platziert. Verlauf von RGB 4, 4, 48 (oben) nach RGB, 0, (unten) Weiße Fläche um -6,88 Grad gekippt Schlagschatten: RGB 6, 46, Füllmethode: Multiplizieren Deckkraft: 00 Prozent Neigung: 0 Grad Abstand: px Größe: 6 px Icon Linie: RGB,, Füllung: RGB 40, 7,

9 Allgemeine Layoutregeln Robert Bosch Stiftung 9 Eigene Seiten mit frei gestaltbarem Layout und Inhalten werden in Facebook als»apps«eingebunden und über die App-Icons im Menü aufgerufen. Ob Apps verwendet werden, hängt vom Inhalt der jeweiligen Facebook-Seite ab. Für App-Seiten wurde ein spezielles Layout mit verschiedenen vorgegebenen Content- Formaten entwickelt: Seitenkopf Bühne weitere Templates Alle Templates sind im Content-Bereich frei kombinierbar. Sie werden alternierend durch schräg gestellte Kanten getrennt. Der Effekt entsteht durch Hintergrundflächen und -kanten, welche sich gegenseitig durch ihre Schrägstellung leicht überdecken. Die Inhalte selbst sind horizontal ausgerichtet. Eine Übersicht der verfügbaren Templates finden Sie auf den folgenden Seiten.

10 Kopfzeile Robert Bosch Stiftung 0 Die Kopfzeile ist auf jeder App-Seite platziert. Sie enthält allgemeine Links, z.b. zur Website der Robert Bosch Stiftung, zu anderen Social Media-Plattformen oder zum RSS Feed. Externe Links Abmessungen der Icons: 6 x 6 px Schrift: Arial Regular px RGB 84, 85, 80 Seitenüberschrift Schrift: Arial Regular px, ZAB 8 px Zurück-Links Zu App-Seiten können auch Folgeseiten eingerichtet werden. Diese sind dann über»zurück«-links mit den übergeordneten Seiten verknüpft.

11 Bühne Robert Bosch Stiftung Eine»Bühne«bietet ein Bild- und Textformat über die gesamte Content-Breite. Gekippte Bühnenbilder werden über eine PNG-Maske schräg angeschnitten. Vom Redakteur wird ein rechteckiges Bild hochgeladen. Über dem Bild können Texte auf einem weißen, ebenfalls gekippten Streifen platziert werden. (Nach Möglichkeit HTML-Text verwenden) Bild Abmessungen: 700 x 6 px Fotonachweis/Quelle Schrift: Arial Regular 9 px, ZAB px RGB 95, 95, 96 4 Weiße Fläche mit Overlay-Text (optional) Schrift: Arial Regular 7 px, ZAB 9 px RGB 5, 0, 0 4 Überschrift Schrift: Arial Regular 4 px, ZAB 0 px RGB 5, 0, Subhead (optional) Schrift: Arial Bold, 9 px, ZAB px 6 Text (Teasertext, Linktext) Schrift: Arial Regular, 4 px, ZAB 8 px 7 7 Social Media Buttons ein- oder ausblendbar Erweiterbar mit einem Facebook-Kommentarfeld (optional)

12 Bild rechts/links Robert Bosch Stiftung 4 Das Template Bild rechts/links platziert das Bild neben dem Text und den Links. Größere Textmengen können per Button ein- und ausgeklappt werden. Bild links oder rechts platzierbar Abmessungen: 0 px, Bildhöhe variabel Fotonachweis/Quelle Schrift: Arial Regular 9 px, ZAB px RGB 95, 95, 96 Überschrift Schrift: Arial Regular 4 px, ZAB 0 px RGB 5, 0, 0 4 Subhead Schrift: Arial Bold 9 px, ZAB px Text (Teasertext, Linktext) Schrift: Arial Regular 4 px, ZAB 8 px 6 Social Media Buttons beliebig ein- oder ausblendbar 6 Erweiterbar mit einem Facebook-Kommentarfeld (optional)

13 Zweispaltige Teaserbox Robert Bosch Stiftung Die zweispaltige Teaserbox dient der kompakten Darstellung und Verlinkung von verschiedenen Inhalten. Zur Auswahl stehen Bild-Text-Boxen oder Linklisten. Überschrift Schrift: Arial Regular 4 px, ZAB 0 px RGB 5, 0, 0 4 Text (Introtext, Tooltip-Text, Linktext) Schrift: Arial Regular 4 px, ZAB 8 px Teasertext Schrift: Arial Bold 4 px, ZAB 8 px 5 4 Teaserbild Maße: 5 x 85 px 5 Tooltip mit Detailinformationen Abmessungen: 495 x px Verlauf : von RGB 40, 7, (oben) nach RGB 6,, (unten)

14 Publikationen Robert Bosch Stiftung 4 Im Unterschied zu dem Bild rechts/links- Template bietet dieses Template spezielle Links zum Download von PDF- und ebook-formaten. Cover-Foto mit Papierkante und Schattenwurf Abmessungen: 6 x 9 px 4 Überschrift Schrift: Arial Regular 4 px, ZAB 0 px RGB 5, 0, 0 Text Schrift: Arial Regular/Bold 4 px, ZAB 8 px 5 4 Links Schrift: Arial Regular 4 px, ZAB 8 px 5 Social Media Buttons beliebig ein- oder ausblendbar Erweiterbar mit einem Facebook-Kommentarfeld (optional)

15 Google Maps Robert Bosch Stiftung 5 Das Google-Maps-Template erlaubt die Kombination einer Karte mit beschreibendem Text und weiterführenden Links. Überschrift Schrift: Arial Regular 4 px, ZAB 0 px RGB 5, 0, 0 Text (Teasertext, Linktext) Schrift: Arial Regular 4 px, ZAB 8 px Karte Abmessungen: 450 x 05 px 4»Sprechblase«mit Text und Link (in CMS pflegbar)

16 Videos Robert Bosch Stiftung 6 Analog zum Google-Maps-Template können auch Videos eingesetzt werden. Die Bedienelemente des Video-Players entsprechen den Playern, die bei der Bosch-Stiftung im Einsatz sind. 4 Überschrift Schrift: Arial Regular 4 px, ZAB 0 px RGB 5, 0, 0 Text (Teasertext, Linktext) Schrift: Arial Regular 4 px, ZAB 8 px Startbild Abmessungen: 450 x 5 px Das Startbild ist ebenso das Fallbackbild. In der Fallbackvariante kann man das Video herunterladen. 4 Video 5 Social Media Buttons beliebig ein- oder ausblendbar Erweiterbar mit einem Facebook-Kommentarfeld (optional) 5

17 Klickgalerie Robert Bosch Stiftung 7 In Klickgalerien können mittels Blätterfunktion und Paginierung Bildbeiträge angeschaut werden. Überschrift Schrift: Arial Regular 4 px, ZAB 0 px RGB 5, 0, 0 Text Schrift: Arial Regular 4 px, ZAB 8 px 4 Bilder 4 Fotonachweis/Quelle Schrift: Arial Regular 9 px, ZAB px RGB 95, 95, 96 Erweiterbar mit einem Facebook-Kommentarfeld (optional)

18 Expandable Box Robert Bosch Stiftung 8 Die einzelnen Sektionen der Expandable Box können mit den in diesem Styleguide beschriebenen Templates befüllt werden. Jede Sektion ist per Button ein- und ausklappbar. Im Fallback sind alle Sektionen ausgeklappt. Überschrift Schrift: Arial Regular 4 px, ZAB 0 px RGB 5, 0, 0 Titel des Aufklappelements Schrift: Arial Bold 4 px, ZAB 8 px

19 Version.0 Dezember 0 9