Icons und Vektorgrafik
Icons gehören zu den kleinsten grafischen Elementen einer digitalen Benutzeroberfläche. Trotzdem müssen sie häufig mehrere Aufgaben gleichzeitig erfüllen: Sie sollen eine Funktion andeuten, sich von benachbarten Symbolen unterscheiden, auf unterschiedlichen Displaygrößen erkennbar bleiben und als zusammengehörige Familie wirken. Eine kontrollierte Formsprache schafft dafür die gestalterische Grundlage.
Geometrische Grundformen wie Kreis, Quadrat, Rechteck, Dreieck und Linie reduzieren komplexe Gegenstände auf wenige charakteristische Merkmale. Ein Briefumschlag kann aus einem Rechteck, zwei diagonalen Linien und einer Klappe bestehen. Ein Lupensymbol verbindet einen Kreis mit einem schrägen Griff. Die Reduktion ist jedoch keine bloße Vereinfachung. Entscheidend ist, welche Konturen, Proportionen und Zwischenräume die Bedeutung eines Gegenstands erhalten.
Für digitale Produkte bietet eine geometrische Basis außerdem technische Vorteile. Vektorobjekte lassen sich ohne Qualitätsverlust skalieren, präzise ausrichten und systematisch anpassen. Werden Formen nach wiederkehrenden Regeln konstruiert, entstehen Icons mit ähnlicher optischer Dichte und vergleichbarer visueller Gewichtung. Dadurch muss nicht jedes Symbol isoliert beurteilt werden. Die Gestaltung wird zu einem nachvollziehbaren System, das sich erweitern und prüfen lässt.
Jede Icon-Familie kann auf einem begrenzten Formenvokabular aufbauen. Die folgenden Elemente decken einen großen Teil typischer Benutzeroberflächen ab:
Diese Formen sind keine festen Bedeutungsträger. Ein Kreis steht nicht automatisch für eine bestimmte Funktion. Bedeutung entsteht aus dem Zusammenspiel von Form, Anordnung, Kontext und gegebenenfalls einem zweiten Symbol. Die Aufgabe des Gestalters besteht daher darin, bekannte visuelle Hinweise zu nutzen, ohne die gesamte Icon-Sprache auf austauschbare Klischees zu reduzieren.
Ein Konstruktionsraster hilft dabei, Icons unter vergleichbaren Bedingungen zu zeichnen. Es kann aus einer quadratischen Arbeitsfläche, Hilfslinien für die optische Mitte, einem Randabstand und wiederkehrenden Teilungen bestehen. Die konkrete Rastergröße hängt vom verwendeten Vektorprogramm und vom späteren Einsatz ab. Wichtiger als eine bestimmte Zahl ist, dass alle Symbole nach denselben Regeln angelegt werden.
Bei der Konstruktion sollte zwischen geometrischer und optischer Ausrichtung unterschieden werden. Ein mathematisch exakt zentrierter Kreis kann neben einem Rechteck kleiner wirken, obwohl beide dieselbe Höhe besitzen. Eine nach unten zeigende Spitze braucht unter Umständen etwas zusätzlichen Raum, damit das Symbol nicht optisch absackt. Ebenso kann ein rundes Objekt über die gedachte Begrenzung hinausragen, weil es sonst gegenüber kantigen Formen zu klein erscheint.
Ein belastbares Raster beantwortet unter anderem diese Fragen:
Das Raster ersetzt nicht die visuelle Prüfung. Es verhindert jedoch, dass jede Entscheidung spontan und ohne Bezug zu den übrigen Symbolen getroffen wird.
Die Wahl zwischen Kontur- und Flächenkonstruktion gehört zu den wichtigsten Grundsatzentscheidungen. Kontur-Icons bestehen überwiegend aus Linien und offenen Innenräumen. Sie wirken leicht und detailorientiert, benötigen aber ausreichend Platz zwischen benachbarten Linien. Flächen-Icons verwenden gefüllte Formen und sind bei kleinen Darstellungen oft robuster, können bei zu hoher Dichte jedoch schwer wirken.
Bei Konturen muss die Strichstärke über die gesamte Familie hinweg kontrolliert werden. Gleiche numerische Werte führen nicht immer zur gleichen optischen Wirkung. Eine waagerechte Linie kann stärker erscheinen als eine diagonale, und geschlossene Flächen können das Symbol zusätzlich verdichten. Runde Linienabschlüsse und abgerundete Ecken erzeugen eine andere Anmutung als gerade Abschlüsse und scharfe Winkel.
Besondere Aufmerksamkeit verdienen sich berührende Formen. Wenn sich zwei Konturen überschneiden, entstehen schnell dunkle Knotenpunkte. Eine Lösung kann darin bestehen, eine Linie zu unterbrechen, eine Fläche im Hintergrund zu platzieren oder den Abstand geringfügig zu vergrößern. Solche Eingriffe verändern die Geometrie, verbessern aber die Lesbarkeit. Für Zustände wie aktiv, inaktiv oder ausgewählt sollte außerdem festgelegt werden, ob sich Farbe, Füllung, Konturstärke oder eine Kombination dieser Merkmale ändert. Eine konsistente Zustandslogik verhindert, dass die Bedeutung allein von schwer erkennbaren Farbunterschieden abhängt.
Ein überzeugendes Icon entsteht meist durch eine Hierarchie aus wenigen Formen. Zuerst wird das Hauptobjekt bestimmt, danach werden charakteristische Details ergänzt. Diese Reihenfolge schützt vor einer Überladung mit Einzelheiten.
Eine praktische Vorgehensweise sieht so aus:
Ein Drucker kann beispielsweise aus einem Rechteck für das Gehäuse, einem schmalen Ausgabeschacht, einem Blatt und wenigen Statuspunkten aufgebaut werden. Werden die sichtbaren Teile zu gleichwertig behandelt, verliert das Auge die Hauptform. Die visuelle Hierarchie sollte deshalb auch bei einer monochromen Darstellung erkennbar bleiben.
Nicht nur die gezeichneten Flächen bestimmen den Charakter eines Icons. Ebenso wichtig sind die unbemalten Bereiche zwischen und innerhalb der Formen. Diese negativen Räume trennen Elemente, geben der Silhouette Luft und machen kleine Symbole auch bei reduzierter Auflösung verständlich.
Ein häufiger Fehler besteht darin, ausschließlich die positiven Flächen zu messen. Zwei Icons können dieselbe Außenabmessung und dieselbe Strichstärke besitzen, aber unterschiedlich schwer wirken. Ein dicht gefülltes Symbol braucht möglicherweise größere Innenräume oder weniger Details. Ein Symbol mit vielen dünnen Linien kann dagegen durch zu große Abstände auseinanderfallen.
Für die Prüfung helfen mehrere Ansichten:
Negative Räume sind dabei keine bloßen Restflächen. Sie gehören zur Konstruktion und sollten im Designsystem genauso bewusst behandelt werden wie Kreisradien, Konturen und Endpunkte.
Vektorgrafiken beschreiben Formen über mathematische Pfade, Ankerpunkte, Kurven und Attribute wie Füllung oder Kontur. Diese Struktur ermöglicht verlustarmes Skalieren und erleichtert spätere Änderungen. Für Icons ist sie besonders nützlich, weil geometrische Grundformen präzise dupliziert, gespiegelt und an gemeinsamen Hilfslinien ausgerichtet werden können.
Technische Qualität bedeutet jedoch mehr als eine saubere Außenkante. Vor der Übergabe oder Veröffentlichung sollten unter anderem folgende Punkte kontrolliert werden:
Beim Export sollten die Anforderungen des Zielsystems berücksichtigt werden. Eine Version für eine skalierbare Benutzeroberfläche kann andere Eigenschaften benötigen als eine gerasterte Datei für eine feste Bildschirmgröße. Eine klare Benennung der Varianten und eine unveränderte Quelldatei erleichtern spätere Korrekturen.
Eine einzelne gelungene Zeichnung garantiert noch keine stimmige Sammlung. Konsistenz zeigt sich erst im Vergleich. Dafür kann eine Prüftabelle mit wiederkehrenden Gestaltungsmerkmalen angelegt werden:
| Merkmal | Prüffrage | Typische Korrektur |
|---|---|---|
| Grundform | Verwendet das Symbol dieselben geometrischen Prinzipien wie die übrigen Icons? | Formen vereinheitlichen oder eine begründete Ausnahme dokumentieren |
| Strichstärke | Wirkt die Kontur gleich schwer wie bei vergleichbaren Symbolen? | Stärke, Abschluss oder optische Anpassung überarbeiten |
| Randabstand | Besitzt die Silhouette ausreichend Raum zur Zeichenfläche? | Skalierung und optische Zentrierung anpassen |
| Detailgrad | Ist die Menge an Information bei kleiner Darstellung tragfähig? | Unwichtige Innenlinien entfernen oder zusammenfassen |
| Zustände | Sind aktiv, inaktiv und ausgewählt eindeutig unterscheidbar? | Füllung, Kontur oder Kontrast nach einer gemeinsamen Regel ändern |
Neue Icons sollten aus vorhandenen Regeln abgeleitet werden, nicht nur aus einem ähnlichen Motiv. Dazu gehören definierte Eckradien, Endkappen, Abstände und Ebenen. Wenn eine neue Funktion eine Ausnahme verlangt, sollte die Abweichung begründet sein. Eine Formsprache bleibt dadurch flexibel, ohne beliebig zu werden.
Viele Probleme entstehen nicht durch fehlende Zeichenkenntnisse, sondern durch unklare Prioritäten. Eine Sammlung kann technisch sauber aussehen und dennoch uneinheitlich wirken. Häufige Ursachen sind:
Die Korrektur sollte mit dem gravierendsten Problem beginnen. Zuerst stehen Silhouette und Erkennbarkeit, danach Proportionen und optisches Gewicht. Dekorative Feinheiten kommen erst an letzter Stelle.
Für ein neues Set empfiehlt sich ein wiederholbarer Arbeitsablauf. Zunächst wird ein kurzer visueller Leitfaden erstellt. Er beschreibt Grundformen, Raster, Strichstärken, Eckradien, Endabschlüsse, Farben und Zustände. Diese Vorgaben müssen nicht umfangreich sein, sollten aber konkrete Entscheidungen enthalten.
Danach werden einige repräsentative Symbole konstruiert. Geeignet sind Motive mit unterschiedlichen Eigenschaften, etwa ein überwiegend rundes Symbol, ein rechteckiges Objekt, ein gerichtetes Zeichen und ein Motiv mit mehreren Ebenen. An diesen Beispielen lässt sich erkennen, ob die Regeln auch außerhalb einer einzigen Form funktionieren.
Im nächsten Schritt erfolgt die Prüfung in realistischen Zusammenhängen. Icons sollten nicht nur auf einer leeren Zeichenfläche, sondern auch neben Text, in Navigationen, auf hellen und dunklen Hintergründen sowie in aktiven und inaktiven Zuständen betrachtet werden. Die Verwendung von Farbe sollte dabei kontrolliert erfolgen, damit Formprobleme nicht verdeckt werden.
Vor der Veröffentlichung werden Quelldateien versioniert, Varianten nachvollziehbar benannt und Exporte kontrolliert. Änderungen an einer Grundregel können viele Symbole betreffen. Deshalb ist es sinnvoll, eine zentrale Referenz für Raster und Formattribute zu pflegen. So bleiben spätere Erweiterungen nachvollziehbar, und neue Motive lassen sich anhand bestehender Entscheidungen bewerten, statt jedes Mal eine neue visuelle Grammatik zu erfinden.
Sie reduzieren komplexe Motive auf wiedererkennbare Strukturen und schaffen gemeinsame Regeln für Proportionen, Abstände und Konturen. Dadurch können Icons als zusammengehörige Familie wahrgenommen und als Vektorgrafik systematisch bearbeitet werden.
Nein. Symmetrie ist ein hilfreiches Konstruktionsmittel, aber keine Pflicht. Asymmetrische Motive können funktional oder inhaltlich notwendig sein. Entscheidend ist, dass Abweichungen optisch ausgewogen wirken und zur Bedeutung des Symbols beitragen.
Beide Ansätze können funktionieren. Konturen benötigen ausreichende Abstände und eine kontrollierte Strichstärke, während Flächen bei hoher Dichte schwer wirken können. Die passende Entscheidung hängt von Motiv, Zielgröße, Kontrast und dem übrigen visuellen System ab.
Die Symbole sollten nebeneinander und in mehreren Größen geprüft werden. Eine Checkliste für Grundformen, Strichstärken, Eckradien, Randabstände, Detailgrad und Zustände macht Unterschiede sichtbar und unterstützt nachvollziehbare Korrekturen.
