Wireframe.

Ein Wireframe ist der Bauplan einer Seite. Er zeigt, welche Inhalte wo stehen, in welcher Reihenfolge Besucher sie sehen und wo Schaltflächen, Formulare und Bilder hinkommen, aber noch ohne endgültige Farben, Schriften und Fotos. Die Nielsen Norman Group beschreibt Wireframes als übliches Arbeitsergebnis im UX Design, mit dem sich Layout-Ideen auf Seitenebene zeigen lassen. Für dich als Auftraggeber ist das der günstigste Moment für Änderungen: Ein verschobener Kasten im Wireframe kostet Minuten, eine umgebaute fertige Seite deutlich mehr.

So funktioniert ein Wireframe

Ein Wireframe ist bewusst low-fidelity, also unfertig im Aussehen. Laut Nielsen Norman Group bilden Entwürfe mit niedriger Detailtreue nur einen Teil oder gar keine der visuellen Eigenschaften des späteren Systems ab, etwa als Schwarz-Weiß-Skizze oder mit Platzhaltern für Bilder. Das lenkt das Gespräch auf Struktur statt auf Farbtöne.

Im Ablauf steht das Wireframe zwischen Konzept und Gestaltung. Zuerst klärst du Ziele und Zielgruppe, daraus folgen Seitenstruktur und Wireframes, danach das visuelle Design und zuletzt die technische Umsetzung. Wie Oberfläche und Nutzererfahrung dabei zusammenhängen, erklärt unser Beitrag zum Unterschied zwischen UI und UX Design. Laut Nielsen Norman Group zeigen Wireframes Layouts gut, beschreiben Interaktionen aber schlecht. Für Abläufe über mehrere Schritte verbindet man sie deshalb mit Ablaufdiagrammen zu sogenannten Wireflows.

Worauf du als Betrieb achten solltest

Bring echte Inhalte mit, so früh es geht. Ein Wireframe mit Blindtext verschleiert, wie lang deine Leistungsbeschreibungen wirklich sind. In Projekten sehen wir oft, dass ein Abschnitt im Wireframe luftig wirkt und mit dem echten Text plötzlich nicht mehr in den geplanten Platz passt.

Prüfe das Wireframe mit den Augen deiner Kunden. Frag dich bei jeder Seite, ob ein Besucher sofort sieht, was du anbietest, wo du arbeitest und wie er anfragt. Gerade auf einer Landingpage spielt die Reihenfolge der Abschnitte eine große Rolle dafür, ob jemand bis zum Formular kommt.

Gib Rückmeldung zur Struktur, nicht zur Optik. Graue Kästen sind Absicht, keine Nachlässigkeit. Laut Nielsen Norman Group hängen Gestalter weniger an skizzenhaften Entwürfen und ändern sie bereitwilliger als ausgearbeitete. Genau jetzt ist deshalb der richtige Zeitpunkt für grundsätzliche Einwände.

Lass dir die Ansicht für Handy und Desktop zeigen. Auf dem Smartphone stehen Inhalte untereinander, und was am Desktop nebeneinander wichtig wirkt, rutscht dort nach unten.

Häufige Fragen zum Wireframe

Ist ein Wireframe dasselbe wie ein Mockup oder Prototyp? Nein. Das Wireframe zeigt die Struktur, ein Mockup das fertige Aussehen, und ein Prototyp lässt sich zusätzlich anklicken. Laut Nielsen Norman Group gibt es Prototypen in hoher und niedriger Detailtreue, ein Wireframe gehört zur niedrigen.

Womit werden Wireframes erstellt? Auf Papier, am Whiteboard oder in Design-Werkzeugen wie Figma. Für dich als Auftraggeber zählt nicht das Werkzeug, sondern dass du den Entwurf kommentieren kannst.

Lohnt sich ein Wireframe auch für eine kleine Website? Ja, schon bei wenigen Seiten klärt es, welche Inhalte du liefern musst. Woran Webprojekte oft schon davor scheitern, zeigt unser Beitrag Warum die meisten Webprojekte am Briefing scheitern.

Wenn du eine neue Website planst und den Aufbau festlegen willst, bevor gestaltet wird, schau dir unser Webdesign an.