Vom Wireframe zum fertigen UI-Design: Der Prozess erklärt

Kurz gefasst: Ein gutes UI-Design entsteht in Stufen: Zuerst werden Ziele und Abläufe geklärt, dann folgen grobe Wireframes für Struktur und Inhalte, ein klickbarer Prototyp zum Testen, das visuelle Design auf Basis eines Design Systems und schließlich die Übergabe an die Entwicklung mit gemeinsamer Abnahme im Browser. Jede Stufe beantwortet eine andere Frage. Wer Stufen überspringt, diskutiert über Farben, bevor klar ist, ob der Ablauf überhaupt funktioniert, und zahlt die Korrekturen später in der Entwicklung.

Warum der UI-Designprozess in Stufen abläuft

Änderungen werden mit jedem Schritt teurer. Eine Skizze auf Papier ist in Minuten neu gezeichnet. Ein fertig gestalteter Screen braucht Stunden, eine umgesetzte Oberfläche mit Datenanbindung Tage. Der Prozess ist deshalb so aufgebaut, dass die grundlegenden Fragen früh und günstig beantwortet werden und Details erst dann ausgearbeitet werden, wenn die Struktur steht.

Schritt 1: Ziele, Nutzer und Abläufe klären

Bevor jemand zeichnet, stehen Fragen im Raum. Wer nutzt die Anwendung? Welche Aufgaben sollen diese Menschen damit erledigen? Was ist heute mühsam? Welche Daten werden angezeigt und bearbeitet?

Aus den Antworten entstehen User Flows: einfache Diagramme, die zeigen, welche Schritte ein Nutzer von seinem Ziel bis zum Ergebnis durchläuft. Ein Flow für "Rechnung freigeben" macht zum Beispiel sichtbar, dass die Freigabe drei Bildschirme braucht, wo einer reichen würde.

Schritt 2: Wireframes für Struktur und Inhalte

Wireframes sind schematische Entwürfe in Graustufen. Sie zeigen, welche Elemente auf einem Bildschirm stehen, wie sie angeordnet sind und welche Inhalte Priorität haben. Farben, Schriften und Bilder fehlen absichtlich, damit sich alle Beteiligten auf Struktur und Ablauf konzentrieren.

Low-Fidelity und Mid-Fidelity

Low-Fidelity-Wireframes sind grobe Skizzen, oft auf Papier oder Whiteboard, um schnell verschiedene Varianten zu vergleichen. Mid-Fidelity-Wireframes entstehen digital, meist in Figma, und enthalten echte Beschriftungen und realistische Inhalte. Echte Inhalte statt Platzhaltertext sind wichtig: Ein Produktname mit vierzig Zeichen verhält sich im Layout anders als "Lorem ipsum".

Mobile und Desktop gemeinsam denken

Schon in dieser Phase sollte klar sein, auf welchen Geräten die Anwendung genutzt wird. Wireframes für schmale und breite Bildschirme verhindern, dass das mobile Layout später nachträglich gequetscht wird. Mehr dazu in unserem Beitrag zu Responsive Design.

Schritt 3: Prototyp und Test

Aus den Wireframes entsteht ein klickbarer Prototyp, der die wichtigsten Abläufe simuliert. Damit lässt sich testen, ob Nutzer ihre Aufgaben ohne Erklärung lösen können. Schon wenige Testpersonen zeigen die größten Hürden. Wie das mit kleinem Aufwand gelingt, beschreiben wir in Usability-Tests mit kleinem Budget.

Die Ergebnisse fließen zurück in die Wireframes. Diese Schleife ist der wichtigste Teil des Prozesses, weil hier Probleme auffallen, die in der Entwicklung ein Vielfaches kosten würden.

Schritt 4: Visuelles Design

Erst wenn Struktur und Abläufe stehen, folgt das visuelle Design: Farben, Typografie, Abstände, Icons, Bilder und Zustände wie Hover, Fokus, Laden und Fehler. Grundlage ist idealerweise ein Design System mit festgelegten Tokens und Komponenten. So bleiben alle Screens konsistent, und die Entwicklung kann auf vorhandene Bausteine zurückgreifen.

Zum visuellen Design gehören auch die kleinen Details: Übergänge, Rückmeldungen nach einer Aktion, leere Zustände ohne Daten. Sie entscheiden oft darüber, ob sich eine Oberfläche durchdacht anfühlt. Beispiele dafür finden Sie in unserem Artikel über Micro-Interactions. Barrierefreiheit wird ebenfalls in dieser Phase geprüft, etwa ausreichende Kontraste und erkennbare Fokuszustände.

Schritt 5: Übergabe und Abnahme im Browser

Übergabe an die Entwicklung

Mit dem Dev Mode in Figma lesen Entwickler Maße, Abstände, Farben und Komponenten direkt aus dem Entwurf. Trotzdem ersetzt das Werkzeug kein Gespräch. Ein kurzer gemeinsamer Termin klärt Verhalten, das im statischen Entwurf nicht sichtbar ist: Was passiert bei sehr langen Texten, bei Ladefehlern, bei leeren Listen?

Pixelgenau heißt: im Browser geprüft

"Pixel-perfect" bedeutet in der Praxis nicht, dass jede Zeile im Code exakt dem Entwurf entspricht. Browser rendern Schriften unterschiedlich, Inhalte variieren, Bildschirme haben verschiedene Breiten. Entscheidend ist, dass Design und Entwicklung die umgesetzte Oberfläche gemeinsam im Browser abnehmen und Abweichungen bewusst beheben oder akzeptieren.

Häufige Fragen (FAQ)

Kann man Wireframes überspringen und direkt gestalten?

Bei sehr kleinen Änderungen innerhalb eines bestehenden Design Systems ja. Bei neuen Anwendungen oder Funktionen führt das Überspringen fast immer dazu, dass grundlegende Ablaufprobleme erst im fertigen Design oder in der Entwicklung auffallen.

Wie lange dauert der Designprozess?

Das hängt vom Umfang ab. Eine einzelne Funktion kann in wenigen Tagen alle Stufen durchlaufen, eine komplette Anwendung braucht entsprechend länger. Wichtiger als die Dauer ist, dass Design und Entwicklung überlappend arbeiten statt streng nacheinander.

Welche Werkzeuge werden heute eingesetzt?

Figma ist für Wireframes, Prototypen und visuelles Design der verbreitete Standard. Für frühe Skizzen reichen Papier oder ein digitales Whiteboard. Komponenten im Code werden oft in Storybook dokumentiert.

Müssen wir als Auftraggeber in jeder Phase mitarbeiten?

Bei der Klärung der Ziele und beim Feedback zu Wireframes und Prototyp unbedingt, denn dort fallen die wichtigsten Entscheidungen. Beim visuellen Feinschliff genügt meist eine Abstimmung zu ausgewählten Screens.

Fazit

Der Weg vom Wireframe zum fertigen UI-Design ist vor allem eine Methode, Entscheidungen in der richtigen Reihenfolge zu treffen. Wer erst Abläufe klärt und testet und dann gestaltet, bekommt eine Oberfläche, die gut aussieht und im Alltag funktioniert.

Wenn Sie eine neue Anwendung gestalten und umsetzen lassen möchten, sprechen Sie mit uns über Webentwicklung und UI-Design.