Ikonografie
Icons sind ein wesentlicher Bestandteil des UIs und unterstützen die Benutzerführung auf unseren digitalen Kanälen. Unsere Icons kennzeichnen Aktionen/Funktionen und wichtige Informationen auf der Benutzeroberfläche.
Inhalt
Klare & moderne Icons
Durch die Verwendung von einfachen Metaphern, stellen wir sicher, dass diese für unsere Nutzenden auf einen Blick verständlich bzw. lernbar sind.
Daher setzen wir bei jedem Icon auf eine reduzierte, freundliche und moderne Formgebung. Sie sind in der Grundform linear und zweidimensional. Die Farben der Icons verhalten sich analog des UI-Prinzips «Farben».
Wir unterscheiden zwischen:
- Systemicons (Unterstützung einer entsprechenden Funktion)
- Erkläricons (Unterstützung eines entsprechenden Inhalts)
System-Icons
Die Systemicons sind erhältlich in zwei Grössen und kommen je nach Kontext in entsprechender Grösse zum Einsatz. Sie sind interaktiv und dienen dazu Aktionen auszulösen, die Aussage in Buttons oder Links zu unterstützen.
Beispiel - Unterstützung Links
Beispiel - Unterstützung Aussage in Buttons
DO: Die Icons innerhalb der Button sind immer rechts vom Label platziert und in der gleichen Label‑/Text‑Farbe.
DON'T: Die Positionierung der Icons innerhalb des Button darf nicht verändert werden.
Themen-Icons (Piktogramme)
Sie dienen dazu, dem Benutzer auf eine schnelle Art und Weise den Inhalt visuell zu vermitteln und die Seite attraktiv und auflockernd zu gestalten. Diese Icons sollen schnörkellos sein ohne auf Details zu verzichten. Wir erstellen sie grundsätzlich in einer Grösse im Rahmen 48×48px. Die Farbsystematik folgt dem UI Prinzip «Farben».
Beispiele
Ansprechpersonen
Tina Tanner
UX/UI-Designerin
Giovanni Laportosa
UX/UI-Designer