Weiterbilden #2: Icon-Design

• von Lennart Prange

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

10 Kommentare