Digital
Information
Design.

Icon Information Design white Designsensor AG

ICON DESIGN

Markenzeichen und bildliche Botschaft

Ein Icon ist ein grafisches Symbol, das zur Verdeutlichung einer Information benutzt wird. Icons fungieren als Markenzeichen und schaffen einen Wiedererkennungswert. Der Hauptzweck eines Icons ist es, eine bestimmte Botschaft bildlich darzustellen und Orientierung zu schaffen.

Teilen macht Freude

Weshalb setzen wir Icons ein?

Icons…
  • gewährleisten eine schnelle Wiedererkennbarkeit
  • haben eine hohe Eigenständigkeit
  • sind sprachunabhängig/universell
  • haben einen geringen Platzbedarf
  • unterstützen den Betrachter bei der Informationsaufnahme

Auf was achten wir beim Erstellen eines Icon-Sets?

Orientieren Sie sich am Raster und gestalten Sie immer mit den selben Proportionen und Verhältnissen. So erhalten Sie ein einheitliches Icons-Set.
Aktuell werden die meisten Icons für Browseranwendungen als Vektordatei auf einem Raster von 24 x 24 Pixel erstellt und als SVG oder Iconfont den Entwicklern geliefert.
Obschon SVG-Icons beliebig skalierbar sind (also ohne Qualitätsverlust), sollten diese in der originalen Einsatzgrösse an den Entwickler übergeben werden, da bei einem skalierten Icon die Strichdicke allenfalls nicht mehr ins Erscheinungsbild passt.
Dateiformate für die Umsetzung
Heute werden Icons meistens im SVG-Format implementiert, seltener als PNG (Achtung: PNGs immer in doppelter Grösse einbinden für Retina-Displays).
Icons können auch als Icon-Font eingebettet werden, technisch funktioniert das Iconset wie ein normaler Font. Bei der Zusammensetzung eines Icon-Fonts hilft z.B. «Fontello».

Was machen «gute» Icons aus?

Gute Icons bestehen meistens nur aus einer Grafik, die durch ihren prägnanten Stil für sich stehen kann.
Das kann ein Vögelchen wie bei Twitter sein oder ein Buchstabe wie bei Facebook. Hauptsache ist der grosse Wiedererkennungswert.
Halte es einfach

Beim Icon-Design gilt: je einfacher desto besser.

Schaffe formale Einheitlichkeit
Icons in einem digitalen Produkt sollen durch bestimmte Eigenschaften wie Farbe, Grösse, Perspektive und Stil als Gruppe zu erkennen sein.
Vermeiden Verwechslung durch Eindeutigkeit
Trotz der angestrebten Einfachheit müssen Icons immer eine gewisse Eigenständigkeit aufweisen, so dass keine Verwechslungsgefahr besteht.
Gestalte ohne Texte oder Zahlen
Es ist ratsam, komplett auf Texte und Zahlen in Icons zu verzichten.
Beachte Standards
Nutze etablierte Icons, die die Nutzer kennen.

Status-Icons

Im Screen Design dienen Icons oft als Navigationselemente, weshalb es wichtig ist, sich bereits im Vorfeld Gedanken über die verschiedenen Status-Darstellungen zu machen.

Folgende Status sollten pro Icon definiert werden:

  • Normal (Inaktiver Zustand)
  • Hover (Feedback bei Mouseover)
  • Focus (Feedback bei Bedienung mit Tastatur, resp. Tabulator)
  • Active (Aktiver Zustand)
  • Disabled (Sichtbar, aber nicht anklickbarer Zustand)

Spezielle Icon Anwendungen

Favicon
Ein Favicon ist ein sehr kleines, 16 × 16 oder 32 × 32 Pixel grosses Icon, Symbol oder Logo, wie es typischerweise in der Adresszeile eines Webbrowsers links von der URL angezeigt wird. Das Favicon dient meist dazu, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen.
App Icon
Jede App braucht ein App Icon mit Wiedererkennungswert für den App-Store und den Homescreen. Eines, das sich von den unzähligen anderen Mitbewerbern abhebt.

 

Loader Icon
Im Loader Icon werden häufig Elemente aus dem Logo aufgenommen. Sie dienen zur Überbrückung von Wartezeiten.

Inspiration

Ob das Iconset minimalistisch, mit Schatten, mehrfarbig, in 3D, usw. erstellt wird, hängt vom gesamten Designkonzept ab.
Inspiration für diverse Icon-Typen findet man überall. Zum Beispiel bei Pinterest:

Oder auf diversen Fotoportalen: