Weiterbilden #2: Icon-Design

  • von Lennart Prange

icondesign 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.

1

Professional technique for creating icons

2

How to Create a Super Shiny Pencil Icon

3

Keyfob: Anatomy Of An Icon

4

Creating a Calendar Icon

5

Creating a Cool Yellow Helmet Icon

6

Icon Design Explained (Quickly)

„]7
8

Illustrate a Traffic Cone Icon in Photoshop

9

How to Design Mini Icons

10

Create a High-Gloss Graduation Hat Icon Design

11

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.

12

40 Professional Icon Sets For Free Download

13

30 Free Icon Sets: More awesome free icons

10 Kommentare

  1. Tartanrocker
    13. Oktober 2008 um 19:33 Uhr

    Das 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

  2. Mediensache
    13. Oktober 2008 um 19:57 Uhr

    Sind echt cool weiterführende Links (Tuts) dabei. den ein oder anderen tipp kann ich super gebrauchen. danke.

    Mediensaches letzter Beitrag..Hype effektiver als Yigg

  3. Lennart Prange
    13. Oktober 2008 um 20:30 Uhr

    Freut 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.

  4. Marvin
    14. Oktober 2008 um 10:20 Uhr

    kenne die meisten schon, aber die MinipixelIcons sind echt top! Danke für die Sammlung!

    Marvins letzter Beitrag..Web 2.0 Expo

  5. Justin
    14. Oktober 2008 um 20:25 Uhr

    Eine sehr coole Auflistung…

    Justins letzter Beitrag..Das zweite Internet

  6. Jonas
    14. Oktober 2008 um 21:54 Uhr

    Ich 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

Trackbacks/Pingbacks