# Gestalten

Einen UI-Entwurf (Wireframe) erstellen sowie das konkrete Design der Anwendung ausarbeiten.

# Zusammenfassung

In der Phase der Gestaltung werden die Nutzungsanforderungen in einem Prototypen der Anwendung überführt. Dabei liegt der Fokus zunächst auf den grundlegenden Aufbau einer Anwendung und deren einzelnen Seiten. Basierend darauf, werden in einem nächsten Schritt die Details des Designs der Anwendung ausgearbeitet. Insbesondere werden dann Farbschema, Schriften, Abstände und Formsprache der Anwendung festgelegt. Dabei wird entweder auf ein vorhandenes Design System, bzw. einem vorhandenen Styleguide zurückgegriffen oder gänzlich neu mit einem Design begonnen.

TL;DR — KI in dieser Phase: KI hilft beim Übergang vom Konzept zum konkreten Design — sie generiert Strukturen, Varianten und Prototypen schnell, wendet Design Systeme an und unterstützt bei Begründung und Übergabe. Sie produziert aber leicht visuelle Scheinqualität ohne Nutzungskontext; gestalterische Verantwortung, Konsistenzprüfung und Anschlussfähigkeit für die Entwicklung bleiben beim UX-Team.

# Ergebnis

Das Ergebnis dieser Phase ist eine visuelle Repräsentation der Anwendung die auf den Anforderungen der Nutzer basiert. Die visuelle Aufbereitung reicht dabei von einfachen Skizzen (Papierprototypen) bis detailliert ausgearbeiteten, interaktiven high-fidelity Prototypen die schon große Ähnlichkeiten zum realen System aufweisen. Am Ende steht ein fertiger und mit allen Details versehener Designentwurf der Anwendung. Neben diesem Abbild der zukünftigen Anwendung werden die für Entwickler notwendigen Details (Schriften, Größen, Abstände etc.) zur Verfügung gestellt. Darauf aufbauend können Entwickler mit der Umsetzung der Anwendung beginnen.

# Fragen, die in dieser Phase beantwortet werden

Wie funktioniert die Anwendung grundlegend?
Wie ist die Anwendung aufgebaut?
Wie kann der Nutzer seine Aufgabe(n) mit der Anwendung möglichst effizient, effektiv und zufriedenstellend erledigen?
Welche konkreten UI-Elemente werden verwendet?
Wo werden die UI-Elemente platziert?
Wie sehen die UI-Elemente, ggf. auch in verschiedenen Zuständen, aus?

# Mehrwert & Einsatzmöglichkeiten von KI

# Strukturen und Lösungsraum entwerfen

KI generiert erste Entwürfe für die Informationsarchitektur und strukturiert Inhalte sowie Navigationslogiken, sodass sich verschiedene Strukturierungsansätze frühzeitig explorieren und vergleichen lassen.
Sie überführt Ideen aus der Kreieren Phase in konkrete Interaktionsabläufe, User Flows oder Screenkonzepte und erleichtert so den Übergang von abstrakten Lösungsansätzen zu umsetzbaren Designs.
Sie erweitert den Lösungsraum, indem sie viele Varianten und Alternativen erzeugt und unterschiedliche Lösungsrichtungen parallel exploriert — das hilft, bestehende Denkmuster oder Design-Fixierungen zu überwinden.

# Prototypen schnell und realitätsnah ausgestalten

Erste Prototypen lassen sich schnell generieren und iterativ weiterentwickeln, etwa durch „Vibe-Coding" oder die automatisierte Erstellung von Layouts, Interaktionen und Animationen, sodass Ideen früh sichtbar und überprüfbar werden.
Designvarianten lassen sich in kurzen Iterationszyklen anpassen und weiterentwickeln, wodurch Feedback direkte Auswirkungen auf die Gestaltung haben kann.
KI generiert geeignete Beispiel- oder Testdaten zur Befüllung von Oberflächen und macht Nutzungsszenarien nachvollziehbar, sodass sich Designs frühzeitig im Nutzungskontext bewerten lassen und Schwachstellen sichtbar werden.

# Konsistenz und Qualität absichern

Bestehende Design Systeme können automatisiert auf Prototypen angewendet oder an spezifische Kundenkontexte angepasst werden.
Aus bestehenden Designs oder Screenshots lassen sich Gestaltungselemente wie Farben, Typografie oder Interaktionsmuster ableiten und weiterverwenden.
KI erkennt Inkonsistenzen zwischen einzelnen Screens oder Abläufen und weist auf fehlende Zustände oder Edge Cases hin, die im Design bislang nicht berücksichtigt wurden.
Sie bringt etablierte Best Practices aus Design und Usability ein und hilft besonders in frühen Entwurfsphasen, erste Qualitätsstandards zu berücksichtigen und typische Probleme zu vermeiden.

# Designentscheidungen begründen und kommunizieren

KI unterstützt bei der Strukturierung und Begründung von Designentscheidungen, indem sie Varianten vergleicht, Vor- und Nachteile aufzeigt und bei der Formulierung einer nachvollziehbaren Design-Rationale hilft.
Durch die strukturierte Aufbereitung von Inhalten entstehen klare Argumentationslinien — vom Verständnis der Nutzerbedürfnisse über die zugrunde liegende Idee bis zur konkreten Gestaltungslösung, was Präsentation und Stakeholder-Abstimmung erleichtert.
Die Übergabe an Entwicklungsteams lässt sich unterstützen, indem Designs strukturierter dokumentiert und für die weitere Umsetzung verständlicher aufbereitet werden.

# Risiken beim Einsatz von KI

# Scheinqualität: plausibel aussehen, aber funktional schwach

KI-generierte Entwürfe wirken auf den ersten Blick plausibel oder visuell überzeugend, weisen jedoch häufig grundlegende Schwächen auf: fehlende visuelle Hierarchie, unklare Gruppierung zusammengehöriger Elemente, inkonsistente Abstände oder ungeeignete Designmuster.
Farbwahl, Kontraste und visueller Stil sind häufig nicht ausreichend aufeinander abgestimmt, wodurch Designs stimmig erscheinen, aber funktional oder in ihrer Nutzung erschwert sind.
Offene oder wenig spezifizierte Prompts führen oft zu generischen Ergebnissen, die sich an etablierten Mustern orientieren (z.B. Dashboard-Layouts oder Standardstrukturen) — Designs gleichen sich an, Differenzierung und markenspezifische Gestaltung verlieren an Bedeutung.

# Kontextverlust und Inkonsistenz

Designs entstehen leicht isoliert auf Screen-Ebene, ohne dass der konkrete Nutzungskontext ausreichend berücksichtigt wird — eine übergreifende Interaktionslogik oder ein konsistentes Nutzungserlebnis fehlt dann.
Durch die Generierung einzelner Screens oder Komponenten entstehen Inkonsistenzen in Abständen, Ausrichtung oder Interaktionen.
Wichtige Zustände oder Edge Cases werden häufig nicht ausreichend berücksichtigt, was die Qualität und Umsetzbarkeit der Lösungen beeinträchtigt.

# Verantwortungsverlagerung und Komplexitätsfalle

Die Qualität der Ergebnisse hängt stark von der Expertise der nutzenden Person ab; ohne fundiertes Design- und Technikverständnis besteht die Gefahr, dass Schwächen nicht erkannt und generierte Lösungen unkritisch übernommen werden.
Die Verantwortung für gestalterische Qualität kann teilweise auf die KI verlagert werden, statt dass Designentscheidungen bewusst durch UX-Expertinnen und -Experten getroffen werden.
Mit zunehmender Komplexität von Prototypen geht Kontrollierbarkeit verloren: Insbesondere bei interaktiven High-Fidelity-Prototypen können bereits kleine Änderungen unerwartete Nebeneffekte oder Fehler verursachen.
Schnell generierte Lösungen sind häufig schwer zu warten oder weiterzuentwickeln, wodurch sich der Aufwand in späteren Phasen erhöht.

# Leitplanken für den Einsatz von KI

# KI als Werkzeug — Verantwortung beim UX-Team

Der Einsatz von KI sollte sich auf die Unterstützung der Ausarbeitung von Gestaltungslösungen konzentrieren; die Verantwortung für Qualität, Verständlichkeit und Umsetzbarkeit verbleibt beim UX-Team.
KI-generierte Entwürfe sind keine fertigen Lösungen, sondern müssen stets im Nutzungskontext geprüft und gezielt weiterentwickelt werden.
Designentscheidungen müssen nachvollziehbar getroffen und dokumentiert werden — KI-Unterstützung darf nicht dazu führen, dass Entscheidungen implizit entstehen; Varianten sind bewusst zu vergleichen und im Kontext von Nutzerbedürfnissen und Anforderungen zu bewerten, sodass eine klare Design-Rationale entsteht.

# Designs im Kontext denken, nicht nur visuell

Designs dürfen nicht allein anhand ihres visuellen Eindrucks bewertet werden, sondern im Hinblick auf Interaktionsabläufe, Verständlichkeit und tatsächliche Nutzung.
Gestaltung darf nicht isoliert auf Screen-Ebene erfolgen: Designs müssen sich aus klaren Nutzungsszenarien ableiten und eine konsistente übergreifende Interaktionslogik bilden.
Die Generierung von Designs sollte auf klar definierten Anforderungen und Rahmenbedingungen basieren — offene Prompts ohne Kontext führen häufig zu generischen Ergebnissen und sollten gezielt eingegrenzt werden, um differenzierte und projektspezifische Lösungen zu ermöglichen.

# Konsistenz, Vollständigkeit und Übergabe absichern

Die konsequente Nutzung von Design Systemen und Gestaltungsrichtlinien ist notwendig, um ein kohärentes Gesamtsystem zu erhalten und zu verhindern, dass Screens oder Komponenten unabhängig voneinander entstehen.
Designs müssen systematisch auf Vollständigkeit geprüft werden, insbesondere im Hinblick auf alternative Abläufe, Fehlerzustände und Edge Cases.
Bei komplexen Prototypen ist auf Nachvollziehbarkeit und Stabilität zu achten — Änderungen sollten kontrolliert erfolgen, da sich Auswirkungen mit zunehmender Komplexität schwerer überblicken lassen.
Designs müssen frühzeitig so aufbereitet werden, dass sie für die technische Umsetzung anschlussfähig sind: durch klare Struktur, verständliche Interaktionslogik und ausreichende Dokumentation.

# Quellen

Wang H.-H., Brown M. (2025) Good from Afar, But Far from Good: AI Prototyping in Real Design Contexts (opens new window)

# Hinweis zur Nutzung von KI

Teile dieses Inhalts wurden unter Nutzung von KI-gestützten Tools (insbesondere M365 Copilot) erstellt. Die Ergebnisse wurden durch die Autorin geprüft, überarbeitet und kontextuell eingeordnet. KI-generierte Inhalte können fehlerhaft oder unvollständig sein und wurden daher nicht ungeprüft übernommen.

Zuletzt aktualisiert 25.05.2026