Webseite
Was für die Gestaltung analoger Printmedien gilt, gilt im Besonderen auch für die Entwicklung digitaler Medien, wie den Internet-Auftritt des Deutschen Roten Kreuzes (DRK). Die Gestaltung der DRK-Webseite ist dem DRK-Erscheinungsbild entsprechend zurückhaltend und klar strukturiert. Im Zentrum einer jeden Seite steht das Bild als „Bühnenbild“; die Auswahl der Inhalte folgt dem Prinzip „weniger ist mehr“.
Farbigkeit
Da der Farbeinsatz im Web anderen Sehgewohnheiten gerecht werden muss, unterscheidet er sich geringfügig von dem der Offline-Anwendungen des DRK-Erscheinungsbildes. Das Rot der Printmedien wird hier zum „Softrot“, ergänzt durch verschiedene Blau- und Grautöne. Wo und wie genau die einzelnen Farben eingesetzt werden, erfahren Sie in diesem Kapitel.
DRK-Rot und Rotabstufungen
Der stärkere Rot-Anteil in den Offline-Anwendungen wird im Bereich der Webseiten aufgegriffen.
DRK-Rot (RGB 230/0/5)
Das DRK-Rot auf der Webseite wird für Buttons, Überschriften, Icons, Hintergrundfarben (Newsletter-Anmeldung auf der Startseite) und zum Teil als Hover-Effekt bei Textverlinkungen verwendet.
„Softrot“ (RGB 228/100/80)
Das „Softrot“ wird darüber hinaus für Icons verwendet.
Dunkelrot (RGB 165/30/15)
Das Dunkelrot wird für Mouseover und Hover-Effekte verwendet.
Blau und Blauabstufungen
Neben dem „Softrot“ werden im Web vier verschiedene Blautöne verwendet.
Dunkelblau (RGB 0/45/85)
Dunkelblau kommt bei Menü-Icons, Pfeilen, Menü-Elementen, Buttons, Länderkarten und Hover-Effekten zum Einsatz.
Mittelblau (RGB 0/140/205)
Die Farbe Mittelblau findet in Hover-Effekten seinen Einsatz.
Volltonblau (RGB 34/117/208)
Dieses Blau wird für Fließtextverlinkungen verwendet.
Hellblau (RGB 235/245/255)
Hintergrundfarbe für Formulare und im Hamburger Menü als Hover-Effekt werden in einem Hellblau gesetzt.
Grauabstufungen
Grau spielt auf den Webseiten des DRK ebenfalls eine wichtige Rolle – mit unterschiedlichen Grautönen werden Inhalte strukturiert, getrennt, stärker betont und hervorgehoben.
Dunkelgrau (RGB 85/79/74)
Das Dunkelgrau wird für Fließtext eingesetzt.
Mittelgrau (RGB 180/180/180)
Linien, die Themenbereiche optisch voneinander trennen, erhalten einen mittelgrauen Farbton.
Hellgrau (RGB 239/238/234)
Als alternative Hintergrundfarbe zur Strukturierung von Inhalten wird das Hellgrau verwendet.
Ländergrau (RGB 217/217/217)
Das Ländergrau wird für die Weltkarte der nicht Krisen- oder Projekteländer Darstellung eingesetzt.
Schrift
Primärschrift des Webauftritts des DRK ist wie bei den Offline-Anwendungen auch die Schrift Helvetica Neue.
Als Fließtextschrift wird die Helvetica Neue auf der Webseite in den Schriftschnitten Light und Medium verwendet. Die Schriftfarbe des Fließtextes wird in dunkelgrau gesetzt. Für Headlines wird das Softrot verwendet. Links werden durch das Mittelblau gekennzeichnet.
Das Dokument Schrifteinbindung [dotx] liefert Ihnen nähere Erläuterungen zu der Einbindung der Schrift und den rechtlichen Bestimmungen.
Sollte die Verwendung der Standardschrift Helvetica Neue für die Webseiten nicht möglich sein, so nutzen Sie bitte folgende Ersatzschriften in angegebener Priorisierung:
- Als Ersatzschrift für die Helvetica Neue ist die Schrift Open Sans erste Wahl. Es handelt sich hierbei um eine kostenfreie Schrift, die der Linienführung der Helvetica Neue am nächsten kommt.
- Wenn diese nicht vorhanden ist, wird Arial verwendet.
- Wenn diese nicht vorhanden ist, wird Helvetica verwendet.
- Wenn diese nicht vorhanden ist, wird eine serifenlose Schrift verwendet.
Musterwebseiten
Um den Gliederungen und Einrichtungen des DRK die Umsetzung eines einheitlichen Designs für das digitale Erscheinungsbild so leicht wie möglich zu machen, wurde die DRK-Musterwebseiten entwickelt.
Allen DRK-Verbänden steht das Template DRK-Musterwebseiten zur eigenen Nutzung kostenfrei zur Verfügung. Die inhaltliche Struktur und die Inhalte selbst können von den Gliederungen individuell angepasst oder komplett ersetzt werden.
Die DRK-Musterwebseite stehen aktuell ausschließlich mit der TYPO3 Paketverwaltung „Composer“ zur Verfügung. Dies ermöglicht die Umsetzung des Rolling Update Verfahrens für die Musterwebseiten, über das regelmäßig technische Updates und auch Upgrades auf neue TYPO3-Versionen bereitgestellt werden.
Das Template (Dateistruktur und Musterinhalte) der DRK-Musterwebseiten zum Herunterladen finden Sie unten. Weitere Informationen erhalten Sie über die DRK-Service GmbH.