Icon Design im Fokus: 18 Beispiele und viele Tipps

Schlecht gestaltete Icons bieten keinen Mehrwert und können den Aufenthalt auf einer Website eher unangenehmer als bequemer machen. Das ist für mich Grund genug, um mich erneut der Gestaltung von Icons zu widmen und die Thematik zu vertiefen.

• von Lennart Prange

Wir kennen Icons von überall: Dem Straßenverkehr, Programmen, Internetseiten, CD-Player usw. Icons sind ein wunderbares Mittel, um dem Nutzer Orientierung zu bieten und eine Internetseite visuell aufzuwerten. Mehr noch: Gut gestaltete Icons können dem Nutzer dabei helfen, sich effizienter durch die Website zu bewegen.

Schlecht gestaltete Icons bieten keinen Mehrwert und können den Aufenthalt auf einer Website eher unangenehmer als bequemer machen. Das ist für mich Grund genug, um mich erneut der Gestaltung von Icons zu widmen und die Thematik zu vertiefen.

Tut mir übrigens einen Gefallen: Wenn ihr Icons verwenden wollt, sie aber nicht selber erstellen könnt, benutzt nicht die, die man auf jeder zweiten Website sieht. Danke.

Kommentare und Social Bookmarks würden mich sehr freuen. Viel Spaß mit dem Beitrag.

Tipps zur Gestaltung von Icons

Immer skizzieren

Dieser Tipp ist zwar subjektiv, aber ich habe festgestellt, dass es immer besser ist, die Icons zu skizzieren. Auf dem Papier kann ich besser mit Perspektive und Schatten umgehen und es geht vor allem schneller, als alles sofort sauber am Computer auszuarbeiten.

Logisch

Icons sollten immer logisch sein. Ihr Sinn muss sich schnell und ganz von alleine ergeben. Optimal ist es, wenn der Nutzer den Text daneben überhaupt nicht braucht.

Denkt über die Zielgruppe nach

In verschiedenen Ländern gibt es verschiedene Briefkästen. Ihr müsst euch um solch einfache Dinge Gedanken machen, damit sich der Sinn eures Icons dem Betachter erschließt.

Benutzt Farben

Und zwar andere, als auf der Website benutzt werden. Icons, die im gleichen Farbschema gestaltet wurden wie die Website, werden schnell und leicht übersehen und verlieren ihre Wirkung als optische Orientierungspunkte und ihren Wert als unterstützende Grafiken, die dem Nutzer den Aufenthalt erleichtern. Experimentiert am besten mit komplementären Farbschemata.

Klarer Unterschied zwischen Icons

Die Icons auf einer Website sollten sich nicht zu ähnlich sein. Man muss sie schnell und einfach außeinanderhalten können, damit keine Verwirrung entsteht und sie überhaupt einen Mehrwert haben.

Konstanz

Auch wenn die Icons sich untereinander nicht zu ähnlich sein sollten, müssen sie doch einige gemeinsame Merkmale haben. Das ist zum einen die Perspektive, aus der sie betrachtet werden. Ganz schlimm ist es, wenn sich zwei -und dreidimensionale Icons abwechseln. Außerdem sollte das Licht immer aus der gleichen Richtung kommen und alle Icons sollten, falls vorhanden, die gleichen Reflektionen aufweisen. Die Konstanz bei der Gestaltung von Icons ist ein sehr wichtiger Punkt und auch einer der wichtigsten Argumente dafür, dass man seine eigenen Icons gestalten sollte. Sonst sucht man sich die Passenden aus verschiedenen Sets zusammen und hat am Ende einen nicht zusammenpassenden Salat.

Konzentration auf das Wesentliche

Icons sollten, wie schon öfters geschrieben, schnell verstanden werden. Deswegen muss man alle unnötigen Elemente weglassen. Je komplexer das Icons wird, umso länger braucht der Betrachter auch, um es zuzuordnen.

Je größer desto komplexer und andersrum

Kleine Icons sollten eindimensional sein und kaum Details enthalten. Wenn nur wenig Platz vorhanden ist, muss man fast alle grafischen Spielereien weglassen. Wenn das Icons größer wird kann es auch gerne Licht und Schatten enthalten und dreidimensional daherkommen. Dann wird auch ein zweites Element möglich und es wird immer wichtiger, auch auf die kleinsten Details zu achten.

An die Standards halten

Icons gibt es ja schon lange und aus dem Grund haben sich verschiedene Standards etabliert, die auch nicht verändert werden sollte. “Never change a running system”, die Meinung vertrete ich nicht immer, ist in dem Fall aber total richtig. Die Standards wurden nicht nur im Internet sondern auch von anderen Applikationen und auch von Straßenschildern definiert.

Text und Icons: Keine gute Mischung

Text sollte niemals in Icons verwendet werden. Erstens sind diese Icons auf jeden Fall nicht länderübergreifend zu verwenden, zweitens sollen Icons ja gerade den Text ersetzen und dritten ist der Text meistens schon bei geringen Größenänderungen nicht mehr lesbar. Also: Auf Text solltet ihr immer verzichten.

Text neben den Icons

Selbst wenn euer Icon eurer Meinung nach idiotensicher ist, solltet ihr es fast nie ohne einen beschreibenden Text stehen lassen. Falls irgendwer das Icon nicht versteht, wird ein Teil der Seite nutzlos.

Benutzt niemals zu viele Icons

Icons sollten mit Vorsicht genossen und sparsam verwendet werden. Sie greifen, je nach dem wie groß und auffällig sie sind, auch immer in die Hierarchie der Seite ein und bestimmen auch den Weg des Auges. Wenn ihr zu viele Icons verwendet, vor allem wenn sie gleich groß sind, wird eure Seite eher unübersichtlich wirken.

18 Beispiele für die Verwendung von Icons

Jetzt haben wir die Theorie behandelt (und hoffentlich verinnerlicht). Nun ist es an der Zeit, sich ein paar der zahlreichen Beispiele im Netz anzugucken. Wenn ihr die Icons betrachtet, versucht sie auch unter den oben genannten Punkten anzuschauen und entscheidet, ob sie qualitativ hochwertig sind oder nicht.

Coda

Redwhale

Hyperpot

dooxhost

Strutta

Beehive

Wapple

CMSYOURPSD

MIND360

My Starbucks Idea

Tweetbots

Slipstreem Aerodynamics

vombero

PSDtuts

Bellpark

Letter Llama

YouAre

FileShare HQ

33 Kommentare