Hier ist der zweite Teil meiner Artikelserie”Weiterbilden”. Heute behandle ich Icon-Design. Gute Icons werten eine Website häufig auf und es gibt zwar viele freie Icon-Sets, aber man sollte schon ein wenig nach Einzigartigkeit streben. Außerdem findet man nicht immer, was mach sucht.
In diesem Beitrag bekommt ihr Tipps, Inspiration und Tutorials zum Thema Icon-Design. Viel Spaß damit.
Über Social Bookmarks, Votes bei Webnews (den Button findet ihr unten; um zu voten muss man sich nicht registrieren) und Kommentare würde ich mich freuen.
Bisher in der Artikelserie “Weiterbilden”:
Weiterbilden #1: Maskottchen selber machen!
Weiterbilden #2: Icon-Design
An die Sache herangehen
Warum sollte ich Icons einbauen?
Es besteht eigentlich nie ein Zwang Icons zu verwenden, aber häufig machen sie sich gut. Fehlt irgendetwas an eurer Seite? Dann baut schöne Icons in die Navigation und schaut wie sich das Design verändert. Gebt dem Content etwas mehr Pep, indem ihr mini-icons verwendet.
Weiterhin können Icons die Benutzerfreundlichkeit verbessern, da sie schneller zu erfassen sind als Text.
Welche Arten von Icons gibt es?
Ich ordne Icons immer in zwei Arten unter: Flache Icons und 3-dimensionale Icons. Flache Icons machen sich gut in kleinen Größen und sind daher auch im Fließtext und auf engerem Platz brauchbar. 3-dimensionale Icons stechen eher heraus, brauchen aber auch mehr Platz um gut auszusehen. Ich würde sie nie mehr als einmal auf einer Seite verwenden (die Navigation wäre zum Beispiel ein guter Platz).
Worauf muss ich beim designen achten?
- Einfach – Achtet darauf, dass eure Icons sehr einfach designed sind. Jedes weitere Element macht das Icon komplizierter zu erfassen und dadurch auch zu verstehen. Beschränkt euch auf die nötigsten Elemente. Natürlich ist das auch ein wenig davon abhängig, in welcher Größe die Icons dargestellt werden sollen. Umso kleiner sie sein sollen, umso einfacher müssen sie sein.
- Folgt den Standards – Never touch a running system wird langsam zu meinem Lieblingsspruch und er passt hier mal wieder perfekt. Icons bringen nur dann etwas, wenn jeder sie schnell versteht. Eure Nutzer werden nach speziellen Symbolen suche, welche sie schon von ihrem Betriebssystem oder anderen Seiten kennen.
- Lasst eure Icons nicht ohne Text stehen – Benutzer hassen es, wenn sie die Bedeutung eurer Icons vermuten müssen und auch wenn die Icons eindeutig sein sollten, lasst sie nie ohne Text stehen. So wird Verwirrung ausgeschlossen.
- Keinen Text in Icons – Baut nie Text in eure Icons ein. Bei kleinen Größen wird der unlesbar und macht nur das Icon kaputt.
- Behaltet euren Style – Seht zu, dass euer Style innerhalb eines Icon-Sets immer gleich bleibt. Das heißt zu Beispiel darauf zu achten, immer die gleiche Perspektive zu verwenden.
- Immer skizzieren – Skizziert jedes Icon, vor allem 3-dimensionale Icons, vor der Umsetzung. So habt ihr einen genauen Plan und arbeitet schneller und vor allem besser, da perspektivische Fehler auf dem Papier viel eher auffallen.
Tutorials
Ich hab einige Tutorials gefunden und möchte euch nun die besten mit auf den Weg geben.

Professional technique for creating icons

How to Create a Super Shiny Pencil Icon

Keyfob: Anatomy Of An Icon

Creating a Calendar Icon

Creating a Cool Yellow Helmet Icon

Icon Design Explained (Quickly)
“]

Illustrate a Traffic Cone Icon in Photoshop

How to Design Mini Icons

Create a High-Gloss Graduation Hat Icon Design

Top 12 Icon Design Video Tutorials
Inspiration
Inspiration für Icons findet man eigentlich offline – ein Grafiktablett auf dem Schreibtisch reicht schon. Trotzdem will ich zeigen, wie wirklich gute Icons aussehen.

40 Professional Icon Sets For Free Download

30 Free Icon Sets: More awesome free icons
Tartanrocker
13. Oktober 2008 um 19:33 UhrDas große Problem sehe ich bei der Konstanz – wenn man mal eben ein paar Icons erstellt, sich sonst nicht damit beschäftigt, ist es schwierig einen Stil zu behalten. Ganz zu schweigen vom gekonnten Abstrahieren 😉
Danke für die Sammlung, ich hab mir gerade das Helm-Tut rausgepickt … sehr schönes Beispiel für die Iconerstellung mit Referenz.
Tartanrockers letzter Beitrag..Stroboskopfotografie: Leichtathletik
Mediensache
13. Oktober 2008 um 19:57 UhrSind echt cool weiterführende Links (Tuts) dabei. den ein oder anderen tipp kann ich super gebrauchen. danke.
Mediensaches letzter Beitrag..Hype effektiver als Yigg
Lennart Prange
13. Oktober 2008 um 20:30 UhrFreut mich, dass ihr damit was anfangen könnt.
@ Tartanrocker: Du hast Recht damit, dass das Abstrahieren das größte Problem ist. Viele haben große Probleme damit.
Marvin
14. Oktober 2008 um 10:20 Uhrkenne die meisten schon, aber die MinipixelIcons sind echt top! Danke für die Sammlung!
Marvins letzter Beitrag..Web 2.0 Expo
Justin
14. Oktober 2008 um 20:25 UhrEine sehr coole Auflistung…
Justins letzter Beitrag..Das zweite Internet
Jonas
14. Oktober 2008 um 21:54 UhrIch sehe hier immer Photoshop in den Tutorials, sind für Icon oder Logodesign nicht eher Progs wie Inkscape geeignet?! Ansonsten schöner Artikel 🙂
Jonass letzter Beitrag..Google bestätigt SEO Basics