Wireframe

Ein Wireframe ist ein vereinfachter Strukturentwurf für eine Webseite oder eine einzelne Ansicht einer Anwendung. Er zeigt, welche Inhalte und Bedienelemente vorgesehen sind, wie sie angeordnet werden und was besonders wichtig ist. Häufig besteht er aus beschrifteten Kästen, Linien und Platzhaltern.

Beim Webdesign hilft ein Wireframe, den Seitenaufbau abzustimmen, bevor Farben, Bilder und andere Gestaltungsdetails ausgearbeitet werden. Er kann als Papierskizze oder digital entstehen. Die Wireframing-Einführung von Figma beschreibt ihn als gemeinsame Grundlage für die Planung von Ansichten, Navigation und Funktionen.

Was zeigt ein Wireframe?

• Inhalte und Reihenfolge: beispielsweise den Einstieg, Leistungsumfang, Referenzen und Kontaktmöglichkeiten.
• Gewichtung: Welche Information steht früh auf der Seite, welche ist ergänzend?
• Bedienelemente: etwa Navigation, Suche, Formularfelder oder einen Call-to-Action.
• Geplantes Verhalten: Anmerkungen können erklären, wohin ein Link führt oder was nach dem Absenden eines Formulars erscheinen soll.

Der Detailgrad richtet sich nach der offenen Frage. Für die Reihenfolge von Abschnitten reichen grobe Flächen. Wenn die Verständlichkeit eines Formulars besprochen wird, sollten Feldbezeichnungen, Hinweise und relevante Zustände erkennbar sein. Ein Wireframe muss weder immer schwarzweiß sein noch jedes Detail der späteren Website vorwegnehmen.

Wireframe, Mockup und Prototyp: Was ist der Unterschied?

Ein Mockup ist meist eine statische, stärker ausgearbeitete Ansicht. Figma erläutert diese Abgrenzung zwischen Wireframe und Mockup. Ein Prototyp dient dagegen dazu, Verhalten zu erproben: zum Beispiel den Weg von einer Leistung zur Terminwahl.

Die Begriffe bezeichnen keine zwingend getrennten Projektphasen. Mehrere Wireframes lassen sich bereits zu einem einfachen klickbaren Prototyp verbinden. Auch Papieransichten können zum Testen dienen, wenn eine Person die Reaktion auf eine Handlung simuliert. Die Nielsen Norman Group zu Prototypen unterscheidet deshalb unter anderem den Detailgrad von Inhalt, Gestaltung und Interaktion.

Beispiel: Wireframe für eine Leistungsseite

Ein Handwerksbetrieb plant eine Seite zur Badsanierung. Der folgende schematische Entwurf legt zunächst fest, welche Fragen die Seite beantwortet und in welcher Reihenfolge:

Der Einstieg kann später als Hero Section gestaltet werden. Schon jetzt lässt sich besprechen, ob Interessenten genug über Leistungsumfang und Ablauf erfahren, bevor sie eine Anfrage stellen. Fehlt beispielsweise das Einsatzgebiet, kann es gezielt ergänzt werden. Die Kästen stehen für geplante Inhalte; sie ersetzen deren Ausarbeitung nicht.

Wie berücksichtigt ein Wireframe Smartphones?

Für einen schmalen Bildschirm müssen Reihenfolge und Platzbedarf mitgedacht werden. Im Beispiel kann das Bild unter den Einführungstext rücken. Auch die Navigation und ein späteres Anfrageformular brauchen eine geeignete mobile Anordnung. Eine verkleinerte Desktop-Ansicht beantwortet diese Fragen oft nicht.

Die Wireframing-Anleitung von Figma behandelt unterschiedliche Ansichten für Geräte und Ausrichtungen. Ergänzen Sie einen mobilen Entwurf, wenn sich die Anordnung wesentlich verändert, und halten Sie das geplante Verhalten dazwischen fest. Ob die Umsetzung tatsächlich flexibel funktioniert, wird später im Browser geprüft. Mehr dazu erklärt Responsive Design.

Was lässt sich mit einem Wireframe noch nicht beurteilen?

Ein Strukturentwurf kann fehlende Inhalte und unklare Wege sichtbar machen. Er belegt aber weder eine funktionierende Formularübermittlung noch reale Ladezeiten. Auch Lesbarkeit, Tastaturbedienung und andere Fragen der Barrierefreiheit müssen am jeweils passenden Entwurf und an der späteren Umsetzung geprüft werden.

Soll ein mehrstufiger Ablauf getestet werden, müssen die betreffenden Ansichten und Reaktionen ausreichend ausgearbeitet sein. Der benötigte Detailgrad hängt von der Testfrage ab. Ein früh besprochener Aufbau verhindert außerdem nicht jede spätere Änderung: Neue Inhalte oder Rückmeldungen können Anpassungen erforderlich machen.

Häufige Fragen zu Wireframes

Brauche ich für jede Unterseite einen eigenen Wireframe?

Beginnen Sie mit unterschiedlichen Seitentypen, etwa Startseite, Leistungsseite, Referenz und Kontakt. Nutzen mehrere Leistungen denselben Aufbau, kann zunächst ein gemeinsamer Entwurf reichen. Prüfen Sie ihn aber mit unterschiedlich langen und komplexen Inhalten. Eigene Ansichten sind sinnvoll, wenn eine Seite andere Funktionen oder einen abweichenden Ablauf benötigt, zum Beispiel eine Terminbuchung.

Müssen die Texte schon fertig sein?

Nein. Das konkrete Angebot, wichtige Überschriften, Menüeinträge und Handlungsaufforderungen sollten jedoch möglichst früh benannt werden. „Beratung zur Badsanierung anfragen“ lässt sich besser beurteilen als ein leerer Kasten. Arbeiten Sie bei längeren Abschnitten mit realistischen Textmengen und kennzeichnen Sie fehlende Inhalte. So wird sichtbar, wer noch Texte, Bilder oder andere Angaben liefern muss.

Welches Feedback hilft bei der Abstimmung mit der Agentur?

Beschreiben Sie die Aufgabe, die ein Besucher lösen soll, und zeigen Sie die konkrete Lücke: „Vor der Anfrage muss er erkennen können, ob wir in seinem Ort arbeiten.“ Das hilft mehr als „Der Bereich gefällt mir nicht“. Klären Sie außerdem, wohin die vorgesehenen Links führen und was nach einer Anfrage passiert. Halten Sie fest, welche Strukturentscheidungen freigegeben sind und welche Gestaltungsfragen noch offenbleiben.

Sie planen eine neue Website oder einen überarbeiteten Auftritt? Unser Angebot als Webdesign-Agentur erläutert die Zusammenarbeit.