Digitale Medien

Hier finden Sie medienspezifische Regeln und Vorgaben für Webanwendungen, Social Media, Email-Signaturen und Apps.

Musterbeispiel Website.

Webanwendungen

Das visuelle Erscheinungsbild der Bundesregierung beruht auf einem einheitlichen Gestaltungsprinzip, welches in allen Webanwendungen für einen hohen Wiedererkennungswert sorgt.

2 Ansichten Smartphone-Screen mit Musterbeispiel Social Media.

Social Media

Der Social-Media-Auftritt ist ein probates Kommunikationsmittel für den schnellen Austausch im Internet.

2 Ansichten Desktop mit Musterbeispiel Emailabsender.

E-Mail

Das homogene Layout des meistgenutzten Kommunikationsmediums sorgt für die bestmögliche Rezeption und eine eindeutige Übermittlung des Absenders. 

2 Ansichten Smartphone-Screen mit Musterbeispiel App.

Apps

Eine konsistente und nutzerzentrierte Gestaltung hebt die Nutzerfreundlichkeit und damit die Akzeptanz aller Software-Applikationen der Bundesregierung.

2 Ansichten der Kennzeichnung digitaler Produkte: Webanwendung und mobile Webanwendung

Kennzeichnung digitaler Produkte

Um die Wiedererkennbarkeit bei digitalen Produkten und Portalen zu gewährleisten, liegen zwei unterschiedliche Darstellungsformen zur Kennzeichnung vor: die Option "Wortmarke" und die Option "Register", welche stets in Verbindung mit der Bildwortmarke verwendet werden.

Animation der Bildwortmarke/Minimalversion

Optional zur feststehenden originären Bildwortmarke kann auf Websites, auf denen ein Sticky Header zum Einsatz kommt, eine animierte Logoversion (auch „Responsive Logo“) erstellt und verwendet werden. In der Animation transformiert die originäre Bildwortmarke zur „Minimalversion“, die dann im Sticky Header stehen bleibt. Die Minimalversion der Bildwortmarke wird ausschließlich in Kombination mit der originären Bildwortmarke verwendet.



Vermaßung

Originäre Bildwortmarke/hier beispielhaft Auswärtiges Amt (oben) und Minimalversion (unten)



Bei der Transformation von originärer Bildwortmarke zur Minimalversion wird der Flaggenstab in seiner Höhe soweit verkleinert, bis dessen Unterkannte mit der Unterkante des Adlers abschließt. Gleichzeitig wird der Text weich ausgeblendet. Die Transformation von Minimalversion zu originärer Bildwortmarke verläuft in umgekehrter Art und Weise. Alle in der originären Bildwortmarke bestehenden Abstände bleiben während der Transformation und auch danach in der Minimalversion bestehen.

Die Umsetzung der interaktiven Animation muss für jede Website individuell programmiert werden. Als Grundlage für die Umsetzung sollte die jeweilige SVG-Datei aus dem Bildwortmarken-Archiv (Logokoffer) verwendet werden. Eine Beispielumsetzung findet sich innerhalb der Header-Komponente in der Component Library . Der Code zur Animation der Bildwortmarke (CSS und JavaScript) ist über die Developer-Tools des Browser zugänglich.