Icons und Vektorgrafik
Icons werden oft in wenigen Sekunden wahrgenommen. Dabei prüft das Auge nicht bewusst jede Linie, erkennt aber sofort, wenn einzelne Symbole aus einem gemeinsamen System herausfallen. Eine unterschiedliche Strichstärke, ein abweichender Eckenradius oder eine ungleichmäßige Linienführung kann eine ansonsten gut gestaltete Benutzeroberfläche unruhig wirken lassen.
Konsistenz bedeutet nicht, dass jedes Icon identisch aussehen muss. Ein Pfeil, ein Kalender und ein komplexeres Einstellungs-Symbol benötigen unterschiedliche Formen. Sie sollten jedoch auf gemeinsamen gestalterischen Regeln beruhen. Dazu gehören unter anderem die Stärke der Linien, die Behandlung von Endpunkten, die Rundung von Ecken, die Größe der Innenräume und die Ausrichtung am Raster.
Besonders wichtig ist die Abstimmung zwischen Strichstärke und Eckenradius. Eine kräftige Linie mit sehr kleinen Radien wirkt schnell hart oder technisch uneinheitlich. Ein großer Radius in Kombination mit einer dünnen Linie kann dagegen weich und instabil erscheinen. Die Qualität eines Icon-Sets entsteht deshalb weniger durch einzelne dekorative Entscheidungen als durch ein nachvollziehbares System.
Die Strichstärke beschreibt die Breite einer Linie, die eine Form aufbaut. Bei Vektor-Icons wird sie häufig als Konturstärke angegeben. Das optische Gewicht eines Symbols hängt jedoch nicht ausschließlich von diesem numerischen Wert ab. Auch die Anzahl der Linien, ihre Länge, geschlossene Flächen und die Größe der Innenräume beeinflussen die Wahrnehmung.
Zwei Icons mit derselben Konturstärke können unterschiedlich schwer wirken. Ein Symbol mit vielen kurzen Linien enthält mehr dunkle Bereiche als ein einzelner langer Umriss. Eine geschlossene Fläche wirkt meist kräftiger als eine gleich breite offene Kontur. Auch ein kleines Icon erscheint bei gleicher relativer Linienbreite oft dichter als ein großes Symbol.
Für die Praxis bedeutet das: Eine gemeinsame Strichstärke ist eine wichtige Ausgangsregel, ersetzt aber keine visuelle Kontrolle. Bei besonders komplexen Icons kann eine geringfügige Anpassung sinnvoll sein, wenn dadurch das Gesamtgewicht des Sets besser zusammenpasst. Solche Ausnahmen sollten dokumentiert werden, damit sie nicht zufällig entstehen.
Geometrische Gleichheit liegt vor, wenn alle Konturen exakt denselben definierten Wert besitzen. Optische Gleichheit beschreibt dagegen den Eindruck, den die Symbole bei gleicher Anzeigegröße hinterlassen. Ein professioneller Icon-Satz benötigt beides: klare technische Vorgaben und eine abschließende Prüfung der tatsächlichen Wahrnehmung.
Vor der Gestaltung einzelner Symbole sollte eine Grundstrichstärke festgelegt werden. Diese Entscheidung hängt von der vorgesehenen Verwendung ab. Icons für kleine Bedienelemente benötigen ausreichend klare Linien, während große Illustrationssymbole mehr Raum für feinere Differenzierungen bieten. Maßgeblich sind die kleinste Zielgröße, der Kontrast, die Hintergrundfarbe und die technische Ausgabe als Vektor oder Rastergrafik.
Eine belastbare Definition umfasst mehr als den Zahlenwert der Kontur. Dokumentiert werden sollten mindestens:
Wer mit einem Raster arbeitet, kann die Strichstärke zusätzlich in Beziehung zu diesem Raster setzen. Das verhindert, dass Konturen bei verschiedenen Symbolen zufällig an unterschiedlichen Positionen liegen. Bei responsiven Anwendungen sollte außerdem geprüft werden, ob das Icon skaliert oder in mehreren optimierten Größen ausgegeben wird. Eine Kontur, die in einer großen Darstellung überzeugend aussieht, kann bei kleiner Darstellung optisch zulaufen.
Für ein Set mit mehreren Gewichtungen, beispielsweise einer regulären und einer kräftigen Variante, müssen die Unterschiede bewusst definiert sein. Die Varianten sollten nicht nur durch eine nachträgliche Änderung der Kontur entstehen. Innenräume, Abstände und gegebenenfalls die Größe der Form müssen ebenfalls angepasst werden, damit die Hierarchie verständlich bleibt.
Der Eckenradius bestimmt, wie stark eine Ecke abgerundet wird. Er beeinflusst die technische Anmutung, die Lesbarkeit und die Dichte eines Icons. Kleine Radien bewahren eine klare, präzise Silhouette. Größere Radien erzeugen einen weicheren und oft freundlicheren Eindruck. Entscheidend ist das Verhältnis zwischen Radius, Strichstärke und verfügbaren Innenflächen.
Bei einer konturierten Form entsteht die sichtbare Rundung nicht nur an der Außenkante. Auch die Innenkante der Kontur verändert sich. Wenn der Radius zu klein für die verwendete Strichstärke ist, kann die innere Ecke fast spitz oder optisch zugesetzt wirken. Der äußere Radius bleibt zwar mathematisch vorhanden, die Form verliert aber an Klarheit.
Als robuste Regel eignet sich ein abgestuftes Radius-System statt einer Vielzahl beliebiger Werte. Ein Icon-Satz kann beispielsweise einen Basisradius, einen größeren Radius für markante Flächen und eine scharfe oder nahezu scharfe Variante für technische Details verwenden. Die konkrete Abstufung sollte aus dem Designsystem hervorgehen und in der verwendeten Vektorsoftware exakt nachvollziehbar sein.
| Gestaltungselement | Worauf zu achten ist | Typisches Risiko bei Abweichungen |
|---|---|---|
| Grundstrichstärke | Gewicht und kleinste Zielgröße festlegen | Einzelne Icons wirken zu schwach oder zu schwer |
| Eckenradius | Mit Kontur und Symbolgröße abstimmen | Innenräume laufen zu oder Ecken wirken zufällig |
| Linienenden | Eine gemeinsame Endkappen-Regel verwenden | Offene Linien besitzen unterschiedliche Charaktere |
| Linienverbindungen | Runde, abgeschrägte oder spitze Verbindung bewusst wählen | Übergänge erscheinen hart oder unruhig |
| Innenabstände | Abstände zwischen Konturen und Flächen prüfen | Das optische Gewicht wird trotz gleicher Kontur uneinheitlich |
Strichstärke und Eckenradius lassen sich nicht isoliert betrachten. Bei offenen Linien entscheidet die Endkappe darüber, wie lang und schwer ein Segment wirkt. Runde Endkappen verlängern eine Linie optisch und erzeugen einen weicheren Eindruck. Abgeschnittene Enden wirken präziser, können bei kleinen Größen aber kürzer oder härter erscheinen.
Linienverbindungen beeinflussen vor allem Winkel. Eine spitze Verbindung kann bei einem engen Winkel weit über die eigentliche Form hinausragen. Eine runde Verbindung verteilt die Masse gleichmäßiger, während eine abgeschrägte Verbindung zwischen beiden Wirkungen liegt. Wird diese Einstellung innerhalb eines Sets gewechselt, erkennen Nutzer den Unterschied häufig schneller als erwartet.
Für die Dokumentation empfiehlt sich eine kleine Regelkarte innerhalb der Arbeitsdatei. Sie sollte Beispiele für eine offene Linie, eine geschlossene Ecke, einen spitzen Winkel und eine Form mit Innenkontur enthalten. Dadurch lässt sich bei neuen Icons prüfen, ob die gewählte Linienlogik noch zum bestehenden System passt.
Ein strukturierter Ablauf reduziert spätere Korrekturen. Die folgenden Schritte eignen sich für neue Icons und für die Überarbeitung eines vorhandenen Sets.
Dieser Ablauf trennt gestalterische Entscheidungen von technischen Korrekturen. Das spart Zeit, weil nicht während des Exports auffällt, dass ein Radius oder eine Verbindung grundsätzlich anders angelegt wurde.
Ein konsistentes Erscheinungsbild beginnt bereits bei der Konstruktion der Pfade. Zu viele Ankerpunkte machen Kurven schwer kontrollierbar. Zu wenige Punkte können dagegen dazu führen, dass eine Rundung nicht präzise der beabsichtigten Form folgt. Für wiederkehrende Geometrien sollten möglichst identische Bausteine oder duplizierte Ausgangsformen verwendet werden.
Ein Raster unterstützt die Ausrichtung, ersetzt aber keine optische Korrektur. Kreise und diagonale Linien können mathematisch korrekt am Raster liegen und trotzdem gegenüber horizontalen Formen zu klein oder zu groß erscheinen. Bei runden Formen ist außerdem die vertikale und horizontale Zentrierung zu prüfen, da die sichtbare Masse nicht immer gleichmäßig verteilt ist.
Konturen sollten bei der Übergabe an andere Werkzeuge mit Bedacht behandelt werden. Eine editierbare Kontur lässt sich später leichter in ihrer Stärke verändern. Eine in Pfade umgewandelte Kontur kann dagegen in bestimmten Produktionsabläufen zuverlässiger sein, verliert aber die direkte Steuerung über den Linienwert. Vor der Umwandlung sollte eine bearbeitbare Originaldatei gesichert werden.
Bei abgerundeten Ecken ist zu kontrollieren, ob der Radius als echte Geometrie, als Kontureinstellung oder als Effekt angelegt wurde. Diese Varianten können beim Export unterschiedlich interpretiert werden. Eine Prüfung in der vorgesehenen Zielanwendung verhindert, dass sich die Darstellung nach der Übergabe verändert.
Ein Icon kann geometrisch korrekt sein und dennoch unausgewogen wirken. Optische Korrekturen sind deshalb legitim, müssen aber kontrolliert erfolgen. Ein rundes Element wird häufig etwas über die rechnerische Begrenzung hinaus ausgerichtet, damit es neben geraden Formen gleich groß erscheint. Diagonale Linien benötigen unter Umständen ebenfalls eine angepasste Länge oder Position.
Bei der Strichstärke sollte zunächst geprüft werden, ob der Eindruck tatsächlich von der Kontur stammt. Ein zu kleiner Innenabstand, eine geschlossene Fläche oder eine ungünstige Überlagerung kann das Symbol ebenfalls schwer erscheinen lassen. Wird vorschnell die Kontur reduziert, kann das Icon im Vergleich zu den übrigen Symbolen zu schwach werden.
Für den Eckenradius gilt eine ähnliche Vorsicht. Eine Ecke kann trotz identischem Radius unterschiedlich rund wirken, wenn die angrenzenden Segmente verschieden lang sind. Bei einem kleinen Detail ist daher eine leicht abweichende optische Korrektur möglich, während die Grundregel des Systems erhalten bleibt. Solche Ausnahmen sollten mit einem Hinweis versehen werden, damit sie bei späteren Anpassungen nicht versehentlich entfernt werden.
Lege jeweils drei Ansichten an: die Icons in ihrer Zielgröße, eine vergrößerte technische Ansicht und eine Darstellung ohne Farbe, beispielsweise als einheitliche dunkle Form. Die erste Ansicht zeigt die Gebrauchstauglichkeit, die zweite die Pfadqualität und die dritte das reine Gewicht. Wenn ein Symbol nur durch seine Farbe ausgewogen wirkt, liegt wahrscheinlich ein geometrisches oder gewichtsbezogenes Problem vor.
Bei gewachsenen Sammlungen entstehen Abweichungen oft unbemerkt. Ein Teil der Icons stammt aus einer älteren Vorlage, andere Symbole wurden aus unterschiedlichen Quellen übernommen oder für eine bestimmte Ansicht improvisiert. Die wichtigsten Fehler lassen sich systematisch prüfen:
Eine Inventur sollte nicht nur einzelne Icons isoliert bewerten. Gruppiere ähnliche Funktionen und Formen. Ein Set kann als Ganzes ausgewogen sein, während ein direkter Vergleich innerhalb einer Kategorie eine deutliche Abweichung sichtbar macht.
Icons werden häufig in Umgebungen eingesetzt, die von der Arbeitsdatei abweichen. Ein Symbol kann auf einem hellen Hintergrund klar erscheinen, auf einem dunklen Hintergrund jedoch durch eine zu feine Kontur an Wirkung verlieren. Auch Transparenz, farbige Flächen und Zustände wie deaktiviert, fokussiert oder ausgewählt verändern das optische Gewicht.
Teste mindestens die vorgesehenen Hintergrundvarianten und Zustände. Dabei sollte die Kontur nicht nur auf maximale Sichtbarkeit optimiert werden. Wenn ein deaktivierter Zustand durch geringeren Kontrast dargestellt wird, dürfen die Innenräume nicht gleichzeitig so klein sein, dass die Form unkenntlich wird.
Für die kleine Darstellung ist eine reduzierte Geometrie oft sinnvoller als das unveränderte Verkleinern eines komplexen Icons. Details, die bei großer Anzeige Orientierung geben, können bei kleiner Anzeige zu dunklen Flecken werden. Eine eigene optimierte Variante ist dann konsistenter als ein automatisches Skalieren. Die grundlegende Strich- und Radiuslogik sollte trotzdem erkennbar bleiben.
Prüfe die exportierten Dateien außerdem in der tatsächlichen technischen Umgebung. Eine Vorschau in der Vektorsoftware zeigt nicht immer, wie ein Browser, eine mobile Oberfläche oder ein anderes Ausgabesystem Kantenglättung und Konturen verarbeitet.
Ein Icon-System bleibt nur dann konsistent, wenn die Regeln auch bei späteren Änderungen verständlich sind. Eine kurze Dokumentation sollte deshalb nicht ausschließlich Zahlen nennen, sondern visuelle Beispiele enthalten. Zeige mindestens eine korrekte und eine bewusst falsche Variante für Strichstärke, Radius, Linienende und Innenabstand.
Hilfreich ist eine Komponenten- oder Vorlagendatei mit gesperrten Referenzformen. Neue Symbole können daneben aufgebaut und direkt verglichen werden. Benenne Ebenen und Varianten eindeutig. Angaben wie „final_neu2“ erklären die technische Struktur nicht und erschweren die Prüfung.
Bei Änderungen am Grundsystem sollte zuerst geklärt werden, ob alle bestehenden Icons betroffen sind. Eine neue Strichstärke oder ein neuer Radius kann in einer einzelnen Ansicht überzeugend wirken, aber das Verhältnis zu anderen Symbolen verändern. Vor einer umfangreichen Überarbeitung empfiehlt sich eine Kopie der Ausgangsdateien sowie eine Liste der betroffenen Symbole.
Auch die Exportregeln gehören in die Dokumentation. Dazu zählen das gewünschte Farbmodell, die Verwendung von Konturen oder Pfaden, die Benennung der Dateien und die erforderlichen Größen. Eine klare Übergabe verhindert, dass technische Optimierungen die gestalterischen Regeln unbemerkt verändern.
Vor der Freigabe eines Icon-Sets kann die folgende Prüfung verwendet werden:
Die wichtigste Prüfung bleibt der direkte Vergleich. Lege Icons mit ähnlicher Funktion nebeneinander und betrachte sie zunächst aus normaler Distanz. Danach lohnt ein vergrößerter Blick auf Ecken, Endpunkte und Übergänge. So werden sowohl Wahrnehmungsfehler als auch technische Abweichungen erfasst.
Eine gemeinsame Grundstrichstärke ist die wichtigste Referenz. Bei stark unterschiedlichen Formen können kleine optische Korrekturen erforderlich sein, weil Flächen, Innenräume und Linienanzahl das Gewicht verändern. Abweichungen sollten begründet und dokumentiert werden.
Eine kleine, klar definierte Auswahl ist meist besser kontrollierbar als viele Einzelwerte. Die benötigten Stufen hängen von Formensprache, Zielgrößen und Detailgrad ab. Wichtig ist, dass jede Stufe einen nachvollziehbaren Zweck besitzt.
Die Wahrnehmung wird durch Innenabstände, geschlossene Flächen, Linienlängen, Winkel und die Größe des Symbols beeinflusst. Deshalb müssen Icons nicht nur mathematisch, sondern auch in der vorgesehenen Anzeigegröße verglichen werden.
Das hängt vom weiteren Produktionsweg ab. Editierbare Konturen erleichtern spätere Anpassungen. Umgewandelte Pfade können für bestimmte Übergaben stabiler sein. Eine unveränderte Originaldatei sollte vor der Umwandlung erhalten bleiben.
Die Erkennbarkeit hat Vorrang. Eine klare Grundform mit ausreichenden Innenräumen ist bei kleiner Darstellung meist nützlicher als ein detailreiches Symbol, dessen Konturen optisch zusammenlaufen. Die gestalterische Sprache des Sets sollte dabei weiterhin erkennbar bleiben.
