Web & Entwicklung

Wireframe

Ein Wireframe ist ein grober Bauplan einer Seite: Wo steht welcher Inhalt, in welcher Reihenfolge, mit welcher Gewichtung. Bewusst ohne Farben, Bilder und Schriftauswahl, damit die Struktur allein beurteilt wird.

Redaktionell geprüft von Alexander SeidlertwentyonepixelsStand:

Warum ohne Gestaltung

Weil sonst über die Farbe diskutiert wird, während die Reihenfolge falsch ist. Ein Wireframe zwingt die Frage: Findet ein Besucher, was er sucht, und in welcher Reihenfolge bekommt er es?

Das ist der Punkt, an dem Änderungen am billigsten sind. Eine umgestellte Seitenstruktur im Bauplan kostet eine halbe Stunde; dieselbe Umstellung nach der Umsetzung kostet ein Vielfaches.

Warum absichtlich ohne Farbe gearbeitet wird

Weil Farbe und Bilder die Diskussion sofort auf Geschmack lenken. Ohne sie lässt sich über das reden, was in dieser Phase zählt: Was steht oben, was ist wichtiger als was, welche Wege gibt es. Diese Fragen sind später teuer zu ändern.

Der Nebeneffekt ist Tempo. Eine Struktur lässt sich in einer Stunde umbauen und in zehn Minuten verwerfen — bei einem fertigen Entwurf traut sich das niemand mehr, und dann bleibt eine falsche Struktur stehen.

Was mit echten Texten passiert

Die Struktur ändert sich. Platzhaltertext ist gleichmäßig und freundlich; echte Überschriften sind unterschiedlich lang, echte Produktnamen brechen um, echte Rechtstexte sind länger als jeder Entwurf vorsieht.

Deshalb gehört mindestens ein Entwurf mit echten Inhalten dazu, und zwar mit den ungünstigsten: der längste Produktname, die kürzeste Beschreibung, das Bild im falschen Format.

Was hineingehört

Echte Überschriften statt Blindtext. Sobald Platzhalter stehen, beurteilt niemand mehr, ob die Botschaft trägt — und genau darum geht es.

Und die Zielhandlung: Was soll auf dieser Seite passieren? Ein Bauplan ohne erkennbaren nächsten Schritt beschreibt eine Seite, die niemanden weiterbringt.

Häufige Fragen zu Wireframe

Ein Wireframe klärt die Anordnung, ein Mockup das Aussehen, ein Prototyp das Verhalten. Anklicken lässt sich nur der Prototyp; er ist der erste Entwurf, an dem sich prüfen lässt, ob ein Weg über mehrere Schritte trägt. Daraus folgt eine Arbeitsregel: Wer am Wireframe abnehmen will, wie die fertige Seite wirkt, verlangt eine Auskunft, die dieser Entwurf nicht gibt – und wer einen mehrstufigen Bestellweg prüfen muss, braucht keinen Bauplan, sondern einen klickbaren Entwurf.

Daran, dass er Entscheidungen enthält, die in dieser Runde niemand treffen wollte: ausgewählte Schriften, echte Fotos, feste Pixelwerte für Abstände. Die Prüfregel dafür ist kurz – zu jedem Element muss eine offene Frage gehören, die es beantwortet. Findet sich keine, ist das Element Vorwegnahme. Der umgekehrte Fehler zählt genauso: Ein Bedienelement ohne Beschriftung lässt sich nicht beurteilen, weil niemand weiß, was es auslöst.

Nein. Gezeichnet werden Seitentypen, nicht einzelne Seiten. Die Regel dafür lautet: Ein eigener Wireframe ist fällig, sobald eine Seite eine Aufgabe hat, die keine andere Seite hat – verkaufen, abfragen, vergleichen. Alle übrigen Seiten folgen dem Bauplan ihrer Vorlage. Wer stattdessen jede Unterseite einzeln zeichnet, erzeugt für jede eine Gelegenheit zur Abweichung, und jede Abweichung steht später als Sonderfall im Code, der gepflegt werden muss.

So wenige, dass jedes einzelne begründet ist. Für Bestellvorgänge gibt es dazu eine Messung: Das Baymard Institute hat am 26.06.2024 im Durchschnitt 11,3 Felder gezählt – 2019 waren es 12,7 – und hält acht für ausreichend. Im Bauplan ist diese Zahl überhaupt nachzählbar, weil jedes Feld dort derselbe leere Kasten ist. Die Regel dazu: Wer für ein Feld nicht sagen kann, wozu die Auskunft dient, streicht es.

Nein. Die Zahl sieben stammt aus der Gedächtnisforschung – das Kurzzeitgedächtnis hält etwa sieben Einheiten für rund 20 Sekunden – und Jakob Nielsen hat am 06.12.2009 ausdrücklich widersprochen, sie auf Menüs zu übertragen: Ein sichtbares Menü wird wiedererkannt, nicht erinnert. Für den Bauplan heißt das, dass nicht die Anzahl das Kriterium ist, sondern die Gruppierung. Ein Menü aus grauen Kästen wirkt dort voller, als es mit echten Bezeichnungen wirkt.

Mehr zum Thema

9 Min. Lesezeit

Barrierefreie Website: wen die Pflicht trifft — und wen nicht

Das Barrierefreiheitsstärkungsgesetz gilt seit Juni 2025, und seither kursieren zwei falsche Behauptungen: Es gelte für alle Websites, oder es gelte für fast niemanden. Beides stimmt nicht. Wer wirklich betroffen ist, was gefordert wird und warum sich die Umsetzung auch ohne Pflicht rechnet.

8 Min. Lesezeit

Chatbot-Kennzeichnung nach Art. 50: Was technisch zu tun ist

Ab dem 2. August 2026 müssen Chatbots sich zu erkennen geben. Die Anforderung ist kürzer, als die Diskussion vermuten lässt — die Umsetzung hat allerdings ein paar Stellen, an denen es schiefgeht.

Alle Fachbeiträge ansehen

Passende Leistungen

UI/UX Design & Prototyping

Von der User-Journey bis zum klickbaren Prototyp: Interfaces, die Nutzer intuitiv verstehen und die Ihre Conversion-Ziele erreichen.

Mehr dazu

Webdesign & Redesign

Individuelle Websites in Figma entworfen und mit Tailwind CSS sauber umgesetzt — responsiv, schnell und auf Ihre Marke zugeschnitten.

Mehr dazu

Conversion-Rate-Optimierung

Datenbasierte Optimierung für mehr Leads und Verkäufe: A/B-Testing, Heatmaps und Analyse der User-Journey.

Mehr dazu