UX-Design-Prozess: von Wireframes zum klickbaren Prototyp

Eine Website, die gut aussieht und trotzdem keine Anfragen bringt, hat meist kein Design-Problem, sondern ein Prozess-Problem. Dieser Beitrag beschreibt den UX-Design-Prozess in sechs Schritten, vom ersten Gespräch bis zum klickbaren Prototyp, und was sich seit 2025 daran geändert hat.

Der Prozess in sechs Schritten

1. Verstehen: Zielgruppe, Wettbewerb, Daten.
2. Ziele festlegen: Was soll die Seite erreichen, woran messt ihr es?
3. Struktur planen: Seitenbaum und Wege.
4. Wireframes: Aufbau jeder Seite ohne Gestaltung.
5. Screendesign: Typografie, Farben, Bilder, Komponenten.
6. Testen und verbessern: mit echten Nutzer:innen und mit Messwerten.

Die Reihenfolge ist keine Einbahnstraße. Ein Test kann euch zurück zur Struktur schicken. Wichtig ist, dass jeder Schritt auf dem vorherigen aufbaut und nichts übersprungen wird.

1. Verstehen: eine Woche reicht

Ihr braucht keine monatelange Studie. Eine Woche mit drei Quellen genügt meist:

• Gespräche: fünf bis acht Interviews mit Kund:innen oder Interessent:innen. Fragt nach dem Problem, nicht nach der Website.
• Daten: Suchanfragen aus der Google Search Console, Seitenaufrufe, Abbrüche, Fragen aus dem Vertrieb.
• Wettbewerb: Schaut, wie drei bis fünf Anbieter ihr Angebot erklären, und was sie auslassen.

Das Ergebnis ist eine Seite: Wer kommt, was will er wissen, was hält ihn ab?

2. Ziele und Aufgaben

Legt eine Hauptaktion pro Seite fest: Anfrage senden, Termin buchen, Produkt kaufen. Dazu eine Zahl, an der ihr den Erfolg ablesen könnt, etwa die Anfragequote oder die Zeit bis zum Kontakt. Ohne Ziel wird jede Gestaltungsdiskussion zur Geschmacksfrage.

3. Struktur und Navigation

Sammelt alle Inhalte, gruppiert sie aus Sicht der Besucher:innen und baut daraus einen Seitenbaum. Eine einfache Regel: Jede Seite ist in höchstens drei Klicks von der Startseite erreichbar, und die Beschriftung nutzt die Wörter, die eure Kund:innen verwenden.

4. Wireframes: Struktur vor Schönheit

Ein Wireframe zeigt, was auf einer Seite steht und in welcher Reihenfolge, ohne Farben und ohne Bilder. Graue Kästen, echte Überschriften, echte Texte, soweit vorhanden.

So arbeitet ihr gut damit:

• Beginnt mit dem Handy. Dort zeigt sich, was wirklich wichtig ist.
• Nutzt echte Inhalte statt „Lorem ipsum“. Platzhalter verstecken Probleme.
• Legt pro Abschnitt fest, was er beantworten soll.
• Haltet es grob. Ein Wireframe ist zum Besprechen da, nicht zum Bewundern.

5. Screendesign: Gestaltung mit System

Im Screendesign kommen Typografie, Farbe, Bilder und Bewegung dazu. Damit das Ergebnis konsistent bleibt, braucht ihr ein System statt Einzelentscheidungen:

• Raster und Abstände: wenige feste Werte, die sich wiederholen.
• Typografie: eine Hierarchie aus drei bis fünf Stufen (mehr dazu im Beitrag zur visuellen Hierarchie).
• Komponenten: Buttons, Karten, Formulare einmal gestalten und überall verwenden. Plant alle Zustände mit: Hover, Fokus, Fehler, leer.
• Barrierefreiheit: ausreichende Kontraste, Tastaturbedienung, Fokusanzeige. Der Maßstab ist WCAG 2.2 AA. Seit dem 28. Juni 2025 gilt außerdem das Barrierefreiheitsstärkungsgesetz für viele Angebote an Verbraucher:innen, etwa Online-Shops.

6. Der klickbare Prototyp: was sich seit 2025 geändert hat

Früher war der Weg vom Wireframe zum Prototyp lang: Entwurf im Designprogramm, Verknüpfungen setzen, abstimmen, dann bauen. Heute lässt sich ein klickbarer Entwurf direkt im Browser erzeugen.

So haben wir unsere neue Website gebaut: ohne Designprogramm. Das Team hat besprochen, was es will, und Claude hat daraus klickbare Entwürfe gebaut, jeder mit eigenem Link. Das Ergebnis waren sechs Entwürfe in gut zwei Arbeitstagen. Design, Text und Technik haben am selben Entwurf gearbeitet statt nacheinander. Die ganze Geschichte steht im Making-of.

Was das für den Prozess bedeutet:

• Früher testen. Wer auf dem eigenen Handy klickt, merkt schneller, was nicht stimmt, als beim Betrachten einer Folie.
• Weniger Übergaben. Der Prototyp ist schon Code. Er ist die Vorlage für die Umsetzung.
• Mehr Verantwortung beim Team. Die KI liefert schnell. Jemand muss mitlesen und früh merken, wenn eine Richtung nicht trägt.

Für große Teams mit vielen Komponenten bleibt ein Designprogramm sinnvoll. Für Unternehmensseiten mit einem kleinen Team ist der direkte Weg oft schneller.

7. Testen und optimieren

Testet vor dem Livegang und danach.

• Nutzertest mit fünf Personen. Gebt ihnen eine Aufgabe („Finde heraus, was ein Relaunch bei uns kostet“) und schaut still zu. Fünf Tests zeigen die meisten Probleme.
• Core Web Vitals. Ladezeit gehört zur UX. Google nennt als gute Werte: Largest Contentful Paint höchstens 2,5 Sekunden, Interaction to Next Paint höchstens 200 Millisekunden, Cumulative Layout Shift höchstens 0,1, jeweils für drei von vier Seitenaufrufen.
• A/B-Tests lohnen sich erst bei genug Besucher:innen. Bei wenig Verkehr bringen Nutzertests mehr.
• Zielwerte im Blick behalten. Eure Hauptaktion aus Schritt 2 ist die Zahl, an der ihr den Erfolg messt.

Was der Prozess in Projekten leisten muss

Der Ablauf bleibt gleich, die Gewichte verschieben sich je nach Projekt.

CMWTEC, Maschinenbau. Bei der neuen Website des Herstellers von Maschinen für die Batterieproduktion ging es um technisches Storytelling und SEO-Inhalte für B2B-Kund:innen und Fachkräfte. In so einem Projekt liegt der Schwerpunkt auf Schritt 1 und 3: Wer sucht was, in welcher Sprache, und wie führt die Struktur von der Frage zur Fachseite? Gestaltung kommt danach.

SCHERM Gruppe. Die Gruppe hat eine neue Website mit Unterseiten für ihre Bereiche bekommen. Hier entscheidet die Informationsarchitektur: Wie finden Besucher:innen ihren Bereich, und wo tritt die Gruppe gemeinsam auf? Wer diese Struktur vor dem Screendesign klärt, spart spätere Umbauten.

Bettina Barty, Shop für zwei Marken. Im Shop sind die Wege kürzer, aber heikler: Von der Produktliste bis zur Kasse darf nichts im Weg stehen. Ein Prototyp mit realen Produkten zeigt Brüche schneller als jede Beschreibung.

Typische Fehler im Prozess

• Mit dem Design beginnen. Bevor Ziel und Struktur klar sind, wird über Farben gestritten.
• Interviews überspringen. Wer nur die eigene Sicht kennt, baut für sich.
• Wireframes mit Platzhaltertext. Echte Texte zeigen, ob die Überschrift passt, ob der Platz reicht und ob jemand sie überhaupt liest.
• Zu viele Freigeber. Je mehr Personen mitreden, desto beliebiger der Kompromiss. Legt vorab fest, wer entscheidet.
• Ein Test am Ende. Wer nur kurz vor dem Livegang testet, kann kaum noch etwas ändern. Testet schon den ersten klickbaren Entwurf.
• Barrierefreiheit als Nacharbeit. Kontrast und Tastaturbedienung lassen sich im Entwurf leicht einplanen und am fertigen Code mühsam nachrüsten.

Rollen und Abstimmung

Ein Projekt braucht drei Entscheidungsebenen: Wer entscheidet über Ziele (meist Geschäftsführung oder Marketing), wer über Inhalte (Fachleute) und wer über Gestaltung und Technik (Agentur). Legt fest, wann welche Ebene gefragt wird. Bewährt hat sich eine feste Abstimmung pro Schritt: Nach Schritt 2 stimmen die Ziele, nach Schritt 3 die Struktur, nach Schritt 5 der Entwurf. Ein klickbarer Prototyp mit eigenem Link macht diese Runden kurz, weil alle dasselbe auf ihrem eigenen Gerät sehen.

Was ihr dem Prototyp mitgebt

Ein Prototyp ist nur dann eine Übergabe, wenn er erklärt, warum er so aussieht. Bei uns gehören dazu ein Dokument zur Zielgruppe, zu Zielen und Barrierefreiheit (PRODUCT.md) und eines zum visuellen System mit Farben, Schriften und Abständen (DESIGN.md). Die fertige Seite im Prototyp ist dann die Vorlage für die Umsetzung, etwa in WordPress. So geht kein Wissen zwischen Design und Entwicklung verloren.

Ein Workshop-Tag zum Einstieg

Für den Start reicht ein Tag mit Entscheider:innen und Fachleuten:

1. Vormittag, Ziele: Zielgruppen benennen, die eine Hauptaktion pro Seite festlegen, Erfolg messbar machen.
2. Mittag, Struktur: Inhalte sammeln, in Gruppen sortieren, einen Seitenbaum zeichnen.
3. Nachmittag, Skizzen: Die drei wichtigsten Seiten als grobe Wireframes aufteilen und besprechen.
4. Danach: Ein klickbarer Entwurf, den alle am nächsten Tag auf dem eigenen Handy ansehen.

Und jetzt

Verstehen vor Gestalten, ein Ziel pro Seite, früh klickbar, mit echten Menschen testen. Wenn ihr euren Prozess gemeinsam mit uns aufsetzen wollt: Auf Websites & Relaunch zeigen wir, wie wir arbeiten.