Mit KI Oberflächen gestalten, die sich gut bedienen lassen
KI kann aus einer Beschreibung eine Oberfläche bauen. Ob sie verständlich und bedienbar ist, zeigt sich erst an einer konkreten Aufgabe: Findet jemand den passenden Tarif, kann er ein Formular abschicken und einen Fehler beheben? Beginne deshalb mit Inhalt und Ablauf. Farben und Effekte kommen danach.
3 Min. Lesezeit
7 Abschnitte
11 Quellen
Stand: 16. Juni 2026
Mit einer Nutzeraufgabe beginnen
Beschreibe, wer die Seite nutzt und was dort erledigt werden soll. Eine Tarifseite muss Unterschiede vergleichbar machen; ein Verwaltungsformular muss Eingaben und Fehler verständlich erklären. Solche Anforderungen geben einem Entwurf eine Richtung.
Ein klickbarer KI-Prototyp kann helfen, den Ablauf früh auszuprobieren. Sein fertiges Aussehen sagt noch nichts über Datenanbindung, Sicherheit oder Wartbarkeit. Markiere für die Prüfung, welche Teile bereits funktionieren und welche nur Platzhalter sind.
Den ersten Entwurf gezielt beauftragen
Gib dem Werkzeug vorhandene Komponenten, echte oder klar bezeichnete Beispieldaten und die benötigten Zustände mit. Dazu gehören neben dem Normalfall auch leere Listen, Ladezeiten, Fehlermeldungen und lange Inhalte.
Ein Screenshot kann die Gestaltung erklären, zeigt aber keine Tastaturbedienung und keine Datenlogik. Beschreibe diese Anforderungen zusätzlich. Ein erster Auftrag kann so aussehen:
Beispiel: Tarifvergleich im vorhandenen Projekt
Baue einen Tarifvergleich mit den vorhandenen Komponenten.
Zeige Preis, Abrechnungszeitraum und die Unterschiede der drei Tarife.
Nutze die Texte und Design-Tokens aus dem Projekt.
Auf schmalen Bildschirmen müssen alle Angaben lesbar bleiben.
Prüfe Tastaturbedienung, Fokus und lange Tarifnamen.
Verwende keine erfundenen Kundenbewertungen oder Leistungsversprechen.
Entwürfe nach Verhalten und Korrekturen vergleichen
Eine pauschale Empfehlung für das „schönste“ Modell hilft wenig. Gestaltungsurteile hängen von Aufgabe, Referenzen und persönlichem Geschmack ab. Vergleiche mehrere Entwürfe mit denselben Inhalten und Anforderungen.
Prüfe auch die zweite Runde: Kann das Modell eine konkrete Änderung umsetzen, ohne funktionierende Teile zu beschädigen? Eine konsistente Korrektur ist für laufende Produktarbeit oft wertvoller als ein spektakulärer erster Entwurf.
Eine Illustration kann einen Vorgang erklären, ein Produktbild ein Detail zeigen. Benenne diesen Zweck, bevor du Bilder generieren lässt. Ein dekoratives Motiv sollte nicht mit einer sachlichen Abbildung verwechselt werden.
Für Icons, Logos und bestehende Gestaltungssysteme sind vorhandene Vektorbausteine häufig leichter konsistent zu halten. Bei generierten Bildern prüfst du Rechte, Ausschnitt und Darstellung in der tatsächlichen Größe. Textbeschriftungen lassen sich oft besser als echter Text in die Oberfläche setzen.
Die schwierigen Fehler zeigen sich häufig abseits des Vorzeigebilds: Ein langer Name sprengt die Zeile, eine leere Suche bietet keinen nächsten Schritt oder ein Dialog lässt sich mit der Tastatur nicht verlassen. Addy Osmanis „70-Prozent-Problem“ beschreibt diese Erfahrung bildhaft; es ist keine gemessene Fertigstellungsquote.
Prüfe die Oberfläche mit schmalem Fenster, vergrößerter Schrift, Tastatur und realistischen Daten. Automatische Barrierefreiheitstests können einen Teil der Fehler finden. Verständlichkeit, sinnvolle Reihenfolge und der gesamte Bedienablauf brauchen zusätzlich eine eigene Prüfung.
Vorhandene Gestaltung verständlich mitgeben
Ein Design-System liefert Farben, Abstände, Typografie und Komponenten. Ergänze die Regeln, die sich aus einzelnen Werten nicht ablesen lassen: Wann wird die Akzentfarbe verwendet? Wie werden gleich wichtige Aktionen dargestellt? Was soll auf einer Seite zuerst auffallen?
Begründe die Regeln anhand des Produkts. Ein pauschales Verbot bestimmter Schriften oder Farben schafft noch keine gute Gestaltung. Mit konkreten Referenzen und gezielten Korrekturen lässt sich besser arbeiten als mit dem Auftrag, einfach „weniger nach KI“ auszusehen.
Beispiel für begründete Gestaltungsregeln
Die wichtigste Aktion steht nach den Informationen, die man dafür braucht.
Verwende bestehende Komponenten für gleiche Aufgaben.
Farbe ergänzt Beschriftungen und darf Bedeutung nicht allein tragen.
Zeige bei Fehlern, welche Eingabe betroffen ist und wie sie korrigiert wird.
Halte Inhalte auch bei großer Schrift und ohne Animation verständlich.
Eine versionierte Designdatei macht Regeln für weitere Sitzungen auffindbar. Googles DESIGN.md ist ein veröffentlichtes Format dafür. Es verbindet strukturierte Gestaltungsvorgaben mit Erläuterungen für Coding-Agenten.
Wenn du das Format verwendest, richte dich nach der aktuellen Spezifikation. Eine beliebige YAML-Datei ist nicht automatisch damit kompatibel. Auch eine normale Markdown-Datei kann als Projektanleitung nützen; entscheidend sind passende Inhalte und ein Agent, der sie tatsächlich liest.
MerksatzBeurteile eine Oberfläche daran, ob Menschen ihre Aufgabe erledigen können. Der Screenshot zeigt nur einen Zustand.