Icons und Vektorgrafik
Icons verdichten Informationen auf sehr kleinem Raum. Sie kennzeichnen Funktionen, führen durch Menüs, unterstützen Fehlermeldungen und helfen dabei, Inhalte schneller zu erfassen. Ein einzelnes Symbol kann dabei durchaus gelungen wirken und trotzdem nicht zu einer größeren Sammlung passen. Der Grund liegt meist nicht in der Zeichenqualität, sondern in widersprüchlichen Gestaltungsregeln.
Ein professionelles Icon-Set braucht deshalb ein gemeinsames visuelles System. Dazu gehören unter anderem ein einheitliches Raster, wiederkehrende Grundformen, vergleichbare Strichstärken, abgestimmte Innenabstände und eine klare Regel für optisches Gewicht. Der rote Faden entsteht nicht dadurch, dass jedes Icon gleich aussieht. Er entsteht durch nachvollziehbare Beziehungen zwischen unterschiedlichen Symbolen.
Diese Unterscheidung ist für Websites, Apps, Dashboards und Designsysteme besonders wichtig. Ein Kalender, ein Papierkorb und ein Sicherheitsschloss haben verschiedene Bedeutungen und benötigen unterschiedliche Konturen. Dennoch sollten sie so wirken, als stammten sie aus derselben gestalterischen Sprache.
Am Anfang steht nicht die Zeichnung, sondern die Frage, welche Aufgabe ein Icon erfüllt. Ein Symbol kann eine Aktion auslösen, einen Zustand anzeigen, eine Kategorie markieren oder einen Inhalt ergänzen. Diese Funktionen beeinflussen Größe, Detailgrad und notwendige Unterscheidungsmerkmale.
Für jedes geplante Icon lohnt sich eine kurze Bedeutungsbeschreibung. Formuliere dabei, welche Information das Symbol vermittelt und welche Handlung oder Entscheidung daraus folgt. Diese Definition verhindert, dass ein Icon später mit dekorativen Details überladen wird, die seine Aussage schwächen.
Bei mehrdeutigen Begriffen sollte geprüft werden, ob ein einzelnes Symbol ausreicht. Ein Zahnrad kann je nach Kontext Einstellungen, Technik oder Verarbeitung bedeuten. In solchen Fällen helfen ein sichtbarer Kontext, ein Textlabel oder eine präzisere Kombination aus Grundform und Zusatzmerkmal.
Ein Raster sorgt dafür, dass Icons technisch und optisch zueinander passen. Es legt fest, wie viel Zeichenfläche zur Verfügung steht und an welchen Positionen wichtige Punkte liegen. Für digitale Oberflächen bietet sich ein quadratischer Zeichenbereich an, der sich in kleinere Einheiten unterteilen lässt. Entscheidend ist nicht eine bestimmte Rastergröße, sondern dass sie konsequent verwendet wird.
Definiere zunächst folgende Schlüsselmaße:
Das Raster sollte nicht als starres Gefängnis verstanden werden. Kreise, Diagonalen und abgerundete Formen wirken innerhalb desselben geometrischen Rahmens oft kleiner oder größer als rechteckige Flächen. Deshalb benötigt das System zusätzlich eine optische Korrektur. Ein Kreis kann geringfügig über eine gedachte Begrenzung hinausreichen, damit er neben einem Quadrat nicht zu klein wirkt.
Lege außerdem fest, ob die Icons eine gemeinsame Grundlinie, eine optische Mitte oder einen einheitlichen visuellen Schwerpunkt besitzen. Diese Entscheidung ist für Sets mit sehr unterschiedlichen Formen besonders wertvoll. Das mathematische Zentrum eines Symbols entspricht nicht immer seinem wahrgenommenen Zentrum.
Bei konturbasierten Icons gehört die Strichstärke zu den stärksten Erkennungsmerkmalen. Wenn ein Symbol mit deutlich kräftigerer Linie gezeichnet wird als die übrigen Zeichen, verändert sich sein optisches Gewicht. Das gilt auch dann, wenn die Abmessungen identisch sind.
Lege daher fest, ob die Linien eine konstante oder eine variable Stärke haben. Eine konstante Stärke erleichtert die Pflege und eignet sich häufig für Benutzeroberflächen. Variable Stärken können bei komplexen Illustrationen sinnvoll sein, benötigen aber genaue Regeln, damit Haupt- und Nebenlinien nicht beliebig wirken.
Zu den verbindlichen Vorgaben gehören:
Ein häufiger Fehler entsteht, wenn ein Icon aus mehreren Formen zusammengesetzt wird und an den Schnittstellen ungewollte Verdickungen sichtbar werden. Solche Stellen sollten in der Vektordatei bereinigt oder durch eine klare Ebenenlogik kontrolliert werden. Das Ziel ist eine nachvollziehbare Form, nicht eine Ansammlung technisch übereinandergelegter Pfade.
Einheitlichkeit verlangt nicht, jede Form nach demselben mathematischen Verfahren zu skalieren. Ein gefülltes Quadrat besitzt bei gleicher Höhe häufig mehr optisches Gewicht als ein Kreis. Ein schmaler Pfeil kann wiederum kleiner erscheinen, obwohl er dieselbe Fläche einnimmt. Diese Unterschiede werden besonders in Symbolleisten sichtbar, in denen mehrere Icons direkt nebeneinanderstehen.
Arbeite deshalb mit Vergleichsreihen. Zeichne mehrere Grundformen in derselben Zielgröße und prüfe, ob sie nebeneinander ausgewogen wirken. Passe danach nicht nur die Außenmaße, sondern auch Innenräume und Schwerpunkt an. Bei einem Pfeil kann ein größerer Innenabstand nötig sein, während ein Pluszeichen mit zu viel Freiraum an Prägnanz verliert.
Hilfreich ist eine kleine Referenzgruppe aus sehr unterschiedlichen Formen:
Wenn diese Referenzen ausgewogen wirken, lassen sich neue Icons daran ausrichten. Der Vergleich sollte in der tatsächlichen Anwendung erfolgen, nicht nur in der vergrößerten Arbeitsansicht. Viele Ungleichgewichte werden erst sichtbar, wenn die Symbole in ihrer vorgesehenen Pixelgröße erscheinen.
Ein Icon-Set verliert seinen roten Faden, wenn manche Symbole aus vielen Einzelheiten bestehen und andere auf eine Grundform reduziert sind. Der Detailgrad muss zur kleinsten geplanten Darstellung passen. Linien, die in der Arbeitsdatei sauber aussehen, können bei geringer Größe zusammenlaufen oder verschwinden.
Prüfe jedes Symbol deshalb in mehreren realistischen Größen. Achte dabei auf:
Wenn ein Detail bei kleiner Darstellung nicht mehr funktioniert, gibt es mehrere Möglichkeiten. Es kann entfernt, vergrößert, stärker vom Hintergrund getrennt oder durch eine reduzierte Variante ersetzt werden. Eine solche Anpassung ist keine Abweichung vom System, wenn sie als definierte Größenvariante dokumentiert wird.
Vermeide jedoch eine unkontrollierte Zahl an Sonderversionen. Für jedes zusätzliche Detailniveau steigt der Aufwand bei Pflege, Export und Qualitätssicherung. Eine klare Regel, wann eine kompakte Variante eingesetzt wird, hält das Set übersichtlich.
Viele Icon-Sammlungen verwenden sowohl Outline- als auch Filled-Varianten. Diese Kombination kann funktionieren, wenn die Beziehung zwischen beiden Stilen eindeutig geregelt ist. Ohne solche Regeln wirken gefüllte Symbole schnell schwerer oder stammen scheinbar aus einer anderen Sammlung.
Definiere zunächst, ob die beiden Varianten dieselbe Grundgeometrie teilen. Anschließend sollte festgelegt werden, welche Flächen gefüllt werden und welche Innenräume offen bleiben. Ein Schloss, ein Haus oder ein Ordner kann in einer gefüllten Version stärker verdichtet werden. Die charakteristischen Aussparungen müssen dennoch erhalten bleiben, damit die Bedeutung nicht verloren geht.
Auch der Einsatz von Farbe braucht eine Systematik. Eine Farbe kann eine Aktion, einen Zustand oder eine Kategorie kennzeichnen. Ihre Bedeutung darf nicht die einzige Orientierung sein, da Nutzerinnen und Nutzer mit eingeschränktem Farbsehen oder bei kontrastarmen Darstellungen sonst benachteiligt werden. Ergänzende Formmerkmale, Textlabels oder Zustandsbeschreibungen erhöhen die Verständlichkeit.
Prüfe Konturen und Füllflächen außerdem auf unterschiedlichen Hintergründen. Ein Icon, das auf einer hellen Fläche klar wirkt, kann auf einer farbigen Oberfläche an Kontrast verlieren. Die visuelle Sprache bleibt nur dann stabil, wenn die technischen Einsatzbedingungen berücksichtigt werden.
Ein gutes Gestaltungssystem endet nicht bei der sichtbaren Form. Dateien müssen auffindbar, bearbeitbar und eindeutig zuordenbar sein. Verwende nachvollziehbare Namen, die Funktion und Variante beschreiben. Zustände, Größenstufen und Darstellungsarten sollten nach einer einheitlichen Benennungslogik geführt werden.
Für die interne Struktur der Vektordateien sind folgende Regeln hilfreich:
Vor dem Export sollten Pfade auf überflüssige Ankerpunkte, offene Enden und versehentliche Überschneidungen geprüft werden. Zu viele Ankerpunkte erschweren spätere Änderungen und können die Form unruhig machen. Bei der Übergabe an Entwicklung oder Produktion müssen außerdem die vorgesehenen Dateiformate, Farbräume und Skalierungsregeln dokumentiert sein.
Eine kurze Spezifikation ist wertvoller als verstreute Einzelentscheidungen. Sie sollte Raster, Maße, Stilregeln, Varianten, Benennung und Prüfverfahren enthalten. Dadurch bleibt das Set erweiterbar, auch wenn die ursprüngliche Gestaltung später von einer anderen Person gepflegt wird.
Die Qualitätsprüfung sollte mehrere Ebenen abdecken. Zuerst wird jedes Icon einzeln kontrolliert. Danach folgt der Vergleich innerhalb thematischer Gruppen und schließlich die Prüfung in der tatsächlichen Benutzeroberfläche. Ein Symbol kann isoliert überzeugend sein, aber in einer Leiste durch seine Größe oder Dichte aus dem Rahmen fallen.
Für die Prüfung kann eine Tabelle mit festen Kriterien verwendet werden. Dadurch werden Diskussionen konkreter und spätere Änderungen nachvollziehbar.
| Prüfbereich | Leitfrage | Mögliche Korrektur |
|---|---|---|
| Silhouette | Ist die Grundbedeutung ohne Details erkennbar? | Kontur vereinfachen oder charakteristisches Merkmal verstärken |
| Optisches Gewicht | Wirkt das Icon neben anderen Zeichen gleichwertig? | Außenmaß, Innenraum oder Strichstärke anpassen |
| Lesbarkeit | Bleiben wichtige Details in kleiner Darstellung sichtbar? | Detail entfernen oder kompakte Variante definieren |
| Kontrast | Bleibt das Symbol auf allen vorgesehenen Flächen sichtbar? | Farbe, Kontur oder Hintergrundbezug überarbeiten |
| Semantik | Wird die beabsichtigte Funktion eindeutig verstanden? | Form präzisieren oder ein Textlabel ergänzen |
Icons unterstützen die Orientierung, ersetzen aber nicht automatisch eine verständliche Beschriftung. Besonders bei abstrakten Funktionen kann ein Symbol unterschiedlich interpretiert werden. In wichtigen Bedienabläufen sollte deshalb geprüft werden, ob zusätzlich ein Text, ein zugänglicher Name oder eine erklärende Zustandsinformation erforderlich ist.
Farbe darf nicht die einzige Kennzeichnung eines Zustands sein. Ein Warnsymbol sollte beispielsweise durch Form, Text oder Position verständlich bleiben, wenn die Farbdifferenz nicht wahrgenommen wird. Auch bei deaktivierten Symbolen ist Vorsicht geboten: Eine starke Reduzierung des Kontrasts kann die Bedienbarkeit beeinträchtigen.
Bei interaktiven Elementen muss der sichtbare Zustand eindeutig sein. Für aktiv, inaktiv, fokussiert, ausgewählt, gesperrt und fehlerhaft sollten nachvollziehbare Varianten definiert werden. Diese Varianten müssen nicht durch völlig neue Zeichnungen entstehen. Häufig reichen Änderungen an Kontur, Füllung, Hintergrund oder ergänzenden Markierungen, sofern sie deutlich und konsistent eingesetzt werden.
Die Prüfung sollte möglichst mit realen Nutzungssituationen verbunden werden. Dazu gehören unterschiedliche Bildschirmgrößen, helle und dunkle Oberflächen, Zoomstufen sowie Eingabemethoden. Die konkrete technische Umsetzung hängt vom jeweiligen Produkt ab, doch die gestalterische Verantwortung beginnt bereits bei der Definition des Icon-Systems.
Ein häufiger Fehler besteht darin, neue Icons nach Einzelwunsch zu zeichnen, ohne die bestehenden Regeln zu konsultieren. So entstehen nach und nach unterschiedliche Radien, Strichstärken und Innenabstände. Die Sammlung wächst zwar, verliert aber ihre gemeinsame Sprache.
Weitere problematische Vorgehensweisen sind:
Ein weiterer Fehler ist die Annahme, dass mathematische Genauigkeit automatisch zu visueller Qualität führt. Gerade Kreise, Diagonalen und symmetrische Formen benötigen oft optische Korrekturen. Diese Korrekturen sollten jedoch dokumentiert werden, damit sie nicht als zufällige Abweichungen erscheinen.
Wenn ein bestehendes Set überarbeitet wird, empfiehlt sich eine Bestandsaufnahme. Gruppiere die vorhandenen Icons nach Stil, Funktion, Größe und Qualität. Danach kann entschieden werden, welche Zeichen angepasst, ersetzt oder als Sonderfall dokumentiert werden. Eine schrittweise Bereinigung ist meist kontrollierbarer als eine unkoordinierte Neuzeichnung aller Symbole.
Ein strukturierter Ablauf reduziert spätere Korrekturschleifen und hält gestalterische Entscheidungen nachvollziehbar. Die Reihenfolge kann je nach Projekt angepasst werden, sollte aber die Abhängigkeiten zwischen Bedeutung, Form und technischer Nutzung berücksichtigen.
Der wichtigste Kontrollpunkt liegt vor der massenhaften Ausarbeitung. Wenn Raster, Gewicht und Komplexität bei den Referenzsymbolen noch nicht überzeugend sind, sollte das System dort korrigiert werden. Spätere Anpassungen an vielen fertigen Icons verursachen deutlich mehr Aufwand.
Es braucht keine möglichst lange Sammlung von Vorgaben, sondern Regeln für die Entscheidungen, die regelmäßig auftreten. Raster, Strichstärke, Ecken, Enden, Abstände, Varianten, Farbe und Export sollten abgedeckt sein. Sonderfälle werden besser einzeln begründet und dokumentiert, statt das gesamte System wegen eines Ausnahmefalls zu verändern.
Die Zeichenfläche kann einheitlich sein, doch die sichtbare Form muss nicht überall dieselben Außenmaße erreichen. Ein Kreis, ein Pfeil und ein breites Rechteck benötigen häufig optische Korrekturen. Entscheidend ist, dass sie in der gemeinsamen Nutzung ähnlich ausgewogen wirken.
Beide Darstellungsarten können zusammen funktionieren, wenn ihre Grundgeometrie, ihr optisches Gewicht und ihr Einsatzgebiet geregelt sind. Ohne klare Zuordnung entsteht schnell ein uneinheitlicher Eindruck. Für kleine Größen kann eine eigene Variante sinnvoll sein, sofern sie als Teil des Systems definiert ist.
Ein Icon ist zu detailliert, wenn wichtige Formen bei der kleinsten vorgesehenen Darstellung zusammenlaufen, verschwinden oder eine andere Bedeutung nahelegen. Die Entscheidung sollte anhand realer Größen und Kontexte getroffen werden, nicht ausschließlich in der vergrößerten Vektoransicht.
Neue Symbole sollten gegen Referenzicons, dokumentierte Maße und die vorgesehenen Nutzungskontexte geprüft werden. Eine zentrale Spezifikation, nachvollziehbare Dateinamen und eine regelmäßige Qualitätskontrolle verhindern, dass jede Erweiterung zu einem neuen Einzelstil führt.
