ROSA LUXEMBURG STIFTUNG Web-Styleguide rosalux.de Februar 2010
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
Seitenaufteilung 3
Seitenaufteilung 4 Elemente und Bemaßung der Startseite
Farben 5
Farben 6 Allgemeine Farben Content Hintergrund #FFFFFF Grundton Hauptnavigation - normal #ff3300 Grundton Hauptnavigation - rollover #FFFFFF Trennlinie Hauptnavigation #FFFFFF Trennlinie Subnavigation #ff3300 Metanavigation #000000 Teaserlisten Hintergrund - dunkler #dedede Teaserlisten Hintergrund - hell #f4f4f4 Breadcrumb Hintergrund #f4f4f4 Hervorhebungen Hintergrund #f4f4f4 Formulare Hintergrund #f4f4f4 Suchfelder Hintergrund #f4f4f4
Farben 7 Infozeile Teaser #4d4d4d Icons grau #4d4d4d Bildrahmen #4d4d4d Themen Sub-Navigation Hintergrund #827774 Drop-Down Hintergrund #827774 Farbcodierung Themen Zeitgeschichte #b15f00 Nachhaltigkeit #528101 Kapitalismuskritik #dd0072 Parteien & Demokratie #4b66ac Kultur & Medien #975cb2 Internationale Politik #0e7c93 Politische Bildung #aa5563
Typografie 8
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
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 #000000 Teaserüberschrift Normal-Teaser Verdana bold, 12 px ZAB 15 px #000000 Teaserüberschrift Normal-Teaser Rollover Verdana bold, 12 px unterstrichen, ZAB 15 px #000000 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 #000000 Verdana regular, 11 px unterstrichen, ZAB 16px #000000 Datumzeile Verdana bold, 11 px, kursiv #000000 Uhrzeit l Ort Verdana regular, 11 px, kursiv #000000
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 #000000 Uhrzeit l Ort Verdana regular, 11 px, kursiv #000000 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
Typografie 12 Content Mitteilungen / HTML-Schrift Breadcrumb Verdana bold, 11 px #000000 Artikelüberschrift Verdana bold, 15 px ZAB 20 px #000000 Themenüberschrift Teaser Verdana bold, 11 px Versalien Themenfarbe Datums- und Autorenzeile Verdana regular, 11 px #000000 Einleitungscopy Verdana bold, 12 px ZAB 15 px #000000 Copy Verdana regular, 12 px ZAB 16px #000000 Bildunterschrift Verdana regular, 11 px ZAB 16,5px #000000
Bilder, Videos & Ikonographie 13
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
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
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
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
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
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
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
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 E-Mail 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
Teaser & Sonstiges 22
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
Einzelelemente 24
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
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
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
Seitentypen 28
Seitentypen 29 Startseite
Seitentypen 30 Themenübersicht
Seitentypen 31 Themeneinstieg
Seitentypen 32 Nachricht Detail
Seitentypen 33 Publikation Detail
Seitentypen 34 Publikationsübersicht
Seitentypen 35 Veranstaltung Detail
Seitentypen 36 Veranstaltungsübersicht
Seitentypen 37 Statische Seite
Seitentypen 38 Startseite Landesstifung
Seitentypen 39 Startseite Auslandsbüro
Impressum 40 Rosa-Luxemburg-Stiftung Peter Ostholt Online-Redaktion/Content-Management Franz-Mehring-Platz 1 10243 Berlin Tel.: 030 44310-169 cosmoblonde GmbH Leuschnerdamm 31 10999 Berlin Tel.: 030 616 756 10 Fax: 030 616 756 20 Rosa-Luxemburg-Stiftung 2010