Detailgrade: Skizze, Wireframe, Mockup

Der häufigste Fehler beim Zeigen von Entwürfen ist nicht die Qualität des Entwurfs, sondern der falsche Detailgrad. Wer ein farbiges Mockup vorlegt, bekommt Rückmeldungen zu Farben – auch dann, wenn die Frage eigentlich lautete, ob der Aufbau stimmt. Diese Lektion zeigt, welche Stufe wann die richtige ist.

1. Vier Stufen, vier Fragen

Entscheidend ist die rechte Spalte. Jede Stufe beantwortet genau eine Frage, und sie taugt nicht für die anderen. Ein Wireframe kann nicht beantworten, ob eine Seite ansprechend wirkt; ein Mockup kann nicht mehr klären, ob die Reihenfolge stimmt, weil bis dahin niemand mehr strukturell hinsieht.

2. Warum unfertig besser ist

Etwas, das unfertig aussieht, lädt zum Widerspruch ein. Eine handgezeichnete Skizze sagt: Hier ist noch alles offen. Ein fertig gestaltetes Mockup sagt: Hier hat jemand tagelang gearbeitet – und Menschen äußern dann seltener grundlegende Einwände, selbst wenn sie welche haben. Dieser Effekt ist untersucht und stabil: Je ausgearbeiteter der Entwurf, desto weniger strukturelle Kritik kommt zurück.

Daraus folgt eine schlichte Regel: Halten Sie den Detailgrad so niedrig wie möglich, solange noch grundsätzliche Fragen offen sind. Der Aufwand ist dabei nur der kleinere Teil des Gewinns – der größere ist die Ehrlichkeit der Rückmeldungen.

3. Die Stufe zur Frage wählen

Die letzte Zeile verdient eine eigene Bemerkung. Blindtext verdeckt das größte Risiko jedes Entwurfs: dass der echte Text dreimal so lang ist wie gedacht oder dass es ihn noch gar nicht gibt. Verwenden Sie in Wireframes echte Überschriften und echte Knopfbeschriftungen, auch wenn der Fließtext noch Platzhalter ist.

4. Zwischenstände richtig ankündigen

Jeder Entwurf, den Sie zeigen, braucht einen Satz davor. Er nennt die Frage, um die es geht, und die Frage, um die es nicht geht. „Hier geht es darum, ob die Reihenfolge stimmt – Farben und Schriften sind bewusst noch nicht festgelegt.“ Dieser eine Satz spart in der Praxis mehr Diskussionszeit als jede Methodik.

Bei Kunden, die mit Entwürfen wenig zu tun haben, hilft zusätzlich ein Vergleich aus ihrer Welt: Ein Wireframe ist der Grundriss, das Mockup die Visualisierung mit Möbeln. Niemand würde bei einem Grundriss über die Wandfarbe sprechen.

5. Häufige Fragen

Kann man Stufen überspringen? Ja, bei kleinen Änderungen an einer bestehenden Seite. Bei neuen Seiten führt das Überspringen des Wireframes fast immer dazu, dass Strukturfehler erst in der Umsetzung auffallen.

Muss jede Seite alle Stufen durchlaufen? Nein. Wireframes lohnen sich für Seitenmuster – eine Leistungsseite, eine Referenzseite, das Formular. Die weiteren Seiten desselben Musters entstehen daraus.

Was ist mit KI-erzeugten Entwürfen? Sie liefern meist sofort Mockup-Qualität und überspringen damit die Stufen, auf denen die wichtigen Fragen geklärt werden. Bitten Sie ausdrücklich um Graustufen und Struktur, solange der Aufbau nicht steht.

6. Übung zum Selbermachen

Nehmen Sie eine Seite, die Sie kennen, und zeichnen Sie sie in drei Detailgraden: als Skizze in fünf Minuten, als Wireframe mit echten Überschriften in einer halben Stunde, und beschreiben Sie in fünf Zeilen, was am Mockup dazukäme. Legen Sie die Skizze und das Wireframe zwei Personen vor und notieren Sie, welche Art von Anmerkungen jeweils kommt. Der Unterschied ist die eigentliche Lektion.

Stand: September 2026. Kursmaterial der Klarwerk Akademie. Methoden und Werkzeuge der Konzeption entwickeln sich weiter – die Grundprinzipien nutzerzentrierter Gestaltung bleiben.