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 du kennen solltest
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.
Lottiefiles: Leichte, skalierbare Animationen selber erstellen
LottieFiles ist ein Open-Source-Format für SVG-basierte Animationen, welche qualitativ hochwertig sind und welche du selber anpassen kannst. Auch der Pagebuilder Elementor unterstützt das Format.
Tabler Icons
558 vollständig anpassbare kostenlose SVG-Symbole. (MIT-Lizenz)
Aqua Security veröffentlicht Library mit mehr als 200 Piktogrammen
Aqua Security, der führende Anbieter von Cloud Native Security, hat die branchenweit umfangreichste Sammlung von Piktogrammen für Cloud Native Security veröffentlicht. Die neue Piktogramm-Library hilft dabei, die Bildsprache in Cloud Native Security visuell zu standardisieren und Designern und Entwicklern bei Projekten viel Zeit einzusparen. Die bisher mehr als 200 Piktogramme sind kostenlos auf GitHub und The Noun Project verfügbar. Die Verwendung der Piktogramme fällt unter die Creative-Commons-Lizenz, welche die Nutzung für jeden Zweck erlaubt. Aqua wird die Library kontinuierlich erweitern, pro Quartal sind 25 neue Icons geplant.
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.
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.
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.
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.
So sehen die fertige Icons am Ende aus.
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 de