Heute geht es um eines der wichtigsten, schönsten und nützlichsten Elemente in der Grafikwelt – DAS ICON und dessen Gestaltung.
Das Icon ist für viele die Meisterdisziplin der Gestaltung und damit haben sie nicht unrecht. Es gibt einiges zu beachten, wenn man ein gut funktionierendes Icon schaffen möchte. Dafür ist es aber auch vielseitig einsetzbar. Möchtest du zum Beispiel einen Sachverhalt auf einfache gestalterische Weise darstellen, eine Information symbolisch vermitteln oder deine App grafisch präsentieren? Dann sind Icons oder Pictogramme das Mittel der Wahl.
Ein Icon ist eigentlich nicht mehr als ein grafisches Symbol, dass zu Verdeutlichung einer Information benutzt wird. Wir kennen sie vor allem durch die grafische Oberfläche von Software, Internet Seiten und aus den App-Stores. Icon sind so wichtig, da sie als Markenzeichen fungieren und einen Wiedererkennungswert schaffen. Der Hauptzweck eines Icons ist es also, eine bestimmte Botschaft bildlich darzustellen und Orientierung zu schaffen. Denn meistens kann man durch das Motiv des Icons bereits erahnen was nach dem Klick darauf geschieht.
Um ein Icon zu erstellen solltest du aber einige Grundbedingungen beachten:
Halte es einfach
 (nicht zu viele Elemente) Beim Icon-Design gilt, je einfacher desto besser. Verzichte also auf zu viele Schmuckelemente und Überladungen. Gute Icons bestehen meistens nur aus einer Grafik, die durch ihren prägnanten Stil, für sich stehen kann. Dass kann ein Vögelchen wie bei Twitter sein oder ein Buchstabe wie bei Tumblr. Hauptsache es hat ein hohen Wiedererkennungswert.
Gewährleiste Verständlichkeit und Lesbarkeit
Kontrast, Qualität, Größe sind hier die Schlagworte. Bei der Icongestaltung steht die Botschaft im Vordergrund. Dein Icon muss also so gestaltet werden, dass seine Botschaft unmissverständlich klar wird. Schmuckelemente sind hier meistens überflüssig oder beeinträchtigen die Lesbarkeit.
__________________________________________________________________________________________
Als Grafiker kann man wohl nicht aus seiner Haut. Darum kommen hier nun ein kleiner Gestaltungsexkurs:
Achte auf Kontrast: Je größer die Farb- und Helligkeitsunterschied zwischen dem Hintergrund und dem Vordergrund des Icons, desto besser ist deren Lesbarkeit.
Vermeide Qualitätsverlust: Da Icons in verschiedenen Größen verwendet werden können, solltest du darauf achten, dass in jeder möglichen Größe ihre Aussagekraft gewährleistet bleibt. Achte also darauf, dass sie bei Vergrößerung oder Verkleinerung nicht verpixeln und so ihre Lesbarkeit einbüßen oder ihre Farben verwaschen wirken.
Passe die verschiedenen Größen an: Wie gerade schon erwähnt, spielt die Größe eine wichtige Rolle. Icons werden normalerweise in 16 x 16, 32 x 32, 48 x 48, Mac 128 x 128 und ab Windows Vista und Mac OSX 10.4 auch in 256 x 256 dargestellt. Die Herausforderung ist hier, die Botschaft es Icons auch in der kleinsten Größe zu vermitteln.
__________________________________________________________________________________________
Einheitlichkeit
Oftmals erstellt man anstatt nur eines Icons, ein ganzes Iconset. Dieses Iconset sollte durch bestimmte Eigenschaften, wie Farbe, Größe, Perspektive und Still als Gruppe zuerkennen sein.
genügende Differenzierung
Trotz der angestrebten Einfachheit, müssen Icons immer eine gewisse Eigenständigkeit aufweisen. Das heißt, sie müssen sich so sehr von einander unterscheiden, sodass keine Verwechslungsgefahr entsteht.
Wenig bis keine Texte oder Zahlen
Es ist ratsam komplett auf Texte in Icons zu verzichten. Erstens bindest du dein Icon so an eine bestimmte Sprache und zweitens kommt es oft zu Problemen, wenn das Icon verkleinert wird, da die Lesbarkeit nicht immer garantiert werden kann.
Ions zu erstellen ist oftmals eine Herausforderung, ich hoffe aber das ich dir durch diese Tips einen guten Ãœberblick und eine Hilfestellung geben konnte.
Viel spaß beim Gestalten rk