ROSA LUXEMBURG STIFTUNG

Transkript

1 ROSA LUXEMBURG STIFTUNG Web-Styleguide rosalux.de Februar 2010

2 Inhalt Seitenaufteilung 3 Elemente und Bemaßung der Startseite Elemente und Bemaßung der Unterseiten Farben 5 Allgemeine Farben Farbcodierung Themen Typografie 8 Grafische Schrift HTML-Schrift in der Navigation HTML-Schrift im Content HTML-Schrift in der Sidebar Bilder, Videos & Ikonographie 13 Top-Teaserbilder Themeneinstiegsbilder Einstiegsbilder der Regional und Auslands-Startseiten Themenübersichtsbilder Contentbilder Bildunterschriften Listen-Thumbnails Autorenprofilbilder Bildergalerie Videoformate im Contentbereich Videoformat in der Marginalspalte Symbole & Icons Icons in der Bildergalerie Teaser & Sonstiges 22 Einzelelemente 24 Sliderelement Tabelement Tabellenelement Downloadlisten-Element Seitentypen 28 Impressum 40

3 Seitenaufteilung 3

4 Seitenaufteilung 4 Elemente und Bemaßung der Startseite

5 Farben 5

6 Farben 6 Allgemeine Farben Content Hintergrund #FFFFFF Grundton Hauptnavigation - normal #ff3300 Grundton Hauptnavigation - rollover #FFFFFF Trennlinie Hauptnavigation #FFFFFF Trennlinie Subnavigation #ff3300 Metanavigation # Teaserlisten Hintergrund - dunkler #dedede Teaserlisten Hintergrund - hell #f4f4f4 Breadcrumb Hintergrund #f4f4f4 Hervorhebungen Hintergrund #f4f4f4 Formulare Hintergrund #f4f4f4 Suchfelder Hintergrund #f4f4f4

7 Farben 7 Infozeile Teaser #4d4d4d Icons grau #4d4d4d Bildrahmen #4d4d4d Themen Sub-Navigation Hintergrund # Drop-Down Hintergrund # Farbcodierung Themen Zeitgeschichte #b15f00 Nachhaltigkeit # Kapitalismuskritik #dd0072 Parteien & Demokratie #4b66ac Kultur & Medien #975cb2 Internationale Politik #0e7c93 Politische Bildung #aa5563

8 Typografie 8

9 Typografie 9 Themen-Navigation / Grafische Schrift Normal Linotype Univers condensed heavy, 14 px #ff3300 (Background) Active Linotype Univers condensed heavy, 14 px Themenfarbe (Background) Hauptnavigation / HTML-Schrift Hauptnavigation Normal Verdana regular, 12 px #ffffff Hauptnavigation Rollover Verdana regular, unterstrichen, 12 px #ffffff Hauptnavigation Active Verdana bold, 12 px #ff3300 Subnavigation / HTML-Schrift Subnavigation Subnavigation Normal Verdana regular, 12 px #ff3300 Rollover Verdana regular, unterstrichen, 12 px #ff3300 Subnavigation Active Verdana bold, 12 px #ff3300

10 Typografie 10 Content Teaser / HTML-Schrift Themenüberschrift Content Teaserüberschrift Top-Teaser Linotype Univers, 16 px extended black Themenfarbe Verdana bold, 18 px ZAB 20 px # Teaserüberschrift Normal-Teaser Verdana bold, 12 px ZAB 15 px # Teaserüberschrift Normal-Teaser Rollover Verdana bold, 12 px unterstrichen, ZAB 15 px # Themenüberschrift Teaser Verdana bold, 11 px Versalien Themenfarbe Infozeile Teaser Verdana regular, 11 px #4d4d4d Teaser-Copy Teaser-Copy Verdana regular, 11 px ZAB 16px # Verdana regular, 11 px unterstrichen, ZAB 16px # Datumzeile Verdana bold, 11 px, kursiv # Uhrzeit l Ort Verdana regular, 11 px, kursiv #000000

11 Typografie 11 Marginalspalte / HTML-Schrift Themenüberschrift rechter Bereich Linotype Univers, 12 px extended black Themenfarbe Drop Down linke Hälfte Verdana regular, 11 px #ffffff Drop Down rechte Hälfte Verdana regular, 11 px #ffffff Datumzeile Verdana bold, 11 px, kursiv # Uhrzeit l Ort Verdana regular, 11 px, kursiv # Marginalspalte Teaser / Grafische Schrift Überschrift Linotype Univers, 30 px extended black ZAB 27 px, Versalien Farbe variable Subline Max. Zweispaltig Linotype Univers, 12 px extended black ZAB 13 px, Versalien Farbe variable

12 Typografie 12 Content Mitteilungen / HTML-Schrift Breadcrumb Verdana bold, 11 px # Artikelüberschrift Verdana bold, 15 px ZAB 20 px # Themenüberschrift Teaser Verdana bold, 11 px Versalien Themenfarbe Datums- und Autorenzeile Verdana regular, 11 px # Einleitungscopy Verdana bold, 12 px ZAB 15 px # Copy Verdana regular, 12 px ZAB 16px # Bildunterschrift Verdana regular, 11 px ZAB 16,5px #000000

13 Bilder, Videos & Ikonographie 13

14 Bilder, Videos & Ikonographie 14 Top-Teaserbilder Top-Teaserbilder sind immer querformatig. Die Größe ist immer 685 x 340 px. Es ist darauf zu achten, daß durch den transparenten Balken im unteren Drittel keine wichtigen Bildinformationen überdeckt werden. Der Formatzuschnitt erfolgt in einer Photoshop-Vorlage. Themeneinstiegsbilder Einstiegsbilder sollten immer Bildkompositionen aus zwei bis drei Bildern sein. Sie sind jeweils durch einen 5 px breiten weißen Balken getrennt. Sie sind immer einfarbig duplex in der entsprechenden Themenfarbe eingefärbt. Die Bildsprache sollte identisch zum Printbereich der RLS sein. Die Motivwahl erfolgt themenspezifisch. Die Gesamtgröße ist immer 685 x160 px. Beispiel Thema Kapitalismuskritik

15 Bilder, Videos & Ikonographie 15 Einstiegsbilder der Regional- und Auslandsstartseiten Einstiegsbilder der Regional- und Auslandsstartseiten verhalten sich ähnlich wie die Themeneinstiegsbilder. Die Duplexeinfärbungen können hier frei kombiniert werden. Die Motivwahl richtet sich nach reginal- bzw. ländertypischen Motiven. Beispiel Startseite Nordrhein-Westfalen Themenübersichtsbilder Die Themenübersichtsbilder sind immer identisch zu einem Bild aus der Themeneinstiegsbilderkomposition. Die Größe ist immer 332 x 130 px. Beispiel Thema Zeitgeschichte

16 Bilder, Videos & Ikonographie 16 Ausnahmen Ausnahmen bilden hier querformatige Bilder, die im nicht-thematischen Zusammenhang gebraucht werden (z.b. im Bereich Die Stiftung ). Zugunsten der Erkennbarkeit des Motivs wird hier auf ein Duplexeffekt und eine Formatbegrenzung in der Höhe verzichtet. Beispiel Bereich Die Stiftung Beispiel Bereich Gremien

17 Bilder, Videos & Ikonographie 17 Contentbilder Contentbilder sollten möglichst nah an das Verhältnis 3:4, 4:3 oder quadratisch angepasst werden. Die Bildbreite wird immer vom System auf 300 px angepasst. Die Bildhöhe folgt dem Bildformat. Eine Ausnahme bildet hierbei das Contentbild im Bereich Publikationen, da hierbei immer von einem Hochformat auszugehen ist. Die Bildbreite wird hier vom System auf 250 px angepasst. Die Bildhöhe folgt dem Bildformat. Weiße Bilder erhalten einen grauen Rahmen. Beispiel Contentbild Veranstaltung Beispiel Contentbild Nachricht Beispiel Contentbild Publikation Bildunterschriften Sofern eine Bildunterschrift nötig ist, erfolgt diese auf einer hellgrauen Fläche unterhalb des Bildes (#4D4D4D). Die Fläche ist immer so breit wie das Bild. Die Bildunterschrift ist von oben, unten, links und rechts 10 px vom Rand entfernt. Die Textmenge sollte zwei Zeilen nicht überschreiten. Bildunterschriften sind grundsätzlich bei allen Bilder möglich. Ausnahmen bilden die duplexeingefärbten Themenbilder. Beispiel Bildunterschrift Nachricht

18 Bilder, Videos & Ikonographie 18 Listen-Thumbnails Thumbnails in einer Liste werden vom System immer auf eine Breite von 90 px angepasst. Die Bildhöhe folgt dem Bildformat. Ausnahmen bilden hierbei die Thumbnails der Veranstaltungen in der Marginalspalte. Diese werden vom System auf eine Breite von 70 px angepasst. Die Bildhöhe folgt dem Bildformat. Weiße Bilder erhalten einen grauen Rahmen. Beispiel Thumbnail Veranstaltung Beispiel Thumbnail Nachricht Beispiel Thumbnail Veranstaltung Beispiel Thumbnail Veranstaltung Marginalspalte Autorenprofilbilder Autorenprofilbilder werden in zwei Varianten verwendet. Im Autorenprofil wird die Breite immer vom System auf 130 px angepasst. Die Bildhöhe folgt dem Bildformat. Unterhalb des Contentbereichs einer Nachricht wird das Autorenprofibild vom System auf eine Breite von 45 px angepasst. Die Bildhöhe folgt dem Bildformat. Empfohlen wird hierbei immer ein hochformatiges Profilbild. Beispielbild Autorenthumbnail Beispiel Profilbild Autorenprofil

19 Bilder, Videos & Ikonographie 19 Bildergalerie Die Bildergalerie besteht aus zwei Elementen. Die Bildergalerie-Thumbnails werden vom System immer auf eine Größe von 70 x 70 px angepasst. Die Bildgröße innerhalb der Lightbox definiert sich durch eine maximale Breite im Querformat von 570 px und die maximale Breite im Hochformat von 360 px. Die Bildhöhe folgt dem Bildformat. Der Einsatz einer Bildergalerie wird ab einer Anzahl von 5 Bildern empfohlen. Beispiel Thumbnail in der Bildergalerie Beispiel Bild Lightbox Querformat Beispiel Bild Lightbox Hochformat

20 Bilder, Videos & Ikonographie 20 Videoformate im Contentbereich Im Contentbereich werden Videos auf einer hellgrauen Fläche (#f4f4f4) zentriert platziert. Empfohlen wird ein 16:9-Format in der Größe 640 x 385 px. Möglich ist auch ein 4:3 Format in der Größe 480 x 385 px. Bei abweichenden Formaten von verschiedenen Quellen wie z.b. MyVideo, Google Videos, Vimeo usw. wird eine ähnliche Formatdimension empfohlen. Sofern eine Videounterschrift nötig ist, erfolgt diese auf einer hellgrauen Fläche unterhalb des Videos (#4D4D4D). Beispiel Video 16:9 Beispiel Video 4:3 Videoformat in der Marginalspalte In der Marginalspalte werden Videos mit einer maximalen Breite von 275 px platziert. Die Videohöhe folgt dem Videoformat. Eine Videounterschrift ist auch hier im bekannten Format möglich. Beispiel Video Marginalspalte

21 Bilder, Videos & Ikonographie 21 Symbole & Icons Drucken Schriftgröße vergrößern Kommentare Liste weiter Seite empfehlen Schriftgröße verkleinern Information Liste zurück Bookmarks Breadcrumb zurück Kalender Liste weiter inactive Breadcrumb Drop Down Liste zurück inactive RSS-Feed Suchen PDF Bullit-Point Externer Link ical Interner Link Download Icons in der Bildergalerie Die Weiter und Zurück-Buttons der Bildergalerie haben die jeweiligen Themenfarben, in der sich die Bildergalerie befindet. Beispiel Weiter und Zurück-Button in der Lightbox Internationale Politik Beispiel Weiter und Zurück-Button in der Thumbnail-Bildergalerie Internationale Politik

22 Teaser & Sonstiges 22

23 Teaser & Sonstiges 23 Teaser Teaser werden ausschließlich in der Marginalspalte platziert. Die Gestaltung ist in zwei Unterschiedlichen Größen möglich. 275 x 100 px und 275 x 185 px. Die Wahl der Teasergrößer ist abhängig von der zu transportierenden Informationsmenge. Möglich sind vollflächig einfarbige Teaser, die nur aus Headline und Subheadline bestehen. Der Text sollte immer linksbündig platziert werden. Der Teaser sollte immer mit einem passenden Keyvisual kombiniert werden. Die Farbigkeit wird idealerweise dem Thema angepasst. Es ist darauf zu achten, den Teaser möglichst formatfüllend zu gestalten. In Sonderfällen kann der Text auf vollflächigen Bildern stehen, solange die Lesbarkeit garantiert wird. Fremdteaser sollten, wenn möglich, auf eines der zwei Formate zugeschnitten werden und können in ihrer Gestaltung bestehen bleiben. Beispiel RLS-Facebook-Teaser 275 x 100 px oder 275 x 185 px - max. 2-zeilige Überschrift verwenden - max. 2-zeilige Subheadline verwenden - Einsatz verschiedener Farben und Bilder möglich - Ein Logo kann verwendet werden Beispiel Veranstaltungsteaser 275 x 100 px oder 275 x 185 px - Text auf Bild möglich - Einsatz verschiedener Farben und Fotos möglich - Positionierung der Headline an verschiedenen Stellen möglich Beispiel Fremdteaser 275 x 100 px oder 275 x 185 pxx - Orginalgestaltung kann beibehalten werden - muss auf eines der zwei Formate zugeschnitten werden

24 Einzelelemente 24

25 Einzelelemente 25 Sliderelement Das Sliderelement ist dafür geeignet um viele Inhalte in einer Liste platzsparend anzuzeigen. Standardmäßig sind alle Sliderheader geschlossen und können durch einen Klick geöffnet werden. Es ist möglich, mehrere Elemente gleichzeitig zu öffnen und zu schließen. Beispiel Sliderelement im Bereich Organigramm Tabelement Das Tabelement wird idealerweise innerhalb des Contents z.b. bei einer Nachricht oder einer Publikation verwendet. Es beinhaltet weiterführende thematisch passende Inhalte. Durch die Reiternavigation können z.b. Weiterführende Links, Bildergalerien, Kontaktadressen und Downloads platzsparend angezeigt werden. Beispiel Tabelement Weiterführende Links

26 Einzelelemente 26 Beispiel Tabelement Kontakte Tabellenelement Das Tabellenelement ist ein universelles Element das überall auf der Seite eingesetzt werden kann. Die Tabelle kann aus einem Themenheader und aus Spalten bestehen. Die Größe der Spalten verhalten sich flexibel zum Inhalt. Beispiel Tabelle Stellen Beispiel Tabelle Auslandsbüros

27 Einzelelemente 27 Downloadlisten-Element Downloads können im Contentbereich und der Marginalspalte verwendet werden. Sie sind jeweils mit dem entsprechendem Icon gekennzeichet. Hinter jedem Download sollte der Typ (PDF) und in Klammern die Dateigröße angegeben werden. Beispiel Downloads Marginalspalte Beispiel Downloads im Tabelement im Contentbereich Beispiel Downloads Publikation

28 Seitentypen 28

29 Seitentypen 29 Startseite

30 Seitentypen 30 Themenübersicht

31 Seitentypen 31 Themeneinstieg

32 Seitentypen 32 Nachricht Detail

33 Seitentypen 33 Publikation Detail

34 Seitentypen 34 Publikationsübersicht

35 Seitentypen 35 Veranstaltung Detail

36 Seitentypen 36 Veranstaltungsübersicht

37 Seitentypen 37 Statische Seite

38 Seitentypen 38 Startseite Landesstifung

39 Seitentypen 39 Startseite Auslandsbüro

40 Impressum 40 Rosa-Luxemburg-Stiftung Peter Ostholt Online-Redaktion/Content-Management Franz-Mehring-Platz Berlin Tel.: cosmoblonde GmbH Leuschnerdamm Berlin Tel.: Fax: Rosa-Luxemburg-Stiftung 2010