Was ist ein Wireframe?

Ein Wireframe zeigt den groben Aufbau einer Bildschirmseite: Kästen, Linien und Platzhaltertext markieren, wo welches Element sitzt, ohne dass schon ein visuelles Design dahintersteckt. Markenfarben, echte Bilder oder die finale Schrift fehlen bewusst. Es geht um die Struktur, nicht um die Optik.

Meist ist der Wireframe das erste greifbare Ergebnis nach der Recherchephase. Bevor die erste Box gezeichnet wird, sollte klar sein, für wen die Seite entsteht. Das liefert die Arbeit mit der Buyer Persona und der Customer Journey: was diese Person an genau diesem Punkt ihres Weges sehen muss.

Das Ergebnis soll niemanden von der Optik überzeugen. Es soll ein Team, Design, Entwicklung und Business, dazu bringen, über die Position des Menüs, die Schritte eines Formulars oder die Reihenfolge der Inhalte zu diskutieren, bevor Stunden ins finale Design fließen.

Gerade weil er bewusst grob gehalten ist, lässt sich ein Wireframe in Minuten anpassen. Diese Billigkeit der Änderung macht ihn zum richtigen Werkzeug für eine Phase, in der noch vieles zur Diskussion steht.

Alle drei gehören zum selben Projekt und beantworten unterschiedliche Fragen. Der Wireframe klärt, wo etwas steht, das Mockup klärt, wie es aussieht, und der Prototyp klärt, wie sich die Bedienung anfühlt. Wer den ersten Schritt überspringt, um schneller beim dritten zu landen, zahlt meist drauf: Strukturentscheidungen müssen dann rückgängig gemacht werden, obwohl sie schon im finalen Design stecken.

Der Prozess beginnt fast immer schwarz-weiß oder in Graustufen, damit sich niemand an Farben aufhält, solange die Struktur noch nicht steht. Ein Low-Fidelity-Wireframe kann eine Handskizze oder ein paar in Minuten platzierte Rechtecke sein; ein High-Fidelity-Wireframe hält sich schon an reale Proportionen und Abstände, auch wenn das visuelle Design weiterhin fehlt. Die Nielsen Norman Group empfiehlt sogar Zeitlimits oder dicke Stifte beim Skizzieren von Hand, damit niemand Minuten mit ästhetischen Details verliert, die noch gar nicht dran sind.

Navigationselemente wie das Hauptmenü oder eine Breadcrumb werden schon in dieser Phase platziert, wenn auch nur als ungestylte Textbox: Wichtig ist, dass dort ein Navigationspfad sitzt, nicht wie er später aussieht.

Einen Block im Wireframe zu verschieben kostet einen Klick und einen Zug mit der Maus. Dieselbe Änderung nach der Programmierung bedeutet, Code, Styles und oft schon fertigen Text für genau diese Stelle anzufassen. Dieser Kostenunterschied ist der Grund, warum kaum ein Team diese Phase auslässt, egal wie knapp der Zeitplan ist.

Das Werkzeug spielt dabei eine kleinere Rolle als das Ergebnis. Ein Wireframe entsteht auf Papier, an einem Whiteboard oder in einem digitalen Design-Programm; entscheidend ist, dass jeder im Team ihn ohne zusätzliche Erklärung versteht. Bei Projekten mit vielen Screens lohnt es sich, dieselben visuellen Konventionen durchzuhalten, damit ein Rechteck mit einem Kreuz immer „hier kommt ein Bild" bedeutet und nicht von Wireframe zu Wireframe wechselt.

Im Wireframe wird auch die Struktur festgelegt, die eine Suchmaschine später liest: welche Überschriftenhierarchie die Seite hat, welche internen Links vorkommen und in welcher Reihenfolge. Das sind Entscheidungen, die zum technischen SEO des Projekts gehören und hier deutlich günstiger zu treffen sind als später auf einer bereits veröffentlichten und indexierten Seite, wenn jede Korrektur zusätzlich Entwicklungszeit kostet.

Die Anordnung der Blöcke wirkt sich auch auf reale Performance-Kennzahlen aus. Reserviert der Wireframe schon Platz für jedes Bild und jeden nachladenden Block, entstehen später keine Layoutsprünge, die den Core Web Vitals der Live-Seite schaden. Und eine klare Struktur mit sinnvoller Link-Hierarchie lässt sich für einen Crawler leichter erfassen als eine, die spontan entstanden ist.

Nach dem Launch schließt sich der Kreis: Eine Heatmap zeigt, ob Nutzer tatsächlich dort klicken und scrollen, wo der Wireframe es angenommen hatte. Stimmt das nicht überein, ist genau diese Abweichung der beste Hinweis für das nächste Redesign.

• Fang schwarz-weiß an: Farbe zu früh einzuführen lenkt das Gespräch auf persönlichen Geschmack statt auf die Struktur.
• Lege die realen Maße der Inhaltsblöcke fest, auch wenn der Inhalt selbst nur Platzhaltertext ist.
• Platziere Navigationselemente, Menüs und Pfade schon jetzt, auch nur als ungestylte Box.
• Denke die Überschriftenhierarchie der Seite bereits in dieser Phase, nicht erst beim visuellen Design.
• Teile den Wireframe mit der Entwicklung, bevor es zum Mockup geht: Eine Strukturänderung kostet hier Minuten, später Tage.
• Validiere den Wireframe mit einer echten Person aus der Zielgruppe, bevor er als abgeschlossen gilt, notfalls in einer kurzen Session.

• Markenfarben oder finale Bilder einbauen, bevor die Struktur steht, was das Gespräch Richtung visuelles Design zieht.
• Den Wireframe überspringen und direkt mit dem Mockup starten, um erst spät zu merken, dass die Struktur nicht passt.
• Navigationselemente wie Menüs oder Breadcrumbs im Wireframe weglassen und erst im finalen Design improvisiert ergänzen.
• Überschriftenhierarchie und interne Links erst durchdenken, wenn die Seite schon fertig layoutet ist.
• Den Wireframe für final erklären, ohne ihn je jemandem außerhalb des Design-Teams gezeigt zu haben.