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.

Aufbau

Als Ergänzung zur Bildwortmarke wird die Produktkennzeichnung in Form einer Wortmarke zum Absender hinzugefügt. Um sich von der Bildwortmarke abzuheben, wird die Produktkennzeichnung in der BundesSans Bold in Versalien und mit einer Laufweite von 50 gesetzt. Die Produktkennzeichnung kann im Farbspektrum der Bundesregierung frei gesetzt werden. Hierbei ist auf die Barrierefreiheit zu achten.

Bei der Kennzeichnung des Produkts ist auf eine angemessen Textlänge zu achten. Dabei dient eine Zeichenzahl von etwa 20 als Orientierung. Sollte sich eine lange Produktkennzeichnung nicht vermeiden lassen, kann diese über mehrere Zeilen laufen.

Je nach Anwendung und verfügbarer Fläche kann der Mindestabstand zur Bildwortmarke erhöht werden. Für die interne Ansicht der Portale gilt: die Bildwortmarke und die Produktkennzeichnung können untereinander angeordnet werden, die Produktkennzeichnung kann zusammen mit der Minimalversion der Bildwortmarke genutzt werden oder, im Falle von sehr wenig Platz, kann die Produktkennzeichnung ausnahmsweise ohne Bildwortmarke verwendet werden. So kann für unterschiedliche Anwendungen die Produktkennzeichnung flexibel genutzt werden.

Positionierung nebeneinander, Zusatz Produktkennzeichnung einzeilig

Positionierung nebeneinander, Zusatz Produktkennzeichnung einzeilig

Positionierung nebeneinander, Zusatz Produktkennzeichnung zweizeilig

Positionierung nebeneinander, Zusatz Produktkennzeichnung zweizeilig

Positionierung untereinander (Einsatz nur innerhalb der Portalanwendung)

Positionierung untereinander (Einsatz nur innerhalb der Portalanwendung)

Positionierung untereinander (Einsatz nur innerhalb der Portalanwendung)

Positionierung untereinander  (Platzsparende Version, diese Versionen sind nur für interne Ansichten der Portale vorgesehen.)


Anwendungsbeispiele

Im Folgenden werden verschiedene Anwendungen der Produktkennzeichnung zur Veranschaulichung der Flexibilität dargestellt. 

Bookmark-Icon mit Produktkennzeichnung

Die Darstellungsform des Bookmark-Icons für die Option „Wortmarke“ orientiert sich an der bestehenden Gestaltung der Bookmark-Icons. Die Produktkennzeichnung wird im oberen Teil des Bookmark-Icons in Versalien platziert. Im unteren Teil folgt die Absenderkennzeichnung.

Zusätzlich gibt es die Alternative, die Hintergrundfläche in der gewählten Farbe der Produktkennzeichnung einzufärben. Der Ausschnitt des Bundesadlers wird in 80% der Hintergrundfarbe abgestuft.

Umsetzungsbeispiele


Bookmark-Icon „Wortmarke“

Bookmark-Icon „Wortmarke“


Bookmark-Icon „Farbe“

Bookmark-Icon „Farbe“



Bookmark-Icon „Wortmarke“

Bookmark-Icon „Wortmarke“


Bookmark-Icon „Farbe“

Bookmark-Icon „Farbe“



Exemplarische Darstellung des Bookmark-Icons auf dem Screen

Exemplarische Darstellung  des Bookmark-Icons auf dem Screen


Exemplarische Darstellung  des Bookmark-Icons auf dem Screen

Exemplarische Darstellung  des Bookmark-Icons auf dem Screen