Icons selber erstellen: So geht es

Es mangelt sicher nicht an guten und auch kostenlosen Iconsets die man für eigene Zwecke anpassen und einsetzen kann. Aber manchmal muss oder soll es dann doch mal etwas Eigenes und Individuelles sein. Gerade die Entwicklung von Icons ist eine anspruchsvolle Sache. Sie müssen möglichst einfach in der Gestaltung sein und dennoch eine eindeutige und klar verständliche Botschaft vermitteln. Dazu kommt, dass Icons innerhalb eines Sets ein einheitliches Aussehen haben müssen.

Alle Icon-Tools, die man kennen sollte

Einerseits wird das Netz immer visueller und selbst kürzeste Textpassagen werden mit einem Bild unterstrichen. Andererseits müssen wir stark auf die Ladezeiten achten, um weder Besucher noch Google zu vergrämen. Mit der Entwicklung des Responsive Web ist eine dritte Komponente hinzu gekommen: die Fähigkeit einer Grafik, mit den verschiedensten Auflösungen klar zu kommen.

SVGs, also Scalable Vector Graphics, sind die Lösung. Kleine Dateigrößen und eine flexible Anpassung an die Größe des Screens sind hier gegeben. Wir haben die schönsten Online-Tools und Icon-Sets gesammelt.

Animierte SVG-Icons mit Loaf

Loaf ist eine SVG-Symbolbibliothek, die für Mac und Windows erhältlich ist. Nicht nur kann man die SVG-Icons bearbeiten, sondern auch animieren. Die kostenlose Version enthält 72 editierbare Symbole.

Tabler Icons

558 vollständig anpassbare kostenlose SVG-Symbole. (MIT-Lizenz)

CSS Icons: Piktogramme aus purem CSS, auf Wunsch auch animiert

Die frei verwendbare Web-App „CSS Icon” bringt Ihnen nicht nur Piktogramme aus purem CSS frei Haus, sondern erlaubt Ihnen auch noch, animierte Übergänge zwischen jeweils zwei beliebigen Symbolen des Pakets zu definieren.

Auch für den nicht so detailverliebten Allerweltsdesigner hilfreich, ist das Projekt „CSS Icon” mit 512 Piktogramme.

CSS Icon: Codeschnipsel zum Auskopieren

In der neuen Version von „CSS Icon” finden Sie derzeit rund 200 Symbole. Zhang verspricht, weitere regelmäßig zuzufügen. Die Web-App bietet im Wesentlichen zwei Funktionalitäten. Klicken Sie ein einzelnes Icon an, öffnet sich rechts von der Übersicht ein Detailfenster, aus welchem Sie den kompletten erforderlichen Quellcode für dieses Icon per Copy-and-Paste auskopieren können.

Um ein bisschen mit der Konfiguration zu spielen, besteht zudem die Möglichkeit, mit den Code-Snippets rüber zu Codepen zu wechseln und dort im Browser zu experimentieren.

CSS Icon animate: Morphing light zwischen zwei Icons

Die zweite Funktionalität erreichen Sie, wenn Sie oben links im Browserfenster das kleine Wörtchen „animate” anklicken. Jetzt gibt es die Möglichkeit, zwei Piktogramme zu wählen. Das zuerst gewählte wird zu Symbol A, das zweite zu Symbol B.

Nun öffnet sich das bereits bekannte Detailfenster mit den erforderlichen Code-Snippets. Dieses Mal finden Sie dabei jedoch nicht nur HTML und CSS, sondern auch JavaScript.

In der Einstellung „animate” erstellt die Web-App nämlich animierte Übergänge zwischen den beiden gewählten Icons. In meinem Beispiel wird der linksweisende Pfeil zu einem rechtsweisenden Pfeil gemorpht. Das funktioniert generell mit allen Symbolen, sieht aber naheliegenderweise nicht bei allen auch gut und überzeugend aus. Wenn Sie beispielsweise das Icon „Neun Uhr” zum Icon „Drei Uhr” animieren lassen, wird der kleine Uhrzeiger simpel von links nach rechts geschoben. So würde man das normalerweise natürlich nie animieren.

Hingegen sieht die Animation vom Icon „Batterie voll” zu „Batterie leer” genauso aus, wie man sich das vorstellen würde. In jedem Falle ist „CSS Icon” eine Bereicherung für Ihren Design-Werkzeugkasten.

CSS Icons: Gemeinfrei verwendbar unter CC0

Zhang stellt ihr Projekt unter der Lizenz Creative Commons Zero, die in etwa der Public Domain entspricht, völlig frei für jedermann und jeden Zweck zur Verfügung. Damit können Sie die Icons ohne jegliche Bedenken auch kommerziell verwenden und vor allem nach Ihrem Belieben verändern.

Das Projekt steht unter Github quelloffen zur Verfügung. Um es lediglich zu verwenden, reicht der Besuch der Projektseite CSS Icons.

Animate SVG Icons with CSS and Snap

In diesem Tutorial geht es um Snap.SVG und CSS zur interaktiven Gestaltung von Icons. Zudem gibt es Tipps zur Erstellung von Piktogrammen mit Illustrator. Eine ganze Reihe nützlicher weiterer Ressourcen sind verlinkt.

Method Draw

Method Draw ist eine einfache Web-App zur kostenlosen Bearbeitung von SVG-Dateien. Speziell als Online-Vektor-Editor konzipiert, ist die Bedienung sehr einfach: Datei öffnen, bearbeiten und wieder speichern: Fertig!

Snap.svg

Mit Snap.svg können SVG-Dateien kostenlos erstellt und bearbeitet werden, bis hin zu sehenswerten Animationen.

SVG Morpheus

Wer etwas mehr Bewegung in seinen Icons sehen möchte nutzt SVG Morpheus, um zwei oder mehr Icons von dem einen in das andere übergehen zu lassen.

quasi-svg

Sie können diese App nutzen, um schöne kristalline Muster zu kreieren. Über zahlreiche Eingabefelder kann man benutzerdefinierte Muster erstellen und damit Hintergründe für Ihre Projekte.

Plain Pattern

Die Plain Pattern App ist eine einfach zu bedienende Anwendung für die Erstellung von Mustern, die im SVG-Format exportiert werden können.

Chartist.js

Chartist hilft Designern und Entwicklern dabei, Inhalte visuell in interaktive und dynamische Diagramme umzuwandeln, die auf jedem Endgerät gleich aussehen.

bonsai

Bonsai bietet eine Bibliothek zur Grafikbearbeitung an, die dazu eine API- und Renderplattform für SVG unterstützt.

SVGMagic

Ist der Browser zu alt um SVG anzuzeigen, so hilft SVGMagic aus. Blockierte SVG-Inhalte werden zu PNGs konvertiert, damit der Browser sie darstellen kann. Hier kommt jQuery im Hintergrund zum Einsatz.

Glyphter

Glyphter gibt Ihnen einfachen Zugriff auf 16 verschiedene Quellen SVG-optimierter Icons und Schriften.

iconizr

Haben Sie eine ganze Reihe von SVG-Animationen oder -Grafiken, dann setzen Sie sie alle zusammen: Iconizr konvertiert sie in ein anwendbares CSS Icon Kit.

E-Commerce-Icons zum Herunterladen

33 Linear Ecommerce Icons

Erstellt von/für: Inspirationfeed (Igor Ovsyannykov)

Lizenz: Creative Commons Attribution 3.0 Unported License.

The Flat & Stroke eCommerce Icon Set (50 Icons, SVG & PNG)

Erstellt von/für: Freepik

Lizenz: Frei für private und kommerzielle Zwecke, auch in Kundenaufträgen verwendbar

70 Ecommerce and Shopping Icons (AI, EPS & PSD)

Erstellt von/für: Vecteezy

Lizenz: Frei für private und kommerzielle Zwecke, auch in Kundenaufträgen verwendbar

Free UI and E–commerce thin line icons

Erstellt von/für: Rajesh Kumar

Lizenz: als “Free” bezeichnet, aber keine genaue Lizenz angegeben

Free Ecommerce Icon Pack + PSD / AI Freebie

Erstellt von/für: Intuz

Lizenz: CC0.

Responsive E-Commerce Icon Set

Das essentielle
E-Commerce-Iconset

„Shopicons“ ist das neue Iconset von H2D2, das die 60 wichtigsten E-Commerce Symbole vereint. Es kann aus vier verschiedenden Symbolstärken gewählt werden. So findet sich für jedes Shopdesign, die passende Variante. Alle Icons liegen als einzelne SVG- und PNG-Dateien bereit und können direkt in Ihrem Online-Shop eingesetzt werden

Lizenz: Verfügbar als Open Source unter der Apache Lizenz Version 2.0.

SVG-Icon-Sets

Flat Icon

Die Webseite von Flat Icon umfasst über 60.000 freie Vektor-Icons, welche als SVG-, EPS-, PSD- oder PNG-Format downloadbar sind. Um ein bestimmtes Icon schnell zu laden, nutzen Sie die Suchleiste oder suchen basierend auf der Kategorie, so beispielsweise unter Networking, Zeichen, Tiere etc. Alle dieser SVG Icons haben eine Creative Commons Lizenz. Verweisen Sie daher auf die Quelle, wenn Sie diese Icons nutzen.

iconmonstr

Diese einfachen, aber großartig aussehenden Icons sind sowohl für den kommerziellen als auch den privaten Gebrauch völlig kostenfrei. Sie benötigen keinen Quellenverweis und können darüber hinaus beliebig modifiziert werden. Die Seite von iconmonstr beinhaltet eine ziemlich große Sammlung und ist definitiv ein Lesezeichen wert.

Free Icons

Die kostenlosen Icons von Free Pik können als SVG und im PNG- und EPS-Format runter geladen werden. Sie sind allesamt kostenfrei für den privaten und den kommerziellen Gebrauch mit Quellenverweisen nach CC 3.0.

Social Icons von Adam Fairhead

Dieses Set von SVG Icons für die sozialen Netzwerke sieht gut aus und ist leicht in Ihren Code einfügbar. Einfache Anleitungen sind ebenfalls auf der Seite enthalten, und das downloadbare Code-Paket beinhaltet eine Beispielseite.

Open Iconic

Die freie Open Source Version von Iconic umfasst 223 Icons in SVG-, Webfont- und Rasterformat. Besonders geeignet sind sie zur Verwendung mit Bootstrap und Foundation.

RoundIcons.com

Die Icons von RoundIcons.com sind lizenzfrei bei einem imit von 200 Stück pro Projekt. Wer mehr benötigt oder eine kommerzielle Lizenz erfordert, muss mindestens 99 Dollar dafür ausgeben.

Icons Sets

Da hat sich jemand viel Mühe gegeben mit diesen auf Dribbble erhältlichen SVG-Icons. Es empfiehlt sich die Lizenzen zu prüfen, bevor man zur Verwendung schreitet.

Das Icon Design

Raster festlegen für einheitliches Aussehen

Will man mehrere Icons gestalten oder gar ein umfangreiches Set, ist es wichtig, sich auf gemeinsame Nenner zu einigen, die alle Icons erfüllen. So sollten alle Icons denselben Grad an Detailgenauigkeit besitzen. Hier hilft es, sich ein Raster anzulegen, welches als Grundlage für alle zu zeichnenden Formen dient. Je komplexer die Gestaltung eines Icons sein soll, desto komplexer darf dann auch das Raster sein, an das sich die Formen auszurichten haben.

Dabei spielt es auch eine Rolle, in welcher Größe die Icons verwendet werden sollen. Die kleinste Icongröße hat üblicherweise eine Kantenlänge von 16 Pixel. Es folgen in der Regel Verdopplungen der Kantenlänge, also 32, 64 und 128 Pixel. Will man komplexe Icons auch in kleinen Größen darstellen, muss man bei den kleineren Versionen möglicherweise Anpassungen vornehmen, um den Grad der Detailgenauigkeit zu reduzieren.

Als Basis für eine komplexe Gestaltung legen wir ein Icon mit 128 Pixel Kantenlänge fest und definieren ein Raster von acht Pixeln mit je vier Unterteilungen. Wir erhalten somit ein Raster mit 16 mal 16 Feldern. Bei einer Darstellung von 16 Pixeln würde jedes Rasterfeld ein Pixel entsprechen.

Farben und Formen definieren

Als nächstes sollte man die Farben für die Icons festlegen. Grundsätzlich kann man natürlich aus dem Vollen schöpfen und sich aller Farben bedienen. In den meisten Fällen ist es jedoch sinnvoll, sich auf eine bis wenige Farben zu beschränken. So fördert man ein einheitliches Aussehen und verhindert, dass den Icons zu viel Aufmerksamkeit widerfährt. Aber je nach Einsatz kann das natürlich auch gewollt sein. In vielen Fällen werden Icons jedoch unterstützend eingesetzt und sollen selbst nicht im Zentrum der Gestaltung stehen.

In Illustrator ist es sinnvoll, Farben als globale Farbfelder anzulegen. Globale Farben haben den Vorteil, dass sich Änderungen dieser Farben in der Palette auch auf die Farben im Dokument auswirken.

Im nächsten Schritt sollte man sich Gedanken zu den Gundformen machen. Setzt man abgerundete Flächen und Kreise ein oder soll die Anmutung der Icons eher kantig sein? Will man ausschließlich Flächen oder Konturen einsetzen oder will man beides miteinander kombinieren? Bei Konturen sollte man die Linienstärke so festlegen, dass gerade komplexe Formen durch zu dicke Linien nicht „matschig“ wirken.

Individualität erzeugen

Für die nötige Prägnanz können ungewöhnliche, thematisch passende Bilder dienen. Individualität kann auch über die Art der Form erreicht werden. So kann ein Gestaltungsgrundsatz sein, Konturen nicht zu schließen. Außerdem können Konturen mit doppelter oder gepunkteter Linie gezeichnet werden. Bei Farben können Verläufe als grundsätzliches Element verwendet werden.

Zusätzlich kann Individualität durch Schatteneffekte oder runde Grundformen erzeugt werden. Bei allen Effekten, Formen und Farben gilt, dass sie einheitlich sein müssen und als einheitliches Element aller Icons zu verstehen sein sollten. Im Beispiel werden Icons mit Flächen und Konturen gezeichnet. Es gibt drei Pastellfarben, die jeweils in einer zusätzlichen helleren Variante vorhanden sind. Ecken und Linien sind leicht abgerundet.

Um Formen, Farben und Konturen leichter anwenden zu können, bietet es sich an, solche Vorgaben als Grafikstil zu speichern. Somit lassen sich zuvor im Grafikstil festgehaltene Vorgaben auf beliebige Formen anwenden.

Icons als Gruppen anlegen

Anders als das aktuelle Photoshop bietet Illustrator keine Möglichkeit, den Inhalt einer Zeichenfläche zu exportieren. Daher sollte man alle Icons auf einer Zeichenfläche platzieren. In jedem Fall sollte jedes Icon in einer Gruppe zusammengefügt werden. So hat man einen besseren Überblick und verhindert, dass Formen eines Icons versehentlich verschoben werden. Auch das Ein- und Ausblenden von Icons für das spätere Exportieren ist so einfacher.

Icons für verschiedene Größen anpassen

Wie bereits erwähnt, sollten bei Icons, die in sehr unterschiedlichen Größen eingesetzt werden, Anpassungen vorgenommen werden. So sollten komplexe Icons um Details reduziert werden, wenn diese auch sehr klein dargestellt werden sollen. Überflüssige Formen können weggelassen und andere Formen in ihrer Komplexität reduziert werden. Bei Sternen können beispielsweise die Anzahl der Zacken reduziert werden.

Auch die Konturenstärke sollte je nach Größe angepasst werden. So sollten Konturen nie dünner als ein Pixel sein. Wird eine Kontur bei einem 128 Pixel großen Icon in zwei Pixel angelegt, sollte bei der 16 Pixel großen Darstellung die Kontur auf mindestens ein Pixel vergrößert werden.

Export als SVG, PNG und Iconfont

Illustrator und die meisten anderen Zeichenprogramme können ins vektorbasierte SVG- und ins bitmapbasierte PNG-Format exportieren. Während das SVG-Format beliebig skalierbar ist, müssen beim PNG-Format die benötigten Größen individuell angelegt werden. Hier bietet es sich an, das jeweilige Icon als Smartobjekt in Photoshop zu platzieren. Dort können diese in verschiedene Auflösungen exportiert werden.

Hat man einfarbige Icons ohne Effekte wie Verläufe und Schatten, bietet sich auch ein Iconfont an. Dienste wie IcoMoon können SVG-Dateien importieren und daraus individuelle Webfonts generieren. So erhält man Icons in jedem möglichen Format und kann diese im eigenen Webprojekt integrieren.

Warum gibt es Icons?

Wenn wir von Icon reden, dann meinen wir nicht die kleinen handgemalten Holzbildchen mit christlichen Motiven, die es im osteuropäischen Christentum schon vor Jahrhunderten zu Berühmtheit gebracht haben. Wir sprechen vielmehr von kleinen Symbolen, die auf einem Bildschirm Objekte oder Funktionen repräsentieren.

In letzterer Lesbarart debütierten Icons 1981 auf dem Xerox Star 8010. Wenn Sie sich ein bisschen mit dem Xerox der Sechziger und Siebziger auseinandersetzen, werden Sie sich wundern, für welche Innovationen das Unternehmen und sein Palo Alto Research Center sich verantwortlich zeichnen. Nicht zuletzt die Computermaus ist da zu nennen. Im Grunde stammt das komplette Konzept des sogenannten Personal Computers aus dem Hause Xerox.

Die Erfindung der Icons ist Teil der sogenannten Schreibtisch-Metapher (mancherorts auch Office-Metapher genannt), mit der der typische Schreibtisch digital abgebildet werden sollte. Und was ist klar, wenn Sie einen kompletten Schreibtisch auf den damals üblichen maximal 12 Zoll großen Bildschirmen abbilden sollen? Genau. Sie haben nicht viel Platz.

Entsprechend waren Icons von Beginn an als kleine Piktogramme konzipiert, die möglichst unmissverständlich kommunizieren, welches Objekt oder welche Funktion sich hinter ihnen verbirgt. Diese Kommunikationsaufgabe in all ihrer Schwierigkeit haben wir auch heute noch zu bewältigen. Vorteilhaft ist indes, dass wir mittlerweile Icons als Vektorgrafiken erstellen und nicht auf Pixel-Icons festgelegt sind. Damit gelingt uns eine weitaus komplexere Darstellung dessen, was wir kommunizieren möchten.

Dennoch haben sich die meisten Fragestellungen, die es beim Icon-Design zu beantworten gilt, nicht wesentlich verändert. Die folgenden Tipps sollen Ihnen helfen, wenn Sie Piktogramme erstellen wollen oder müssen.

Tipp #1: Icons müssen eindeutig und leicht erfassbar sein

Fangen wir mit dem wichtigsten Tipp an. Ein Icon ist nur dann gut, wenn der potenzielle Verwender sofort erkennen kann, was es symbolisieren soll. Ist das Icon zu künstlerisch oder abstrakt, wird das nicht gelingen. Der Nutzen ist dahin.

Daher ist es wichtig, nicht innovativ sein zu wollen; schon gar nicht disruptiv. Das beste Symbol ist eines, das der Nutzer kennt und bereits mit dem Objekt oder der Funktion assoziiert, die es auch abbilden soll.

Diese Überlegung führt uns zum Skeuomorphismus, den wir mit dem Flat-Design-Trend hinter uns gelassen glaubten. Google brachte mit dem Material-Design-Ansatz indes beide Welten zusammen, so dass ein Icon im Material Design immer noch flat, aber eben auch realitätsnah aussehen kann.

Wollen Sie mit den Reminiszenzen an vergangene Zeiten nicht leben, hassen gar den Skeuomorphismus, dann rate ich Ihnen, Ihren Standpunkt zu überdenken. Hilft das nichts, können Sie sich immer noch assoziativer Kniffe bedienen und Ihre Icons an bekannter Funktionssprache orientieren. Ein Beispiel kann etwa das liegende Dreieck als etablierte Metapher für „Play” sein.

Zukunftsorientiertes Icon-Design sollte zudem Metaphern vermeiden, die zwar etabliert waren, es aber in absehbarer Zukunft mit großer Wahrscheinlichkeit nicht mehr sein werden. Ich hoffe, Sie kommen ohnehin nicht mehr auf die Idee, eine 3,5” Floppydisk als Icon einzusetzen. Solche Kandidaten gibt es einige, etwa das CD-Symbol.

Tipp #2: Zeichnen Sie nicht drauf los, sondern recherchieren Sie gründlich

Wenn Sie Icons für einen Kunden oder einen bestimmten Verwendungszweck zeichnen wollen, dann nehmen Sie sich Zeit für eine gründliche Recherche. Welche Bildsprache hat sich in dem angepeilten Bereich bislang schon etabliert? Welche Funktionsmetaphern bieten sich an?

Hier sollten Sie ganz selbstverständlich auch bei den freien und kommerziellen Anbietern von Icon-Sets vorbeischauen. Wir müssen das Rad nicht völlig neu erfinden. Sollten Sie beim Stöbern die perfekte Lösung finden, dann nehmen Sie sie. Sie müssen nicht zwanghaft selbst erstellen, was es so schon gibt.

Wenn Sie für einen Kunden gestalten, könnte es sinnvoll sein, einen Teil seiner Marke oder seines Logos in das Design einzubeziehen. Verwendet Ihr Kunde etwa einen Stern im Logo, könnten Sie diesen Stern auch im Icon-Design berücksichtigen. Schauen Sie genau hin, was sich im konkreten Fall anbietet. Damit bringen Sie vollkommen unproblematisch eine persönliche Note in die Gestaltung und schützen Ihre Symbole vor dem Vorwurf der Beliebigkeit.

Lässt sich kein Markenbestandteil finden, kann es ein gemeinsames Thema tun. Bei einem Kunden aus der ölverarbeitenden Industrie könnte etwa der stets hinzugefügte Öltropfen als Thema für eine konsistente Darstellung passend sein. An dieser Stelle wird es bisweilen erforderlich sein, um die Ecke zu denken.

In diesem Zusammenhang ist auch das Betrachten kultureller Besonderheiten von Bedeutung. Manche Symbole, die wir metaphorisch für gelungen erachten, können woanders auf der Welt ganz andere Wirkung entfalten. Ein Beispiel dafür ist die Eule, Markenbestandteil des Social-Media-Helferleins Hootsuite. In westlichen Kulturen wird die Eule mit Weisheit, in östlichen mit Dummheit assoziiert. Hmm.

Von Beginn muss Ihnen klar sein, dass Sie selbst bei einer nur kleinen Icon-Familie kaum in der Lage sein werden, stets nur die beste Assoziation piktografisch umzusetzen. Es wird eine Gemengelage dabei herauskommen. Das eine Icon ist der kognitive Knüller, das andere erfordert etwas Nachdenken. Im Zweifel gestalten Sie zugunsten der übergreifenden Konsistenz der Icon-Familie insgesamt.

Tipp #3: Weniger ist mehr – überladen Sie Ihre Icons nicht

Wir befinden uns nicht in einem Wettbewerb um die komplexeste Darstellung auf dem kleinsten Raum. Wichtig ist die Verständlichkeit, nicht die möglichst detaillierte Darstellung des Symbols an sich. Letztlich ist Ihr Icon nur ein Mittel zum Zweck. Wenn Sie diesen Zweck mit der Kombinationen zweier einfacher Formen erreichen können, dann ist das kein Nachteil, sondern ein Vorteil.

Lassen Sie mich an dieser Stelle nochmal Einstein zitieren, der empfahl, die Dinge so einfach wie möglich zu machen, aber nicht einfacher. Die bereits erwähnten zwei Formen, aus denen Ihr Icon bestehen könnte, sind vollkommen in Ordnung, wenn Ihr Icon damit eindeutig erkennbar wird. Leider wird es vielfach eher so sein, dass ein derart simples Icon verschiedene Interpretationen zulässt. Erweitern Sie Ihr Design dann solange, bis Sie eine eindeutige Interpretation des Symbols sichergestellt haben.

Bei der Gelegenheit sollten Sie es sich zur Angewohnheit machen, Icons selbst dann in möglichst kleinen Größen verwendbar zu halten, wenn Sie sie für den aktuellen Kundenauftrag ausnahmsweise ausschließlich in 512 x 512 Pixeln brauchen. Was Sie allerdings tun können, ist, die Komplexität der Icon-Darstellung in Maßen der Größe anzupassen. So könnte Ihr 512er Exemplar detailreicher sein als Ihr 64er Symbol. Dabei sollten Sie allerdings nicht übertreiben, denn wichtig ist, dass erkennbar bleibt, dass beide Exemplare zur gleichen Symbolfamilie gehören.

Tipp #4: Entscheiden Sie sich für einen Stil und bleiben Sie dabei

Wenn Sie Ihre Icons eher skizzenhaft zeichnen wollen, dann bleiben Sie über das gesamte Set dabei.

Wenn Sie sich für ein, zwei oder drei Farben entscheiden, dann verwenden Sie sie konsistent und immer in der gleichen Weise. Wenn Sie Perspektive oder Lichteinfall und Schattenwurf ins Spiel bringen, dann verwenden Sie immer die gleiche Perspektive und lassen das Licht stets von der gleichen Seite kommen und auf die gleiche Seite den Schatten werfen.

Das ist doch logisch, mögen Sie jetzt denken. Aber ich habe gerade eben in einem neuen Projekt die Situation vorgefunden, dass ein Icon auf einer Übersicht von sechs Icons ganz anders aussah als die anderen.

Warum hatte der Designer diesen Bruch begangen? Weil er dieses Icon für diesen Anwendungsfall eben für besonders geeignet hielt. Und er war fest davon überzeugt, dass es besser sei, dieses, aus seiner Sicht optimale, Icon selbst dann einzusetzen, wenn es zu den übrigen Symbolen nicht passte.

Ich war auf der Seite des Kunden, hatte also die Macht, seinen Entwurf abzulehnen und konnte schließlich gemeinsam mit ihm ein Icon erstellen, das besser mit den anderen harmonierte, in gewisser Weise aber tatsächlich einen Kompromiss darstellte.

Tipp #5: Arbeiten Sie auf das Pixel genau und verzichten auf Text

Gut, dieser Tipp besteht eigentlich aus zwei voneinander unabhängigen Empfehlungen. Aber beide gehören meiner Meinung nach in einen Anfänger-Ratgeber.

Text findet sich recht oft in schlechten Iconsets. Warum ist das so? Ganz einfach. Da wollte sich jemand sparen, eine gute Metapher zu finden. Sie kennen das vielleicht, wenn Sie in geselliger Runde Pictionary spielen. Eigentlich soll der zu erratende Begriff nur mit zeichnerischen Mitteln visualisiert werden. Die Versuchung des Zeichnenden, mangels guter Ideen, schlicht Text zu verwenden, ist stets mit Händen zu greifen. Fakt aber ist, dass Ihr Icon schlicht nicht gut ist, wenn Sie es nicht schaffen, auf den Einsatz von Text zu verzichten.

Icons werden immer, nicht manchmal oder meistens, nein immer auf einem pixel-genauen Grid erstellt. Dabei ist das Grid für jedes Icon des geplanten Satzes identisch dimensioniert. Das muss aber nicht bedeuten, dass Sie nun alle Icons krampfhaft auf dieses Grid hin zeichnen. Vielmehr dürfen Ihre Symbole durchaus mal im Hoch-, mal im Querformat oder sogar diagonal angeordnet, einige zudem rund sein.

Dennoch bleibt das Grid quadratisch. Der Fixpunkt der Gestaltung ist die optische Mitte Ihres Piktogramms. Die optische Mitte muss nicht mit der grafisch und mathematisch bestimmbaren Mitte des Objekts übereinstimmen. Es geht hier um das optische Empfinden.

Um für verschiedene Formen gewappnet zu sein, lassen Sie im äußeren Bereich des Grid generell einige Pixel frei. Kein Icon wird bis an die äußersten Grenzen gezeichnet, selbst dann nicht, wenn es ein quadratisches Piktogramm ist und von daher bis an die äußeren Grenzen gezeichnet werden könnte.

Linien und Formen umfassen immer ganze Pixel. Das vermeidet Unschärfen, die ansonsten leicht entstehen, wenn das Icon skaliert wird.

Fazit

Recherche, Planung und Vorbereitung sind wichtig. Das reine Zeichnen des Piktogramms ist dann lediglich der letzte Akt der Ausführung. Mehr wie das Anzünden eines Lagerfeuers für das zuvor stundenlang Holz gesammelt und aufgeschichtet wurde. Also, auf in den Wald!

Quellen zum Weiterlesen:

• 5 Killer Icon Design Tips | Creative Bloq
• 10 Styles That Have Changed the Face of Icon Design | TutsPlus
• Simplifying Icon Design | Claudia Driemeyer
• Die Erfinder der Schreibtisch-Metapher | Xerox
• How to Design a Top-Quality Icon | Creative Bloq
• 6 Easy Steps to Better Icon Design | Smashing Magazine
• Wenn Sie alles über Icon-Design lernen wollen, dann holen Sie sich das Icon Handbook.