Invention Design
Invention
Figma
Vibecoding
Motion Design
Zeitraum
März – Juli 2025
Team
Jasper Schminke
Tools
Figma, Vibecoding, After Effects
Strategien
Interviews, Wireframes, Prototyping, Concept
Gestaltungsprozess
Im Projekt „Aikon“ waren wir gefordert, eine innovative Lösung zu entwickeln, die den Bedürfnissen von UX/UI-Designer:innen der kommenden 2 bis 5 Jahre gerecht wird. Ausgangspunkt war die Herausforderung, dass die Suche nach passenden, modernen und konsistenten Icons häufig zeitaufwendig und umständlich ist. Unsere Herangehensweise legte den Fokus darauf, mit Hilfe von Künstlicher Intelligenz ein Tool zu gestalten, das das Finden und individuelle Generieren von Icons radikal vereinfacht, gleichzeitig die kreative Kontrolle der Nutzer:innen wahrt und sich nahtlos in bestehende Design-Workflows einfügt. Dabei haben wir besonderes Augenmerk auf eine inspirierende, praxisnahe und benutzerzentrierte Gestaltung gelegt, die neue Arbeitsweisen im Interface Design ermöglicht und Designer:innen effektiv unterstützt.
Research
Im Research führten wir vier Interviews mit erfahrenen UX/UI-Designer:innen aus der Branche durch. Diese Gespräche lieferten uns wertvolle Einblicke und praxisnahe Tipps, insbesondere zur zeitintensiven Herausforderung, passende Icons für bestehende Iconsets zu finden oder selbst zu erstellen. Zudem erhielten wir wichtige Rückmeldungen zur Offenheit der Designer:innen gegenüber dem Einsatz von Künstlicher Intelligenz als unterstützendes Werkzeug, um neue Icons effizient und dennoch kreativ zu gestalten. Diese Erkenntnisse bildeten die Grundlage für die nutzerorientierte Weiterentwicklung unseres Tools.
Prototyping
Im Prototyping prüften wir die technische Machbarkeit unserer Idee, Icons mithilfe von Künstlicher Intelligenz zu erstellen. Dazu entwickelten wir ein eigenes Programm, das mit der API von OpenAI verbunden ist. Über diesen Zugang konnten wir verschiedene KI-Modelle nutzen und direkt in unserem Tool Icons generieren. Um vielfältige Stile und Einstellungen abzudecken, erstellten wir spezifische Prompt-Varianten, die als Anleitung für die KI dienen. Dieser Prototyp verschaffte uns wertvolle Einblicke in die praktische Umsetzung und die Potenziale unseres Ansatzes.
Prozess
Im Prozess haben wir verschiedene Ansätze untersucht, wie die KI die Informationen erhält, um ein neues Icon zu erstellen. Dabei prüften wir, ob Nutzer:innen ein komplettes Iconset oder nur ein einzelnes Icon hochladen können, um darauf basierend einen konsistenten Stil zu generieren. Ebenso betrachteten wir die Möglichkeit, ein Bild eines realen Gegenstands hochzuladen, von dem dann mit Hilfe von Prompts ein passendes Icon erzeugt wird. Ebenso ist denkbar, dass man sowohl ein Iconset als auch ein Bild eines Gegenstands hochlädt, um daraus ein individuelles Icon zu generieren. Diese Varianten ermöglichten uns, die flexibelsten und nutzerfreundlichsten Wege zur Eingabe von Informationen für die KI-gesteuerte Icon-Erstellung zu definieren und zu testen.
Ergebnis
Das Endergebnis unseres Projekts ermöglicht es Nutzer:innen, Icons flexibel mit KI-generierten Tools zu erstellen. Dabei lassen sich Detailgrad, Strichstärke und Rundungsgrad individuell einstellen. Nutzer:innen können ein komplettes Iconset, ein einzelnes Icon oder ein Bild als Inspirationsquelle hochladen, das die KI zur Generierung nutzt. Mithilfe von aufeinander aufbauenden Prompts kann das Icon so lange angepasst werden, bis das Ergebnis zufriedenstellend ist. Abschließend ist ein Export der Icons in verschiedenen Formaten möglich, etwa als SVG oder direkt in Design-Tools wie Figma, was einen nahtlosen Workflowschluss gewährleistet.
