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

thumb 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

5

Redwhale

6

Hyperpot

7

dooxhost

8

Strutta

9

Beehive

10

Wapple

12

CMSYOURPSD

13

MIND360

14

My Starbucks Idea

15

Tweetbots

16

Slipstreem Aerodynamics

17

vombero

18

PSDtuts

19

Bellpark

1

Letter Llama

2

YouAre

3

FileShare HQ

4

33 Kommentare

  1. idealic
    2. Juni 2009 um 09:27 Uhr

    Artikel werden besser, bekommen mehr Tiefe, weiter so 😉

  2. Design made in Germany
    2. Juni 2009 um 09:49 Uhr

    Statt “Text neben den Icons” find ich “Tooltips über den Icons” auch ok..

    • Lennart Prange
      2. Juni 2009 um 10:32 Uhr

      Jo, hast recht. Das ist ebenfalls in Ordnung.

  3. robertfork
    2. Juni 2009 um 10:06 Uhr

    guter Beitrag. Beinhaltet wohl das meiste was man wissen muss. Die meisten deiner Beispiele find ich auch gut ausgewählt.

    Hätte mal einen Wunsch, ob du dich vielleicht mal über Gewerbe und Verträge, etc. als Webdesigner informieren könntest und darüber etwas schreiben könntest. Ich denke das Problem werden die meisten bei Ihren Anfängen haben, dass sie nicht wissen wie viel sie verdienen dürfen OHNE Gewerbe und was sie alles tun dürfen, so auch ich =D

    • Lennart Prange
      2. Juni 2009 um 10:36 Uhr

      Danke.

      Ich gebe ungern Rechtsberatung. Vielleicht spreche ich das Thema noch mal an. Kann ich aber nicht versprechen.

  4. Marvin
    2. Juni 2009 um 10:42 Uhr

    sehr gute Beispiele muss ich sagen! Die Amis haben im allgemeinen viel mehr Icons als wir, und dann auch noch viel größer. deutsches Webdesign is meistens so laahhmmm 😉

    • André Nitz
      3. Juni 2009 um 11:19 Uhr

      Ich muss dir teilweise bei diesem Thema recht geben – die Ami’s haben für uns Designer ein wesentlich ansprechenderes Design. Nur haben die Ami’s auch eine andere Vorstellung von Usability als die meisten Deutschen Internetnutzer.

      Viele meiner Kunden lehnen diese Art von Webdesign strikt ab, weil sie sagen das sie damit nicht zurecht kommen und ihnen das große und bunte eindeutig zu knallig ist.

      Bin persönlich aber auch deiner Meinung – die Ami’s haben deutlich mehr fürs Auge 😉

  5. Thomas Aull
    2. Juni 2009 um 11:05 Uhr

    Gute Zusammenfassung und schöne Beispiele. Ich benutze Icons auch sehr gerne, habe mich bisher aber immer etwas gedrückt selbst welche zu entwerfen und umzusetzen. Ist aber eine spannende Geschichte und oft auch eine hohe Kunst gute und einprägsame Icons zu gestalten.

  6. Magnus
    2. Juni 2009 um 11:27 Uhr

    Guter Artikel, gefällt mir, aber deine Vorschaubilder mit den Highlights sind schrecklich, lieber in Zukunft normal einbinden.

    • Lennart Prange
      2. Juni 2009 um 11:43 Uhr

      Danke. Nächstes Mal binde ich sie wieder normal ein. Ist sonst auch viel zu viel Arbeit 😉

    • Marvin
      3. Juni 2009 um 12:30 Uhr

      Muss ich ihm rechtgeben, das Ganze verschwommene irritiert ein wenig…

  7. Sergej Müller
    2. Juni 2009 um 11:58 Uhr

    Langsam konkurriert dein Blog mit SmashingMagazine. Respekt.

    • Lennart Prange
      2. Juni 2009 um 13:02 Uhr

      Danke 😀 Das Lob nehme ich doch gerne. Jetzt müssen nur noch die Besucher und Feeleserzahlen auf das Niveau kommen 😀

  8. missfits
    2. Juni 2009 um 12:59 Uhr

    Hab ich Halus, oder hast Du Deinen Feed gekürzt? 🙂

    Dein Post hier schafft es auch bei mir direkt in die “ist-wertvoll-also-aufheben”-Schublade… und jetzt komme ich Dich wohl noch öfter besuchen. 😉

    • Lennart Prange
      2. Juni 2009 um 13:02 Uhr

      Feed gekürzt? Wo, wie, was? Danke 😉

      • missfits
        2. Juni 2009 um 14:40 Uhr

        Ich HATTE Halus… sorry. 😉

  9. Rata
    3. Juni 2009 um 14:23 Uhr

    Whow!
    Ich lese ja schon länger mit, aber hier hast Du ein heißes Eisen sehr delikat geschmiedet, idealic drücht das schon richtig aus.
    Danke schön für Deine Fleissarbeit; eigene Überlegungen zu dieser Thematik stehen bei mir nämlich gerade an 😉

    Lieber Gruß
    Rata

  10. Alexandra
    4. Juni 2009 um 08:12 Uhr

    Super Überblick und gute Tipps zum Thema Icon Design.
    Ich schau immer wieder gerne hier vorbei… weiter machen 🙂

  11. Schorschi
    8. Juni 2009 um 19:04 Uhr

    Sehr schöner Artikel, gerade über das Erstellen. Aber was ich noch viiel interessanter fände sind diese beiden Punkte:
    1. HOW TO create icons (eine Art Tutorial für PS etc.)
    2. eine Liste von kostenlosen Iconsets!!!!!!!

    Vielleicht kommt ja noch einmal ein Beitrag dazu. Fände es klasse, gerade zum 2. Punkt!

    • Lennart Prange
      8. Juni 2009 um 20:46 Uhr

      Danke. Die Liste von kostenlosen Icon Sets werde ich hier wahrscheinlich nicht anbieten. Davon finde ich täglich gefühlte 10 Stück in meinem Feedreader. Zu den Tutorials: Weiterbilden #2: Icon-Design. Vielleicht findest du da etwas Interessantes.

  12. Jessica
    28. Juni 2009 um 10:57 Uhr

    Absolut lesenswerter Artikel und die Beispiele sind auch wirklich schön!

    Icons sind auch wie man sieht ein absoluter Renner, selber jedoch welche zu kreieren ist nicht ganz so einfach, besonders wenn es keine oft genutzten sind ist es wirklich schwierig sie verständlich umzusetzen.

    Wenn ich welche “bastle” zeichne ich sie auch zuerst, schaue mir dann vergleichsweise ähnlich konstruierste an und suche “Testpersonen”.

    P.S. schöner Blog, da schau ich doch gern mal wieder vorbei 🙂

  13. Kevin
    3. Juli 2009 um 02:22 Uhr

    Ich persönlich nutze oft Icons aus Coquette-Serie. Sind wirklich unheimlich hochwertig.

    Denke wo und in welcher Form Icons verwendet werden, hängt immer ein wenig vom Designer selbst ab.

    Ach bevor ich es vergesse: Super Artikel:)

  14. Micha
    31. August 2009 um 11:32 Uhr

    Sehr schöner Beitrag und sehr richtig. Schöne Icons gehören zu den Feinheiten, die ein Weblayout erheblich aufwerten können. Leider weiß der Kunde den Aufwand für solche “Kleinigkeiten” oft nicht zu würdigen…

  15. Webdesign-er
    16. April 2010 um 12:55 Uhr

    Schöner Artikel mit interessanten Beispielen. Die unscharfen Screenshots finde ich zwar nicht übermäßig berauschend, erfüllt aber trotzdem seinen Zweck 🙂

  16. nikosch
    1. Mai 2010 um 23:11 Uhr

    Gerade den Punkt „An die Standards halten“ sehe ich sehr kritisch. Es gibt etliche etablierte Bildchen, die mehrdeutig sind oder IMHO wenig ikonenhaftes besitzen. Auswahl:

    Lupe – Zoom, Suche (?)
    Anhänger – Bookmark, Tag
    Hammer und Schraubenschlüssel – Setting, Developement, ..?
    Abwärtspfeil – Download
    „Lesezeichen“ – Erkennbar?
    „Kalender“ – Erkennbar?

    Einige Bildchen sollte man wirklich über Bord werfen und den eigenen Geist anstrengen. Das wird natürlich mit jedem veröffentlichten shiny glossy iconset schwerer. Zumeist wird da das selbe Theme immer wiedergekäut (Betriebssystem, Editorbuttons) und andere, schon jahrelang fehlende Icons vergessen. Die meisten Iconbauer sind wahrscheinlich eher technisch versiert als kreativ.

  17. Joomla Webdesigner
    9. Juni 2010 um 16:54 Uhr

    Vielen Dank für den informativen und hilfreichen Artikel. Wurde schon in unsere Bookmarks Sammlung aufgenommen und wird auch fleißig unseren Kunden gezeigt.

    Diese Icons Idee kommt bei meinen Kunden sehr gut an.

    Viele Grüße
    Joomla Webdesigner Team

  18. Jürgen
    27. August 2010 um 19:28 Uhr

    Respekt, wieder ein toller Artikel mit schönen Beispielen.

    Mach weiter so!

  19. Frank
    26. Oktober 2010 um 09:34 Uhr

    Vielen dank für diese schönen und informativen Artikel.Gute Arbeit

  20. Papillon
    22. November 2010 um 11:22 Uhr

    Die gut recherchierten Beispiele waren für mich besonders interessant. Danke! Top Artikel!

  21. Sandra
    10. März 2011 um 12:20 Uhr

    Tolle Seite mit guten Informationen und hilfreichen Kommentaren.
    Ich komme gerne wieder hier vorbei.
    Gruß Sandra aus Darmstadt

  22. Manni Reifen
    27. April 2012 um 11:04 Uhr

    Hallo,

    echt toller Blog. Der Artikel hier gefällt mir besonders gut. Werde ab jetzt hier öfters vorbeischauen.
    Liebe Grüße
    Manni

  23. Made in Germany shopping
    28. April 2012 um 10:01 Uhr

    Hallo Lennart,
    das sind schöne Tipps für Icons. Eine Frage hab ich zum Punkt Text neben den Icons – gilt das auch für Social Media Icons ? Da sieht man fast nie Text daneben. Ich gehe davon aus, dass die meisten Leute mit solchen Icons was anfangen können.

    Sind die 18 Beispiele eine positiv-Liste ? Sowei ich erkennen kann, sind die Icons meist gut gewählt, aber bei Starbucks Idea finde ich das “See” Icon nicht so aussagekräftig. Da wäre doch ein Auge besser gewesen, oder ?

    Gruß
    Thomas