Styleguide spd.de Relaunch 2015 Stand: 02/2016
Farben Folgende Farben gehören zur auf der Homepage verwendeten Farbpalette. Die jeweilige Kategorie bezeichnet den primären Verwendungszweck. Einschränkungen und Ausnahmen sind gesondert gekennzeichnet und müssen in jedem Fall beachtet werden. Primäre Corporate Farbe SPD-Rot RGB 227/0/15 HEX #E3000F Nur verwendbar als Teil des Logos und für Textlinks. Kachelfarben Hellrot RGB 242/87/98 HEX #Af25762 Cyan RGB 0/180/204 HEX #00B4CC Verwendbar für Startseite, Bereichsstartseiten, Teaser und Sharing-Kacheln. Verwendbar für Startseite, Bereichsstartseiten, Teaser. Nicht verwendbar für Sharing-Kacheln. Dunkelrot RGB 182/28/62 HEX #B61C3E Magenta RGB 152/2/103 HEX #980267 Verwendbar für Startseite, Bereichsstartseiten, Teaser und Sharing-Kacheln. Verwendbar für Startseite, Bereichsstartseiten, Teaser und Sharing-Kacheln. Hellblau RGB 64/153/255 HEX #4099ff Verwendbar für Startseite, Bereichsstartseiten, Teaser. Nicht verwendbar für Sharing-Kacheln. Dunkelblau RGB 59/89/152 HEX #3b5998 Verwendbar für Startseite, Bereichsstartseiten, Teaser. Nicht verwendbar für Sharing-Kacheln. Hellgrau RGB 237/237/237 HEX #ededed Im Ausnahmefall für Bereichsstartseiten, Teaser. Nicht verwendbar für Startseite, Sharing-Kacheln. Schriftfarben Weiß RGB 255/255/255 HEX #ffffff Dunkelgrau RGB 51/51/51 HEX #333333 Zur Verwendung auf den Kachelfarben. Primäre Schriftfarbe auf Weiß und auf sonstigen hellen Untergründen. 2
Kacheln Die hier gezeigten Beispiele sind FALSCH. Es ist unbedingt darauf zu achten, dass die Farben gemäß voriger Definition verwendet werden, um ein einheitliches, freundliches Bild zu gewährleisten. Grau nur im Ausnahmefall Prinzipiell gilt: Grau ist als Kachelfarbe nur im Ausnahmefall für Bereichsstartseiten oder Teaser Weiß als Kachelfarbe ausschließlich auf der Startseite Links dürfen nicht zu lang sein Weiß als Kachelfarbe findet ausschließlich auf der Startseite Verwendung. Gleiche Farben bei angrenzenden Kacheln sind zu vermeiden. Dabei immer auch beachten, wie die Kacheln umbrechen zwischen den Devices (dreispaltig, zweispaltig, einspaltig). Headline- und Linkstexte sind so kurz und prägnant wie möglich zu halten. Weiß darf nicht auf Weiß als Kachelfarbe verwendet werden Grau niemals auf der Startseite Gleiche Farben sollen nach Möglichkeit nicht angrenzend verwendet werden 3
Textelemente I Headlines Headlines H1 Zentrale Headline als Teil der Kacheln der Startseite und der Bereichsstartseiten. Äquivalent dazu findet sie sich auf den einzelnen Themenseiten in gleicher Form wieder. Headlines H2 Zentrale und größte Headline innerhalb einer Themenseite/Contentseite. Mehrfach verwendbar. Gleichzeitig Überschrift innerhalb der Teasermodule (unten). Auf der SPD.de findet ausschließlich die Schrift Open Sans Verwendung. Der Einsatz der vordefinierten Schriftstile richtet sich nach den zu verwendenden Elementen, die hier einzeln aufgeführt werden. Die Schrift ist auf hellen Untergründen immer Dunkelgrau, auf dunklen Untergründen hingegen Weiß. Es ist zur Einhaltung der Barrierefreiheit auf ein ausreichendes Kontrastverhältnis zu achten, was bei Verwendung der vorgegebenen Farben problemlos möglich ist. Headlines H3 Kleinere Zwischenheadline innerhalb eines H2-Bereichs. Headlines H4 Headline für einen optionalen Introtext und kleinste Zwischenheadline für den Contentbereich. Ebenfalls genutzt als Headline für Interaktionsauffoderungen vor Teasern (Mehr zum Thema:) und Sharing-Kacheln (Standpunkt teilen:). 4
Textelemente II Module Die im CMS hinterlegten Module ermöglichen eine optimale Strukturierung der Inhalte der Themenseiten. Prinzipiell gilt: Die Inhalte sollen kurz und knapp, auf den Punkt gebracht dargestellt sein. Weniger relevante Zusatzinfos oder spezielle Inhalte finden auf Contentseiten Platz, die extra verlinkt werden, statt alles auf eine Seite zu packen. Das Akkordeon bietet eine zusätzliche Möglichkeit, Inhalte zu verstecken. Akkordeon Das Akkordeon kommt immer dann zum Einsatz, wenn verschiedene, kleingliedrige Fakten dargestellt werden sollen, die hierdurch optisch verkürzt und übersichtlich strukturiert werden können. Aussagekräftige Überschriften sind hierbei Pflicht. Teaser Teaser sind prominente Verlinkungen von Inhalten, welche als andere Themen- oder Contentseiten auf SPD.de oder extern erreichbar sind. Teaser können farblich hinterlegt werden mit den Farben Hellrot, Dunkelrot, Cyan, Magenta, Blau oder ganz klassisch auf Weiß stehen. Die Farbverwendung bei mehreren Teasern sollte abwechslungsreich und übersichtlich sein. Innerhalb der Teaser ist der Text genau so formatierbar wie der Rest des Contents. Teaser können deshalb wahlweise nur mit Überschrift (H2), mit Überschrift und einer kurzen Copy oder auch als kompletter Textabschnitt funktionieren. Der Text des Call-To-Action ist frei wählbar und der Standardtext MEHR sollte nach Möglichkeit in eine treffendere Bezeichnung abgeändert werden. Downloads Das Download-Modul sollte für jedwede Downloads benutzt werden, um für den User eine einheitliche optische Kennzeichnung dieser zu erreichen. 5
Sharing-Kacheln Die Sharing-Kacheln werden entsprechend der Photoshop-Vorlage aufgebaut. Darin enthalten sind bereits alle möglichen Kombinationen an Typo und Farbflächen. Es dürfen keine Fotos als Kacheln verwendet werden. Infografiken hingegen sind möglich. Einige gut funktionierende Beispiele werden hier aufgeführt. Klassischer Aufbau nach Vorlage Folgende Farben können als Hintergrund verwendet werden: Dunkelrot Hellrot Magenta Die Position des Logos ist fix und darf nicht verändert werden Der Text ist immer weiß und horizontal/ vertikal zentriert Sharing-Kacheln werden nur dann erstellt, wenn deren Content zum Teilen anregt. Das können Standpunkte oder Fakten sein, aber keine Gemeinplätze. Die Schriftart ist unbedingt einzuhalten. Die Schnitte können entsprechend der Vorlage verwendet werden, um bestimmte Teile der Aussage hervorzuheben. Klar abgesetzter Hashtag, Linien sind bündig Beispiele 6