Abbildung Webseite Startseite | © Ray Bond/shutterstock.com

Startseite / Deutsches Rotes Kreuz / Online-Anwendungen / Webseite

Aktualisiert am 02.01.2019

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

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. Die Farbwelt der Print-Anwendungen finden Sie auf den Seiten der Basiselemente.

DRK-Rot

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.

DRK-Dunkelblau

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.

www.drk.de

Die Verwendung und der Einsatz der Farben, des DRK-Logos und der Typografie sind für die DRK-Webseiten vordefiniert und verbindlich. Wie diese Elemente konkret zum Einsatz kommen, können Sie auch unserem Webauftritt entnehmen.

zur Webseite

Grauabstufungen

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
Schrift

Primärschrift des Webauftritts des DRK ist wie bei den Offline-Anwendungen auch die Schrift Helvetica Neue.
Schriftschnitte

Helvetica Neue wird auf der Webseite in den Schriftschnitten Light und Medium verwendet.

Schriftfarbe

Die Schriftfarbe des Fließtextes wird in dunkelgrau gesetzt. Das "Softrot" wird für die Headlines verwendet. Links werden durch das Mittelblau gekennzeichnet.

Schrifteinbindung

Das Dokument Schrifteinbindung [docx] gibt Ihnen nähere Erläuterungen zu der Einbindung der Schrift und den rechtlichen Bestimmungen.
Ersatzschrift

Standardschrift für die Webseiten ist die Helvetica Neue. Sollte eine Verwendung dieser Schrift 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.
www.drk.de

Absolut verbindlich für Webseiten des Deutschen Roten Kreuzes sind die Ausführungen zu Logo, Farben und Typografie. Wie diese Elemente zum Einsatz kommen, können Sie auch unserem Webauftritt entnehmen.

zur Webseite
Bilder

Bilder

Bilder schaffen Emotionen und prägen die Wahrnehmung des visuellen Auftritts. Emotionaler Mittelpunkt jeder Seite unseres Internet-Auftritts bildet daher das Bild als „Bühnenbild“. Im Folgenden erfahren Sie mehr zum Einsatz von Bildern auf den Webseiten des DRK und erhalten einen Überblick über die gängigen Formate.

Bühnenbild (Startseite)

Das Format für das Bühnenbild auf der Startseite beträgt 1920 × 550 px.

Bühenbild (Übersichtsseite)

Das Bühnenbild auf der Übersichtsseite hat ein Format von 1920 × 640 px.

Artikelbilder

Die Contentbilder von Artikeln, Teasern oder Slidern haben eine Größe von 660 × 440 px.

Bildsprache

Bilder wecken Emotionen und prägen die Wahrnehmung des visuellen Auftritts. Bei aller Vielfalt an Themen, Aufgaben und Einsätzen gibt es grundsätzliche Empfehlungen, die zu beachten sind und in einer einheitlichen Bildsprache des DRK ihren Ausdruck finden.

zum Kapitel
Musterwebseiten

Musterwebseiten

Um eine durchgehende, einheitliche Gestaltung im Online-Auftritt zu erzielen, wurden Musterwebseiten entwickelt, die allen DRK-Verbänden zur Nutzung und individuellen Gestaltung der eigenen Verbands-Webseiten zur Verfügung stehen.

Musterwebseite DRK-Kreisverband

Die Mustervorlagen werden kostenfrei bereitgestellt. Eine individuelle Anpassung der Musterseiten für Ihren Verband ist entweder über den Webhosting-Rahmenvertragspartner möglich, kann aber auch in Eigenregie erfolgen.

Die Vorlagen zum Herunterladen finden Sie unten. Weitere Informationen erhalten Sie über die DRK-Service GmbH.

Infoblatt Domainanmeldung [pdf]

DRK-Service GmbH

Für den Internet-Auftritt Ihres Verbandes stellt Ihnen die DRK-Service GmbH Templatevorlagen zur Verfügung. Bitte nutzen Sie diese Vorlagen für ein einheitliches Erscheinungsbild unseres Verbandes. Sie finden die Vorlagen unter folgendem Link.

zur Vorlage

Kontakt

Sie benötigen spezielle Designvorlagen oder haben Fragen zum Erscheinungsbild des DRK? Melden Sie sich gern!

Carolin Fritsche

Carolin Fritzsche Projektmanagerin Corporate Design styleguide@drk.de 030 85404-150

Download

Folgende Dokumente und Vorlagen stehen Ihnen in diesem Kapitel als Download zur Verfügung: