Infografik Userinterfacedesign Piktogramme Icon Design 01

10 Schritte für gutes Icon Design

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

Grundregeln Icon Design

Iconserien müssen einheitlich sein

Alle Icons einer Anwendung sollten in Form und Stil einheitlich gestaltet sein. Dennoch soll jedes einzelne Icon unverwechselbar definiert sein.Icons sollen sich nach Standards richten. Nach Möglichkeit sollte sich die Gestaltung an gewachsenen Standards orientieren.

Icons sollen aussagekräftig sein

Ein Stilmittel bei der Gestaltung aussagekräftiger Icons ist die Übertreibung, um das Wesentliche der mit dem Icon verknüpftenFunktion deutlich zu machen.

Icons sollen sich nach dem Kontext richten

Der Kontext, also das Umfeld, in dem das Icon auf der Bedienoberfläche erscheint, spielt eine wesentliche Rolle. Es gibt hervorragende Icons, die jedoch ihre Klarheit und Unverwechselbarkeit nur im Kontext mit anderen Symbolen erlangen.

Icons sollen sich nach der Zielgruppen orientieren

Oft ergibt sich die Bedeutung eines Icons erst im Zusammenspiel von Kontext und individueller Betrachtung. Deshalb ist die spätere Zielgruppe beim Entwurf eines Icons stets mit einzubeziehen. So können beispielsweise Symbole, die in unseren Kulturkreisen eine ganz bestimmte Bedeutung haben, in einem anderen Kulturkreis völlig andere Assoziationen hervorrufen.

Gute Icons

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

10 Schritte für gutes Icon Design

  1. Setzen Sie sich mit den Menschen auseinander, für welche Sie die Icons gestalten. Welches Vorwissen bringen sie mit? Gibt es Iconsysteme, mit welchem sie schon zu tun haben? Gibt es Farben, die in ihrem Umfeld bereits belegt sind? Gibt es technische oder formale Vorgaben, die Sie berücksichtigen müssen?
  2. Entwickeln Sie Icons auf der Basis des visuellen Gesamtsystems, in dessen Kontext die Icons später eingesetzt werden. Übernehmen Sie alle Attribute, die bereits vorliegen – Schrift, Rastersystem, Farbklima, Strichstärken etc.
  3. Konzipieren und gestalten Sie für die Grösse und Anwendung ,für welche die Icons benötigt werden. Auch wenn sich Vektor-Icons beliebig skalieren lassen, funktionieren die Icons nicht in jeder Grösse. Wenn ein Icon bei einer Grösse von 512 px gut aussieht, funktioniert dies bei einer Grösse von 20 px nicht unbedingt.
  4. Gestalten Sie Icons einfach und ikonenhaft. Auch wenn Betriebssystem-Icons eine Grösse von 512 px aufweisen können ,müssen die Icons nicht wie Gemälde gestaltet werden.
  5. Achten Sie nicht zu stark auf Trends und Effekte, sondern investieren Sie die Zeit in die Qualität der Hauptaussage des Icons.
  6. Fangen Sie die Eigenschaften des Objekts ein. Dekonstruieren Sie das Objekt. Analysieren Sie die Eigenschaften, Einzelteile, Grundfarben und Grundformen. Zeichnen Sie das Objekt einmal mit geschlossenen Augen oder beschreiben Sie es, ohne denNamen zu nennen.
  7. Gute Icons funktionieren auch in einer Farbe.
  8. Achten Sie auf den konsequenten Einsatz von Perspektive, Strichstärken, Farben, Proportionen, Lichtführung, Schatten.
  9. Achten Sie auf eine einfache und konsequente perspektivische Darstellung und berücksichtigen Sie dabei den späteren Einsatzort der Icons. Viele Hersteller haben die Parameter in ihren Style Guides definiert, so dass alle Icons später harmonieren und beliebig kombiniert werden können.
  10. Halten Sie alle Erkenntnisse aus der Analyse in einem kleinen Style Guide fest. Dieser Icon Style Guide dient Ihnen anschliessendals Checkliste.

Aus der Praxis

Folgende Vorgehensweise hat sich beim Entwurf von Icons bewährt:

  • Definieren Sie den Einsatzort und den Zweck des Icons.
  • Beschreiben Sie die Zielgruppe und berücksichtigen Sie dabei deren Vorkenntnisse und Erfahrungen.
  • Dekonstruieren Sie das Objekt, die Tätigkeit, Aktion, für welche das Icon später stehen soll und isolieren Sie die stärksten Attribute
    Skizzieren Sie das Icon mit geometrischen Grundformen auf Papier.
  • Testen Sie die Skizze bei Vertretern der Zielgruppe, indem Sie das Icon zeigen und nach seiner Bedeutung bzw. Funktion fragen
  • Erstellen Sie das Icon mit einem geeigneten Editor und einem geeigneten Raster in der effektiv benötigten Grösse. Geben Sie sich Regeln vor bezüglich Strichstärken, Farben, Perspektive,Grundformen, Proportionen, Radien, Lichtführung. Soll das Icon in verschiedenen Grössen funktionieren, so beginnen Sie mit der kleinsten Grösse. Hinzufügen ist immer einfacher als weglassen.
  • Führen Sie erneut Nutzertests durch, bei denen Sie die Erwartungen und Wahrnehmungen der Benutzer sowie die Erlernbarkeit des Icons prüfen.

Fragenkatalog:

  • Wo werden die Icons später eingesetzt?
  • Welchen Zweck müssen die Icons erfüllen?
  • Gibt es bereits Icons oder Symbole (in Ihrem Umfeld), die eine ähnliche Bedeutung haben?
  • Gibt es bereits Icons oder Symbole (in Ihrem Umfeld), die sich klar von dem zu erstellenden Icon abheben müssen?
  • Gibt es Objekte, Tätigkeiten, Vorgehensweisen, die sinnbildlich für das Icon stehen könnten?
  • An welche Farbe(n) denken Sie, wenn Sie dem Icon nur eine Farbe zuweisen könnten? Weshalb diese Farbe(n)?
  • Beschreiben Sie in einem Satz oder in Stichworten, welche Informationen oder Attribute das Icon transportieren sollte.

Iconset Anbieter

 

Icons als Teil des Design Systems