In Zeiten leistungsstarker KI-Bildgenerierung und frei verfügbarer Icon-Bibliotheken stellt sich schnell die Frage: „Warum überhaupt noch Icons „von Hand“ gestalten?“ Für viele mag der Griff zu bestehenden Lösungen der einfachste und schnellste Weg sein. Doch in der Realität zeigt sich immer wieder: „Out of the Box“-Lösungen reichen nicht aus – 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 übersetzen wollten. Ein Vorhaben, das partout nicht von der Stange zu lösen war.
Wie ich diesen Designprozess angegangen bin, warum wir dabei bewusst gestalterische Grenzen gesetzt haben – und was ein Python-Script mit dem Ganzen zu tun hat, erfahrt ihr hier in diesem Blogbeitrag.
Ausgangsproblem
Centigrade bietet vielfältige Services – und passend dazu finden sich bereits entsprechende Icons auf unserer Website, die jeden unserer Services von User Research, über UX & UI Design bis hin zur KI-Automatisierung visuell untermalen. Zukünftig wird es zu einzelnen Services eigene Landingpages geben, die diese vielfältigen Dienstleistungen interaktiv erfahrbar machen sollen. Diese sollen nicht nur informieren, sondern spielerische Erlebnisse in einer 3D-Welt bieten. Ihr dürft also gespannt sein! Mein Part dabei: die bestehenden Service-Icons so zu gestalten, dass daraus interaktive 3D-Visuals modelliert werden können – als animierte Förderbänder und Produktionsstationen, die Kundenanfragen in digitale Erlebnisse verwandeln.
Die jeweiligen 3D-Visuals sollen nicht jedes Mal neu gestaltet werden, sondern aus vordefinierten Segmenten und Stationen automatisch generiert werden.
Genau das war die Ausgangsfrage meines Gestaltungsprozesses: „Wie müssen Icons aufgebaut sein, die genug Details enthalten, um erkennbar und unterscheidbar zu sein, die aber auch simpel genug sind, um als Blaupause für die 3D-Visuals zu dienen. Die Icons mussten als einer Logik aus wiederverwendbaren Segmenten folgen und darüber hinaus formalen Gestaltungsregeln entsprechen. Wie so oft galt das Motto: „Form Follows Function“.
Da jedes unserer Service-Icons aus einer einzigen Linie besteht und diese Linie später zum Förderband werden soll, musste in der Gestaltung bereits der Platz für die Stationen mitbedacht werden. Damit das funktioniert, mussten wir die Anzahl der Winkel begrenzen und genügend Raum entlang der Linien schaffen, um die Stationen sauber platzieren zu können.
Testaufbau
Was ich wusste:
Die Icons sollten wie beschrieben aus einer einzigen, offenen Linie bestehen – mit einem klar erkennbaren Start- und Endpunkt.
Um die Icons später als Basis für die 3D-Visuals zu nutzen, musste ich einen zusammenhängenden Vektorpfad als SVG exportieren. Dabei konnte ich in Figma mit Strokes arbeiten.
Zu komplexe Icons mussten deutlich reduziert und abstrahiert werden, um Platz für die jeweiligen Stationen innerhalb des Icons zu schaffen.
90°-Winkel funktionieren gut – horizontale und vertikale Linien erlauben genügend Platz für die Stationen.
Gleichzeitig sorgen visuelle Kurvenübergänge dafür, dass das später animierte virtuelle Förderband eine gleichbleibende Breite behält.
Was ich herausfinden musste:
Welche Winkel neben 90° sinnvoll einsetzbar sind – z. B. 30°, 45°, 60°?
Wie kann ich die Kurvensegmente technisch am besten simulieren, um eine stimmige Verbindung zwischen den 2D-Icons und der 3D-Visualisierung zu erreichen: Reichen dafür die Stroke-Einstellungen in Figma aus, oder braucht es manuelle Anpassungen?
Mein Vorgehen
Um herauszufinden, welche Winkel am besten funktionieren, habe ich in Figma verschiedene Varianten erstellt, Zunächst habe ich die Kurven- bzw. Radien-Einstellungen deaktiviert, um mit klaren Kanten zu arbeiten. Dabei zeigte sich, dass neben den klassischen 90°-Winkeln auch 135°-Winkel einen guten Kompromiss darstellen: Sie schaffen einerseits ausreichend Freiraum in der Gestaltung und ermöglichen gleichzeitig, innerhalb der Icons möglichst viel Raum durch den offenen Winkel zu nutzen.
Ich habe mich bei der Linienführung bewusst auf nur zwei Winkel beschränkt – 90° und 135°. Diese gestalterische Limitierung schafft klare Parameter und sorgt für 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ür „Usability Testing“: Unsere klassische Lupe wirkte durch die flachen Winkel eher wie ein Stoppschild. Also habe ich das ursprüngliche Kernelement – die Videokamera zur Aufzeichnung von Usability Tests – extrahiert und als übergreifendes Symbol neu interpretiert. Nach diesem Prinzip bin ich auch beim Gamecontroller (für den Service „Gamification“) vorgegangen: Durch die formale Einschränkung verlor er deutlich an Erkennbarkeit, weshalb ich mich zunächst für den „Pokal“ als Motiv entschieden hatte, schließlich aber den „Joystick“ gewählt habe, um die Aussage hinter dem Icon klarer zu transportieren.
Radien automatisiert erzeugen
Figma eignet sich gut zur Gestaltung von Icons, da es auf Vektoren basiert, eine einfache Skalierung ermöglicht 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ührt.
Mein Fazit: Die Radien-Einstellungen in Figma sind begrenzt – besonders beim pixelgenauen Arbeiten. Zwar wird der äußere Radius immer dargestellt, der innere bleibt jedoch bis zu einem Wert von 1.5 scharfkantig. Erst bei höheren Werten entsteht eine kleine Rundung an den inneren Ecken, die jedoch nicht dem Look eines Förderbandes entsprechen würde.
Eine vermeintlich naheliegende Lösung wäre gewesen, alle Konturen in Outlines umzuwandeln und den inneren Radius manuell zu zeichnen. Zu bevorzugen war jedoch von Anfang an eine 100% automatisierbare Lösung – idealerweise, ohne die Stroke-Struktur des Icons aufzugeben. Alles, was dafür nötig ist: Aus einem Eckpunkt müssen zwei Punkte werden, die durch eine Bezierkurve verbunden sind. Diese Konvertierung musste natürlich für jede Ecke gleichermaßen erfolgen. Die logische Konsequenz: Wir schreiben ein Script, welches genau diese Aufgabe übernimmt.
Mit DrawBot, 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ßend mit einer Bezierkurve verbunden, die den Radius erzeugt. Dabei kann ich den Abstand der Punkte einstellen, um die Rundung zu verändern und gleichzeitig die Linienstärke konstant zu halten. DrawBot zeigt mir dabei direkt das Ergebnis, sodass ich den Radius visuell an das 3D-Visual anpassen kann.
Automatisierung der Icon Erstellung
Um den Prozess im Icon-Erstellungsprozess auch zukünftig schlank zu halten, haben wir uns entschieden, mit einer Workflow Automation Engine das Python-Script zur automatischen Erzeugung des finalen SVG zu nutzen.
Designern soll es weiterhin möglich sein, neue Icons in Figma zu gestalten, während die exakten Radien automatisch generiert werden – ähnlich wie die exakten Kurvensegmente beim 3D-Förderband. Dabei dient das in Figma erstellte Icon als Grundlage für beide Prozesse.
Icon Font mit Markdown-Feature
Neben der Nutzung der Icons als Strokes in Figma-Dateien gibt es die Icons auch als eigenständigen Font. Über 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 – überall dort, wo grundlegende Ligaturen unterstützt werden (z. B. in Figma, InDesign oder Word). Alternativ sind die Symbole auch über ihren Unicode-Wert zugänglich.
Die Icons sind in unterschiedlichen Strichstärken gestaltet und variabel interpolierbar. So lassen sie sich per Slider von Light bis Bold einstellen und die Strichstärke der Icons dynamisch anpassen, beispielsweise für CSS-Hover-Animationen.
Premiere unserer Toolbox-Landingpage
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, mit dem sich aktuelle Screendesigns anhand einer definierten Task-Beschreibung evaluieren lassen. Eine GOMS-Analyse erlaubt vorherzusagen, wie lange ein erfahrener Benutzer für die Bearbeitung einer vorgegebenen Aufgabe in einer Benutzerschnittstelle benötigt.
Die Screens werden zunächst als PDF-Dateien exportiert und in die Toolbox hochgeladen. Vor der Analyse fragt das System den Nutzer nach dem Ziel – beispielsweise einer User Story. Anschließend verarbeitet es die Daten automatisiert und erstellt einen PDF-Report, in dem alle erkannten UI-Elemente in einzelne Components zerlegt und die geschätzte Interaktionszeit pro Element sowie die Gesamtdauer der Interaktionen berechnet wird.
Die Berechnung basiert auf dem Key-Stroke Level Model (KLM): Jede Interaktion wird mit einem heuristischen Zeitwert versehen (z. B. eine Maustaste drücken oder loslassen dauert 100 ms) und anschließend zu einer Gesamtzeit addiert.
Fazit
Warum also eigene „von Hand“ Icons gestalten, statt mit KI generieren zu lassen? Weil individuelle Probleme maßgeschneiderte Lösungen brauchen – besonders bei engen Vorgaben und der konsistenten Anwendung eines formalen Regelwerkes. Vorgefertigte Designs stoßen hier schnell an Grenzen. Wer Icons selbst gestaltet schafft konsistente, wiedererkennbare und unverwechselbare Designs und trägt damit essenziell bei zu einer höheren Markenidentität und einer besseren UX. Das bedeutet wohlgemerkt nicht, dass man sich als Gestaltender nicht mit den Themen Automatisierung und generativer KI beschäftigen muss – im Gegenteil! Erst wenn man beide Kompetenzen vereint also visuelles Ästhetik-Empfinden und technisches Verständnis, kann man in der heutigen Zeit eine gute Balance zwischen Qualität und Aufwand halten.
Als Visual Designer finde ich es extrem spannend, Design und Funktion so eng zu verzahnen – und zu sehen, wie aus einem zweidimensionalen Icon eine lebendige 3D-Welt wird, die nicht nur toll aussieht, sondern auch echten Mehrwert für Nutzende schafft. Das Potenzial von Icons ist noch längst nicht ausgeschöpft und birgt dank generativer KI und Workflow Engine Automatisierungen Raum für neue visuelle Innovationen.
