Apps

In diesem Kapitel finden Sie Informationen zur Gestaltung von Apps sowie grundlegende Hinweise zur Optimierung der Nutzerfreundlichkeit.

Grundsätzlich wird bei der Gestaltung von Apps zwischen originären Apps der Bundesbehörden, Produkt-Apps und Kampagnen-Apps unterschieden. Die Gestaltungsregeln für Kampagnen-Apps finden sich im Kapitel Kampagnen-Medien.

Typografie

Hinsichtlich des Gebrauchs von Schriften gelten innerhalb von Apps die typografischen Regeln für digitale Anwendungen. Da die Benutzung mobiler Geräte mit unterschiedlichsten Beleuchtungssituationen einhergeht, ist dafür Sorge zu tragen, dass sowohl ausreichende Schriftgrößen, als auch Kontraste verwendet werden, um eine gute Lesbarkeit zu gewährleisten.

Farbe

Apps der Bundesregierung, bzw. von Bundesministerien und Bundesbehörden sollten in der Farbgebung ausschließlich auf die im Kapitel Farben ausgewiesenen RGB-Farben zurückgreifen.

App-Icon

Der erste Kontakt zu einer App führt über das App-Icon. Auch im nachfolgenden Gebrauch spielt es eine zentrale Rolle zur Identifizierung und Wiederauffindbarkeit. App-Icons werden je nach Endgerät und Betriebssystem unterschiedlich dargestellt.

Bei der Gestaltung und Erstellung eines App-Icons ist es daher wichtig sicherzustellen, dass es in allen aktuellen Darstellungsvarianten gut funktioniert. Insbesondere sollte dafür Sorge getragen werden, dass sich das wesentliche Bildelement im Zentrum des Bildes befindet, sodass durch einen eventuellen Beschnitt keine wichtigen Bildteile abhanden kommen.

1. Originäre Ministeriums- bzw. Behörden-Apps

Das App-Icon der Bundesregierung besteht aus dem schwarzen Bundesadler auf weißem Grund und dem Flaggenstab und entspricht damit visuell dem Social-Media-Profilbild.

iOS runde Darstellung, Android eckige Darstellung

Darstellung des App-Icons für originäre Ministeriums- bzw. Behörden-Apps unter iOS 12 (links) und Android 10 (rechts).

2. Produkt-Apps

Einige von Ministerien und anderen Bundesbehörden herausgegebene Apps kommunizieren zu einem eigenen Produkt, einem bestimmten Thema oder zu einer Veranstaltung. Bei der Gestaltung von App-Icons für diese Produkt-Apps sollte darauf geachtet werden, dass das Icon Rückschlüsse auf den Inhalt der App zulässt. Die Farbgebung und die eventuell eingesetzte Typografie sollten am Corporate Design der Bundesregierung ausgerichtet sein.

Hallo Politik: Adlerschwinge, G20: Bildwortmarke G20

Beispiele zweier App-Icons von Produkt-Apps: „Hallo, Politik“ ©Bundesregierung (links) und „G20“ ©Bundesregierung (rechts)

Ist die App einer bestimmten Kampagne zugeordnet, finden Sie hier weitere Informationen.

App-Icon Downloads

App-Icons werden bei der Programmierung der App im Programm-Code hinterlegt. Oftmals werden dafür Icons in unterschiedlichen Abmessungen und Dateiformaten benötigt. Um die jeweils aktuell benötigten Größen und Formate effektiv erzeugen zu können, steht hier eine Mastervorlage für die Programme Adobe Illustrator und Adobe XD zum Download bereit.

Launch-Screen

Der Launch-Screen ist eine Ansicht, die während des Startvorgangs einer App angezeigt wird. Apps sollten den Launch-Screen nutzen, um den Absender der App deutlich zu kommunizieren. Dies ist auch dann empfehlenswert, wenn die App aufgrund einer kurzer Start-Zeit eigentlich keinen Launch-Screen benötigen würde. Die Einblendung des Launch-Screens sollte für mindestens drei Sekunden sichtbar sein, damit seine Inhalte wahrnehmbar sind.


Gestaltung


Vermaßung der Bildwortmarke „Die Bundesregierung“ oben links in einer Höhe von 135 DP und einem Randabstand von 1 Adler.

Mögliche Layout-Variante für die Gestaltung des Launch-Screens mit Angabe der Schutzzone und Größe der Bildwortmarke.


Der Launch-Screen sollte die Bildwortmarke des Absenders sowie den Titel der App beinhalten. Bei der Platzierung der Bildwortmarke ist immer die Schutzzone zu beachten. 


Anwendungsbeispiel

Links: oben Bildwortmarke auf Verlauf von Weiss zu Hellblau darunter Text: „Herzlich Willkommen“, im Hintergrund Adlerschwinge. Rechts: Text: „Hallo Politik“ auf dunkelblauem Fond mit Adlerschwinge, unten Identitätsbereich mit Bildwortmarke.

Beispiele von Launch-Screens bestehender Apps „Bundesregierung“ ©Bundesregierung (links) und „Hallo, Politik“ ©Bundesregierung (rechts).