Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 10. Mai 2019

Icon-Design: 5 essenzielle Tipps für deine ersten Piktogramme

Eben mal ein Icon hinscribblen. Was soll daran denn schwer sein? Nun, es ist jedenfalls nicht einfach. Wir zeigen dir, worauf du beim Einstieg ins Icon-Design achten musst.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

Warum gibt es Icons?

Starten wir mit ein paar Grundlagen. Wenn hier von Icon als Begriff die Rede ist, 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.

Anzeige

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

Xerox Star und die grafische Benutzeroberfläche mit der Schreibtisch-Metapher. (Bild: Digibarn)

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 du einen kompletten Schreibtisch auf den damals üblichen maximal 12 Zoll großen Bildschirmen abbilden sollst? Genau. Du hast 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 dir helfen, wenn du Piktogramme erstellen willst oder musst.

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.

Skeuomorphismus und hohe Auflösungen ermöglichen das perfekte Abbild der Wirklichkeit. Ein perfektes Icon ergibt sich so aber noch lange nicht. (Dribbble: Eddie Lobanovskiy )

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.

Willst du mit den Reminiszenzen an vergangene Zeiten nicht leben, hasst gar den Skeuomorphismus, dann rate ich dir, deinen Standpunkt zu überdenken. Hilft das nichts, kannst du dich immer noch assoziativer Kniffe bedienen und deine Icons an bekannter Funktionssprache orientieren. Ein Beispiel kann etwa das liegende Dreieck als etablierte Metapher für „Play” sein.

Skeuomorphismus in gemäßigter Form. (Dribbble: Creative Mints)

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, du kommst ohnehin nicht mehr auf die Idee, eine 3,5” Floppydisk als Icon einzusetzen. Solche Kandidaten gibt es einige, etwa das CD-Symbol.

Tipp #2: Zeichne nicht drauf los, sondern recherchiere gründlich

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

Hier solltest du ganz selbstverständlich auch bei den freien und kommerziellen Anbietern von Icon-Sets vorbeischauen. Wir müssen das Rad nicht völlig neu erfinden. Außerdem haben die Designer von Diensten wie icons8 die gleichen Probleme gewälzt, wie du es jetzt tust. Solltest du beim Stöbern die perfekte Lösung finden, dann nimm sie. Du musst nicht zwanghaft selbst erstellen, was es so schon gibt.

Wenn du für einen Kunden gestaltest, könnte es sinnvoll sein, einen Teil seiner Marke oder seines Logos in das Design einzubeziehen. Verwendet dein Kunde etwa einen Stern im Logo, könntest du diesen Stern auch im Icon-Design berücksichtigen. Schau genau hin, was sich im konkreten Fall anbietet. Damit bringst du vollkommen unproblematisch eine persönliche Note in die Gestaltung und schützt deine 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 dir klar sein, dass du selbst bei einer nur kleinen Icon-Familie kaum in der Lage sein wirst, 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 gestaltest du zugunsten der übergreifenden Konsistenz der Icon-Familie insgesamt.

Tipp #3: Weniger ist mehr – überlade deine 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 dein Icon nur ein Mittel zum Zweck. Wenn du diesen Zweck mit der Kombinationen zweier einfacher Formen erreichen kannst, dann ist das kein Nachteil, sondern ein Vorteil.

Dass diese sogenannten Icons jemand auf den ersten Blick einordnen kann, darf wohl als ausgeschlossen gelten. (Dribbble: Fireart Studio)

Lass 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 dein Icon bestehen könnte, sind vollkommen in Ordnung, wenn dein Icon damit eindeutig erkennbar wird. Leider wird es vielfach eher so sein, dass ein derart simples Icon verschiedene Interpretationen zulässt. Erweitere dein Design dann solange, bis du eine eindeutige Interpretation des Symbols sichergestellt hast.

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

Tipp #4: Entscheide dich für einen Stil und bleibe dabei

Ich bin kein Freund von Schubladen. Deshalb werde ich jetzt vermeiden, eine vermeintlich abschließende Aufzählung der derzeit gängigen Icon-Designstile zu verfassen. Ich bin auch nicht der Auffassung, dass uns die Kategorisierung von Designleistungen als Community unheimlich nach vorne bringt.

Natürlich gibt es immer mehrere Möglichkeiten zur Visualisierung des gleichen Themas, wie dieser Ausschnitt aus dem Symbolfundus von icons8 zeigt. Gesucht hatte ich nach Kamera-Icons beliebiger Art. (Screenshot: Dr. Web)

Was ich dir rate, ist ganz einfach. Wenn du deine Icons eher skizzenhaft zeichnen willst, dann tu es, aber bleib über das gesamte Set dabei. Wenn du dich für ein, zwei oder drei Farben entscheidest, dann verwende sie konsistent und immer in der gleichen Weise. Wenn du Perspektive oder Lichteinfall und Schattenwurf ins Spiel bringst, dann verwende immer die gleiche Perspektive und lass das Licht stets von der gleichen Seite kommen und auf die gleiche Seite den Schatten werfen.

Das ist doch logisch, magst du 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: Arbeite auf das Pixel genau und verzichte 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. Du kennst das vielleicht, wenn du in geselliger Runde Pictionary spielst. 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 dein Icon schlicht nicht gut ist, wenn du es nicht schaffst, 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 du nun alle Icons krampfhaft auf dieses Grid hin zeichnest. Vielmehr dürfen deine 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 deines 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, lässt du 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: Mach es wie Abraham Lincoln

„Wenn ich acht Stunden Zeit hätte, um einen Baum zu fällen, würde ich sechs Stunden die Axt schleifen.” Diese Aussage wird dem ehemaligen US-Präsidenten zugeschrieben und sie hat für das Icon-Design ebenso ihre Gültigkeit.

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:

(Der Beitrag erschien erstmals im März 2018 und wird seitdem aktuell gehalten. Das letzte Update erfolgte im Mai 2019.)

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.