Anwendungs-Icons

Herleitung am Beispiel von Zoll Ident

Der Schlüssel symbolisiert Zugang oder Entsperrung sowie Sicherheit und Schutz. Das Symbol verkörpert somit auch die essenzielle Funktion der Authentifizierungs-Anwendung „Zoll Ident“: die Autorität zur Entsperrung von Zugriffsrechten, um auf sichere und geschützte Nutzerdaten Zugriff zu erlangen. Mit dem Symbol gelingt es das Vertrauen in die Nutzung zu festigen.

Die Schlüsselform ist klar erkennbar und gestalterisch grafisch und minimalistisch, was sie ideal für ein modernes und zukunftsfähiges Design macht.

Die Stilistik ermöglicht dabei, das Icon leicht erkennbar zu machen und die Gestaltung und Farbgebung des Hintergrunds dient dazu, einen Bezug zur Markenidentität des Zoll und des Bundes herzustellen.

Erster Eindruck

Das Icon ist oft das erste visuelle Element, das Nutzende mit einer Anwendung in Berührung bringt.

Identifikation

Ein einzigartiges und gut erkennbares Icon hilft dabei, die Anwendung schnell zu identifizieren und zu unterscheiden.

Vertrauen

Ein konsistent gestaltetes Icon vermittelt einen professionellen Eindruck und verspricht einen hohen Qualitätsstandard.

Funktionalität

Das Icon verweist direkt auf die Identität und den Charakter der Anwendung.

Skalierbarkeit

Das Icon muss in verschiedenen Größen lesbar und klar erkennbar bleiben.

Wiedererkennung

Das Icon sollte leicht erkennbar sein und sich von anderen Icons unterscheiden.

Konsistenz

Das Icon sollte mit dem Design, den Inhalten und der Funktionalität der Anwendung übereinstimmen.

Typografie

Worte und Bilder sind unterschiedliche Darstellungswerkzeuge, und wenn man sie mischt, dann führt dies oft zu einer verwirrenden und unklaren Erfahrung für Nutzende, die schwerer zu entschlüsseln ist.

Die klare und vereinfachte Formsprache des Icons wurde sorgfältig gestaltet, um eine benutzerfreundliche Anwendung in verschiedenen Kontexten und Größen zu gewährleisten. Es wurde speziell für die Nutzung auf Smartphones, Tablets und Bildschirmoberflächen für iOS und Android optimiert, um eine konsistente und intuitive Benutzererfahrung über diverse Oberflächen hinweg zu bieten.

Die Farben sind aus der Farbpalette der Marke Zoll abgeleitet und wurden sorgfältig gewählt.
Sie bieten nicht nur ein harmonisches und ästhetisches Gesamtbild, sondern stellen gleichzeitig eine Brücke zwischen dem UI-Design der Zoll Ident Anwendung und dem Zoll allgemein her.

Farbgruppe A wird hierbei im Hintergrund und Farbgruppe B für das eigentliche Symbol verwendet. So entsteht auch ausreichend Kontrast, um auf allen Formaten benutzerfreundlich zu sein.

Farbgruppe A

Farbgruppe B

Das Icon besteht aus drei Ebenen:

Ebene 1: Symbol
Ebene 2: Adlerschwinge
Ebene 3: Hintergrund

Die Unterteilung in Ebenen verleiht nicht nur eine visuelle Räumlichkeit, sondern erleichtert auch zukünftige [Animationen](/styles/animation/) wie beispielsweise Hover- oder Tilt-Effekte.
Das helle Symbol hebt sich deutlich von den beiden dunklen Hintergrundebenen und unterstützt damit zusätzlich die Barrierefreiheit des Icons.

Formsprache:

Die grafische Grundform des Symbols folgt dem Prinzip der Vereinfachung, um schnell als Schlüssel identifiziert zu werden. Diese Einfachheit gewährleistet zudem eine hohe Skalierbarkeit des Icons, was für die Vielseitigkeit und Konsistenz in verschiedenen Anwendungen entscheidend ist.

Positionierung:

Das Symbol wird auf dem Hintergrund zentriert positioniert.

Farben:

Das Symbol ist farblich bewusst in schlichtem weiss gehalten und bildet somit einen deutlichen Kontrast zur Farbpalette mit den Blautönen des Hintergrundes. Durch das Hinzufügen leichter Schatten erhält das Symbol eine dreidimensionale Wirkung und Haptik.
Auf weitere Farben wurde verzichtet, stattdessen wurden gezielt verspielte Aussparungen eingebaut, die mehr von der Adlerschwinge im Hintergrund preisgeben und damit das Erkennen dieser komplexer Form vereinfachen.

Formsprache:

Die Form der Adlerschwinge und der gewählte Ausschnitt folgt den Vorgaben aus dem Styleguide der Bundesregierung zu dessen Verwendung.
Als Markenzeichen schafft diese Form auch einen klaren Bezug zum Zoll.

Farbe:

Die Adlerschwinge soll nicht mit dem Symbol konkurieren, sondern eine eigene zugrundeliegende Botschaft tragen – die Verbindung zur Bundesregierung.
Daher wird die Adlerschwinge in Nachtblau und transparent (25%) dargestellt. Durch diese Farbgebung hebt sich die Adlerschwinge sichtbar vom eigentlichen Hintergrund ab und bildet gleichzeitig einen deutlichen Kontrast zum Symbol.

Die Hintergrundfarbe ist Cyanblau und bildet somit einen deutlichen Kontrast zur Farbe des Symbols. Durch die Verwendung dieser einheitlichen Farbe in allen Anwendungen erzielt man einen hohen Wiedererkennungswert der Zugehörigkeit zum Zoll.

Sollte das Icon in einem Kontext verwendet werden, der keinen Hintergrund vorsieht, dann muss darauf geachtet werden, dass das Icon auf einer möglichst dunklen Oberfläche platziert wird.

Um eine einheitliche Skalierung auf allen Anwendungsgrößen zu gewährleisten, folgt die Platzierung des Icons einer klaren Formel.

75%-Formel

Die Höhe des Symbols entspricht maximal 75% der Gesamthöhe des Artboards. Beispielsweise wird bei einem Artboard mit einer Größe von 1024 x 1024 px das Icon proportional auf eine Höhe von 765 px skaliert. Im Vergleich dazu ändert sich die Icon-Höhe bei einem Artboard von 512 px auf 384 px.

Die Ausrichtung ist stets zentriert und gewährleistet ausreichend Raum um das Symbol herum, um die Adlerschwinge erkennbar zu machen und visuell ansprechend zu wirken.

Das Basisgrid des Icons orientiert sich am iOS-Grid. Dabei dienen Bounding Boxes sowie Keylines lediglich der Orientierung. Das Icon wird innerhalb der definierten Keylines mittig zentriert platziert. Diese Methode gewährleistet Flexibilität bei der Umsetzung zukünftiger Icons.