Verwendung von Icons
Im Design System wird zwischen zwei unterschiedlichen Typen von Icons unterschieden:
- System Icons
- Marketing Icons
System Icons
Bei System Icons wurde als Basis die Library Font Awesome verwendet. Diese Icons kommen vor allem im Schrack Seconet Design in Applikationen zum Einsatz.
System Icons sind leicht daran zu erkennen, dass sie einfärbig sind. Außerdem sind sie deutlich kleiner und simpler gestaltet als Marketing Icons, da sie in erster Linie Funktionalitäten unterstreichen, aber nicht von ihnen ablenken sollen. Sie befinden sich in Buttons oder anderen Interaktionselementen und sollen den Verwendungszweck bildlich unterstützen.
Vereinzelt kann es auch zu Ausnahmen bei der Einfarbigkeit der System Icons kommen. Das ist der Fall bei Produkten für den Gesundheitsbereich, wo zum Teil zweifarbige Varianten eingesetzt werden.
Zu System Icons zählen sowohl jene, die dem User bereits bekannt sind, wie z.B. Chevrons oder das Search-Icon, als auch solche, die für spezifische Anwendungsfälle eigens designed wurden (Custom Icons).
Font Awesome bietet die Icons in mehreren Schnitten an. Im Design System werden die Schnitte Regular und Solid verwendet.
Grundsätzlich sollen überall Regular Icons verwendet werden. Lediglich in Interaktionselementen wie Buttons kommen aufgrund der besseren Erkennbarkeit Solid Icons zum Einsatz.
Marketing Icons
Marketing Icons kommen vor allem im Branding Allgemein, also auf Websites oder in Präsentationen, zum Einsatz. Sie unterscheiden sich von System Icons vor allem aufgrund ihrer Größe und Komplexität. Sie dienen als grafisches Element, um beispielsweise lange Texte aufzulockern und spiegeln stark die Marke Schrack Seconet wider.
Marketing Icons gibt es in hellblauer, dunkelblauer, und/oder roter Ausführung, die dem Kontext entsprechend angewendet werden. Hellblaue Marketing Icons sind für Corporate Marketing vorgesehen, während dunkelblaue für Produktmarketing-Zwecke geeignet sind.
Alle Marketing Icons gibt es sowohl für den Light Mode als auch für den Dark Mode. Hellblaue Icons liegen im Light Mode transparent auf und sind im Dark Mode weiß unterlegt. Dunkelblaue und rote Icons haben in beiden Modi einen weißen Hintergrund.
Zu den hellblauen Marketing Icons zählen auch Error Icons. Diese werden benutzt, um bestimmte Fehler, z.B. beim Zugriff auf eine Website, zu visualisieren.
