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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
idealic
2. Juni 2009 um 09:27 UhrArtikel werden besser, bekommen mehr Tiefe, weiter so 😉
Lennart Prange
2. Juni 2009 um 10:32 UhrDanke 😀
Design made in Germany
2. Juni 2009 um 09:49 UhrStatt “Text neben den Icons” find ich “Tooltips über den Icons” auch ok..
Lennart Prange
2. Juni 2009 um 10:32 UhrJo, hast recht. Das ist ebenfalls in Ordnung.
robertfork
2. Juni 2009 um 10:06 Uhrguter 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 UhrDanke.
Ich gebe ungern Rechtsberatung. Vielleicht spreche ich das Thema noch mal an. Kann ich aber nicht versprechen.
Marvin
2. Juni 2009 um 10:42 Uhrsehr 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 UhrIch 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 😉
Thomas Aull
2. Juni 2009 um 11:05 UhrGute 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.
Magnus
2. Juni 2009 um 11:27 UhrGuter 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 UhrDanke. Nächstes Mal binde ich sie wieder normal ein. Ist sonst auch viel zu viel Arbeit 😉
Marvin
3. Juni 2009 um 12:30 UhrMuss ich ihm rechtgeben, das Ganze verschwommene irritiert ein wenig…
Sergej Müller
2. Juni 2009 um 11:58 UhrLangsam konkurriert dein Blog mit SmashingMagazine. Respekt.
Lennart Prange
2. Juni 2009 um 13:02 UhrDanke 😀 Das Lob nehme ich doch gerne. Jetzt müssen nur noch die Besucher und Feeleserzahlen auf das Niveau kommen 😀
missfits
2. Juni 2009 um 12:59 UhrHab 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 UhrFeed gekürzt? Wo, wie, was? Danke 😉
missfits
2. Juni 2009 um 14:40 UhrIch HATTE Halus… sorry. 😉
Rata
3. Juni 2009 um 14:23 UhrWhow!
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
Alexandra
4. Juni 2009 um 08:12 UhrSuper Überblick und gute Tipps zum Thema Icon Design.
Ich schau immer wieder gerne hier vorbei… weiter machen 🙂
Schorschi
8. Juni 2009 um 19:04 UhrSehr 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 UhrDanke. 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.
Jessica
28. Juni 2009 um 10:57 UhrAbsolut 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 🙂
Kevin
3. Juli 2009 um 02:22 UhrIch 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:)
Micha
31. August 2009 um 11:32 UhrSehr 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…
Webdesign-er
16. April 2010 um 12:55 UhrSchöner Artikel mit interessanten Beispielen. Die unscharfen Screenshots finde ich zwar nicht übermäßig berauschend, erfüllt aber trotzdem seinen Zweck 🙂
nikosch
1. Mai 2010 um 23:11 UhrGerade 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.
Joomla Webdesigner
9. Juni 2010 um 16:54 UhrVielen 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
Jürgen
27. August 2010 um 19:28 UhrRespekt, wieder ein toller Artikel mit schönen Beispielen.
Mach weiter so!
Frank
26. Oktober 2010 um 09:34 UhrVielen dank für diese schönen und informativen Artikel.Gute Arbeit
Papillon
22. November 2010 um 11:22 UhrDie gut recherchierten Beispiele waren für mich besonders interessant. Danke! Top Artikel!
Sandra
10. März 2011 um 12:20 UhrTolle Seite mit guten Informationen und hilfreichen Kommentaren.
Ich komme gerne wieder hier vorbei.
Gruß Sandra aus Darmstadt
Manni Reifen
27. April 2012 um 11:04 UhrHallo,
echt toller Blog. Der Artikel hier gefällt mir besonders gut. Werde ab jetzt hier öfters vorbeischauen.
Liebe Grüße
Manni
Made in Germany shopping
28. April 2012 um 10:01 UhrHallo 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