{"id":17881,"date":"2025-10-27T10:55:25","date_gmt":"2025-10-27T09:55:25","guid":{"rendered":"https:\/\/www.centigrade.de\/?post_type=blog&p=17881"},"modified":"2025-11-04T10:32:22","modified_gmt":"2025-11-04T09:32:22","slug":"icon-libraries-in-zeiten-von-ki-brauchen-wir-noch-massgeschneiderte-icons","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/icon-libraries-in-zeiten-von-ki-brauchen-wir-noch-massgeschneiderte-icons\/","title":{"rendered":"Icon-Libraries in Zeiten von KI: Brauchen wir noch ma\u00dfgeschneiderte Icons?"},"content":{"rendered":"

\"Illustration<\/p>\n

In Zeiten leistungsstarker KI-Bildgenerierung und frei verf\u00fcgbarer Icon-Bibliotheken stellt sich schnell die Frage: \u201eWarum \u00fcberhaupt noch Icons \u201evon Hand\u201c gestalten?\u201c F\u00fcr viele mag der Griff zu bestehenden L\u00f6sungen der einfachste und schnellste Weg sein. Doch in der Realit\u00e4t zeigt sich immer wieder: \u201eOut of the Box\u201c-L\u00f6sungen reichen nicht aus \u2013 besonders dann, wenn Anforderungen komplexer und individueller werden. Genau das war bei uns der Fall, als wir unsere Centigrade Service-Icons in automatisch generierbare 3D-Visuals \u00fcbersetzen wollten. Ein Vorhaben, das partout nicht von der Stange zu l\u00f6sen war.<\/p>\n

Wie ich diesen Designprozess angegangen bin, warum wir dabei bewusst gestalterische Grenzen gesetzt haben \u2013 und was ein Python-Script mit dem Ganzen zu tun hat, erfahrt ihr hier in diesem Blogbeitrag.<\/p>\n

Ausgangsproblem<\/h2>\n

\"Centigrade<\/p>\n

Centigrade bietet vielf\u00e4ltige Services \u2013 und passend dazu finden sich bereits entsprechende Icons auf unserer Website, die jeden unserer Services von User Research, \u00fcber UX & UI Design bis hin zur KI-Automatisierung visuell untermalen. Zuk\u00fcnftig wird es zu einzelnen Services eigene Landingpages geben, die diese vielf\u00e4ltigen Dienstleistungen interaktiv erfahrbar machen sollen. Diese sollen nicht nur informieren, sondern spielerische Erlebnisse in einer 3D-Welt bieten. Ihr d\u00fcrft also gespannt sein! Mein Part dabei: die bestehenden Service-Icons so zu gestalten, dass daraus interaktive 3D-Visuals modelliert werden k\u00f6nnen \u2013 als animierte F\u00f6rderb\u00e4nder und Produktionsstationen, die Kundenanfragen in digitale Erlebnisse verwandeln.<\/p>\n

Die jeweiligen 3D-Visuals sollen nicht jedes Mal neu gestaltet werden, sondern aus vordefinierten Segmenten und Stationen automatisch generiert werden.<\/p>\n

Genau das war die Ausgangsfrage meines Gestaltungsprozesses: \u201eWie m\u00fcssen Icons aufgebaut sein, die genug Details enthalten, um erkennbar und unterscheidbar zu sein, die aber auch simpel genug sind, um als Blaupause f\u00fcr die 3D-Visuals zu dienen. Die Icons mussten als einer Logik aus wiederverwendbaren Segmenten folgen und dar\u00fcber hinaus formalen Gestaltungsregeln entsprechen. Wie so oft galt das Motto: \u201eForm Follows Function<\/a>\u201c.<\/p>\n

Da jedes unserer Service-Icons aus einer einzigen Linie besteht und diese Linie sp\u00e4ter zum F\u00f6rderband werden soll, musste in der Gestaltung bereits der Platz f\u00fcr die Stationen mitbedacht werden. Damit das funktioniert, mussten wir die Anzahl der Winkel begrenzen und gen\u00fcgend Raum entlang der Linien schaffen, um die Stationen sauber platzieren zu k\u00f6nnen.<\/p>\n

Testaufbau<\/strong><\/h2>\n

\"Centigrade<\/p>\n

Was ich wusste:<\/strong>
\nDie Icons sollten wie beschrieben aus einer einzigen, offenen Linie bestehen \u2013 mit einem klar erkennbaren Start- und Endpunkt.
\nUm die Icons sp\u00e4ter als Basis f\u00fcr die 3D-Visuals zu nutzen, musste ich einen zusammenh\u00e4ngenden Vektorpfad als SVG exportieren. Dabei konnte ich in Figma mit Strokes arbeiten.
\nZu komplexe Icons mussten deutlich reduziert und abstrahiert werden, um Platz f\u00fcr die jeweiligen Stationen innerhalb des Icons zu schaffen.
\n90\u00b0-Winkel funktionieren gut \u2013 horizontale und vertikale Linien erlauben gen\u00fcgend Platz f\u00fcr die Stationen.
\nGleichzeitig sorgen visuelle Kurven\u00fcberg\u00e4nge daf\u00fcr, dass das sp\u00e4ter animierte virtuelle F\u00f6rderband eine gleichbleibende Breite beh\u00e4lt.<\/p>\n

Was ich herausfinden musste:<\/strong><\/p>\n

Welche Winkel neben 90\u00b0 sinnvoll einsetzbar sind \u2013 z. B. 30\u00b0, 45\u00b0, 60\u00b0?
\nWie kann ich die Kurvensegmente technisch am besten simulieren, um eine stimmige Verbindung zwischen den 2D-Icons und der 3D-Visualisierung zu erreichen: Reichen daf\u00fcr die Stroke-Einstellungen in Figma aus, oder braucht es manuelle Anpassungen?<\/p>\n

Mein Vorgehen<\/strong><\/p>\n

Um herauszufinden, welche Winkel am besten funktionieren, habe ich in Figma verschiedene Varianten erstellt, Zun\u00e4chst habe ich die Kurven- bzw. Radien-Einstellungen deaktiviert, um mit klaren Kanten zu arbeiten. Dabei zeigte sich, dass neben den klassischen 90\u00b0-Winkeln auch 135\u00b0-Winkel einen guten Kompromiss darstellen: Sie schaffen einerseits ausreichend Freiraum in der Gestaltung und erm\u00f6glichen gleichzeitig, innerhalb der Icons m\u00f6glichst viel Raum durch den offenen Winkel zu nutzen.<\/p>\n

\"Figma<\/p>\n

Ich habe mich bei der Linienf\u00fchrung bewusst auf nur zwei Winkel beschr\u00e4nkt \u2013 90\u00b0 und 135\u00b0. Diese gestalterische Limitierung schafft klare Parameter und sorgt f\u00fcr eine offene, wiedererkennbare Formsprache. Dabei musste ich einige bestehende Symbole allerdings neu denken, weil sie in dieser reduzierteren Sprache nicht mehr wie gewohnt funktionierten. Ein gutes Beispiel ist das Icon f\u00fcr \u201eUsability Testing\u201c: Unsere klassische Lupe wirkte durch die flachen Winkel eher wie ein Stoppschild. Also habe ich das urspr\u00fcngliche Kernelement \u2013 die Videokamera zur Aufzeichnung von Usability Tests \u2013 extrahiert und als \u00fcbergreifendes Symbol neu interpretiert. Nach diesem Prinzip bin ich auch beim Gamecontroller (f\u00fcr den Service \u201eGamification\u201c) vorgegangen: Durch die formale Einschr\u00e4nkung verlor er deutlich an Erkennbarkeit, weshalb ich mich zun\u00e4chst f\u00fcr den \u201ePokal\u201c als Motiv entschieden hatte, schlie\u00dflich aber den \u201eJoystick\u201c gew\u00e4hlt habe, um die Aussage hinter dem Icon klarer zu transportieren.<\/p>\n

Radien automatisiert erzeugen<\/h2>\n

Figma eignet sich gut zur Gestaltung von Icons, da es auf Vektoren basiert, eine einfache Skalierung erm\u00f6glicht und den SVG-Export erleichtert. Praktische Funktionen wie Snap-to-Pixel und Raster helfen dabei, pixel-exakt zu arbeiten. Beim Arbeiten mit Konturen kann man festlegen, ob Ecken und Linienenden scharf oder abgerundet dargestellt werden. Diese Einstellungen habe ich mir genauer angeschaut, da im 3D-Visual alle Eckpunkte durch Kurven ersetzt werden, was zu weicheren Rundungen f\u00fchrt.<\/p>\n

\"Figma<\/p>\n

Mein Fazit: Die Radien-Einstellungen in Figma sind begrenzt \u2013 besonders beim pixelgenauen Arbeiten. Zwar wird der \u00e4u\u00dfere Radius immer dargestellt, der innere bleibt jedoch bis zu einem Wert von 1.5 scharfkantig. Erst bei h\u00f6heren Werten entsteht eine kleine Rundung an den inneren Ecken, die jedoch nicht dem Look eines F\u00f6rderbandes entsprechen w\u00fcrde.<\/p>\n

\"Figma<\/p>\n

Eine vermeintlich naheliegende L\u00f6sung w\u00e4re gewesen, alle Konturen in Outlines umzuwandeln und den inneren Radius manuell zu zeichnen. Zu bevorzugen war jedoch von Anfang an eine 100% automatisierbare L\u00f6sung \u2013 idealerweise, ohne die Stroke-Struktur des Icons aufzugeben. Alles, was daf\u00fcr n\u00f6tig ist: Aus einem Eckpunkt m\u00fcssen zwei Punkte werden, die durch eine Bezierkurve verbunden sind. Diese Konvertierung musste nat\u00fcrlich f\u00fcr jede Ecke gleicherma\u00dfen erfolgen. Die logische Konsequenz: Wir schreiben ein Script, welches genau diese Aufgabe \u00fcbernimmt.<\/p>\n

Mit DrawBot<\/a>, einer kostenlosen App, mit der man mithilfe einfacher Python-Skripte zweidimensionale Grafiken erstellen kann, habe ich die Icon-Koordinaten automatisch zeichnen lassen. Jeden bestehenden Einzel-Eckpunkt habe ich mittels einer entsprechenden Funktion durch zwei neue Punkte ersetzt und anschlie\u00dfend mit einer Bezierkurve verbunden, die den Radius erzeugt. Dabei kann ich den Abstand der Punkte einstellen, um die Rundung zu ver\u00e4ndern und gleichzeitig die Linienst\u00e4rke konstant zu halten. DrawBot zeigt mir dabei direkt das Ergebnis, sodass ich den Radius visuell an das 3D-Visual anpassen kann.<\/p>\n

Automatisierung der Icon Erstellung<\/h2>\n

\"Figma<\/p>\n

Um den Prozess im Icon-Erstellungsprozess auch zuk\u00fcnftig schlank zu halten, haben wir uns entschieden, mit einer Workflow Automation Engine das Python-Script zur automatischen Erzeugung des finalen SVG zu nutzen.<\/p>\n

Designern soll es weiterhin m\u00f6glich sein, neue Icons in Figma zu gestalten, w\u00e4hrend die exakten Radien automatisch generiert werden \u2013 \u00e4hnlich wie die exakten Kurvensegmente beim 3D-F\u00f6rderband. Dabei dient das in Figma erstellte Icon als Grundlage f\u00fcr beide Prozesse.<\/p>\n

Icon Font mit Markdown-Feature<\/h2>\n

\"icon<\/p>\n

Neben der Nutzung der Icons als Strokes in Figma-Dateien gibt es die Icons auch als eigenst\u00e4ndigen Font. \u00dcber smarte OpenType-Funktionen lassen sich die Icons so per Text einsetzen: Wenn man das Keyword bzw. den Icon-Namen im Markdown-Stil zwischen zwei Doppelpunkten eingibt, wird es automatisch durch das passende Symbol ersetzt \u2013 \u00fcberall dort, wo grundlegende Ligaturen unterst\u00fctzt werden (z. B. in Figma, InDesign oder Word). Alternativ sind die Symbole auch \u00fcber ihren Unicode-Wert zug\u00e4nglich.<\/p>\n

Die Icons sind in unterschiedlichen Strichst\u00e4rken gestaltet und variabel interpolierbar. So lassen sie sich per Slider von Light bis Bold einstellen und die Strichst\u00e4rke der Icons dynamisch anpassen, beispielsweise f\u00fcr CSS-Hover-Animationen.<\/p>\n

Premiere unserer Toolbox-Landingpage<\/strong><\/h2>\n

Zum Auftakt hatten wir die Gelegenheit, bei Bosch einen Vortrag zu halten und unser Tool mit den neuen Icons und 3D-Visuals erstmals vorzustellen. Zur Demonstration entwickelten wir einen eigenen GOMS-Analyser,\u00a0mit dem sich aktuelle Screendesigns anhand einer definierten\u00a0Task-Beschreibung evaluieren lassen. Eine GOMS-Analyse erlaubt vorherzusagen, wie lange ein erfahrener Benutzer f\u00fcr die Bearbeitung einer vorgegebenen Aufgabe in einer Benutzerschnittstelle ben\u00f6tigt.<\/p>\n