Website-Wireframes: Warum die Struktur vor dem Design kommt

Ein Wireframe ist der Grundriss einer Webseite: eine schlichte Darstellung aus Rahmen, Platzhaltern und Beschriftungen, die zeigt, welche Inhalte und Funktionen eine Seite hat und wo sie stehen. Farben, Schriften, Bilder und Logo fehlen absichtlich. Dadurch dreht sich die Diskussion um die Frage, die am Anfang zählt: Findet der Besucher, was er sucht, und kann er tun, was er tun soll? Wir haben diesen Beitrag 2020 erstmals veröffentlicht und für 2026 überarbeitet, denn Werkzeuge und Anforderungen haben sich verändert, das Prinzip nicht.

Wo Wireframes im Projekt stehen

Wireframes kommen nach der Sitemap und vor dem visuellen Design. Die Sitemap legt fest, welche Seiten es gibt und wie sie zusammenhängen (wie Sie eine erstellen, steht in unseren SEO-Tipps für 2026). Das Wireframe legt fest, was auf jeder Seite steht.

Eine typische Abfolge:

1. Ziele und Zielgruppen klären
2. Sitemap und Seitentypen festlegen
3. Inhalte sammeln oder zumindest skizzieren
4. Wireframes je Seitentyp
5. Klickbarer Prototyp und Test mit Nutzern
6. Visuelles Design und Komponenten
7. Entwicklung

Bei Websites mit vielen ähnlichen Seiten (Produkte, Blogartikel, Standorte) entwerfen Sie nicht jede Seite einzeln, sondern einen Seitentyp, der für alle gilt.

Fünf Gründe für Wireframes

1. Layout und Struktur werden gemeinsam entschieden

Ein Wireframe gibt Auftraggeber, Design und Entwicklung eine gemeinsame Grundlage. Alle sehen dieselbe Seite und diskutieren über dieselben Elemente. Ob ein Kontaktformular auf die Startseite gehört, lässt sich an einem Wireframe in Minuten klären. Im fertigen Design dauert dieselbe Änderung Stunden.

2. Die Informationshierarchie wird sichtbar

Ohne Farben und Bilder sieht man sofort, was wichtig ist und was nicht. Steht die zentrale Aussage oben? Ist der Call-to-Action erkennbar? Wird der Besucher durch die Seite geführt, oder stehen alle Elemente gleichrangig nebeneinander? Ein Wireframe beantwortet diese Fragen, bevor Geschmacksfragen die Diskussion überlagern.

3. Nutzbarkeit steht im Mittelpunkt

Wenn nur Struktur zu sehen ist, bewerten alle Beteiligten Funktion statt Optik. Das ist entscheidend, denn ob eine Website ihren Zweck erfüllt, hängt vor allem davon ab, ob Menschen sie bedienen können.

4. Funktionen werden vor der Entwicklung geprüft

Viele Funktionen klingen in der Besprechung gut und erweisen sich im Wireframe als überflüssig: der dritte Slider, der Live-Chat, den niemand betreuen kann, die Filterleiste für zwölf Produkte. Funktionen ohne klaren Nutzen können so entfallen, bevor Entwicklungsaufwand entsteht.

5. Es spart Zeit über das ganze Projekt

Wireframes kosten am Anfang einige Tage. Dafür muss später niemand den Zweck einer Seite neu verhandeln, und das Design kann sich auf Gestaltung konzentrieren. Strukturänderungen in der Entwicklung sind deutlich teurer als in der Konzeption.

Welche Detailstufe passt?

In der Praxis arbeiten wir meist mit Mid Fidelity: genug Detail für belastbare Entscheidungen, wenig genug, um schnell zu ändern.

Was sich seit 2020 verändert hat

Echte Inhalte statt Lorem Ipsum

Platzhaltertext verschleiert Probleme. Eine Überschrift, die im Wireframe eine Zeile hat, kann im echten Text drei Zeilen brauchen. Arbeiten Sie mit echten Texten oder zumindest realistischen Entwürfen.

Mobil zuerst

Die meisten Besucher kommen über das Smartphone. Entwerfen Sie die schmale Ansicht zuerst und erweitern Sie dann auf Tablet und Desktop. Was auf dem kleinen Bildschirm keinen Platz findet, ist oft auch auf dem großen nicht nötig.

Barrierefreiheit im Wireframe

Seit Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz für viele Online-Angebote. Barrierefreiheit beginnt in der Struktur, nicht erst im Code. Im Wireframe lassen sich bereits festhalten:

• Überschriftenhierarchie (H1, H2, H3)
• Reihenfolge, in der Elemente per Tastatur erreicht werden
• Beschriftungen von Formularfeldern und Fehlermeldungen
• Ausreichend große Klickflächen, mindestens 24 × 24 CSS-Pixel nach WCAG 2.2
• Alternativtexte für bedeutungstragende Bilder

Mehr dazu in unserem Beitrag zur Barrierefreiheit nach BFSG.

Mehrsprachigkeit früh einplanen

Deutsche Texte sind oft länger als englische, Navigationspunkte in anderen Sprachen ebenfalls. Arabisch und Hebräisch laufen von rechts nach links. Wer mehrere Sprachen plant, sollte im Wireframe testen, ob das Layout längere Begriffe und gespiegelte Leserichtung verkraftet.

Komponenten statt Einzelseiten

Moderne Websites bestehen aus wiederverwendbaren Bausteinen: Hero, Teaser-Raster, FAQ, Kontaktblock. Werden diese Bausteine schon im Wireframe definiert, entsteht daraus später direkt das Designsystem und die Komponentenbibliothek in der Entwicklung.

KI-Werkzeuge

Design-Tools können inzwischen Layout-Entwürfe aus Textbeschreibungen erzeugen. Das ist nützlich, um schnell Varianten zu sehen. Die Entscheidungen über Ziele, Inhalte und Prioritäten nimmt Ihnen das nicht ab, und genau diese Entscheidungen sind der eigentliche Wert eines Wireframes.

Testen, bevor gestaltet wird

Ein klickbarer Prototyp aus Wireframes reicht für erste Nutzertests. Geben Sie fünf Personen aus Ihrer Zielgruppe eine konkrete Aufgabe („Finden Sie heraus, ob die Agentur Shopify-Shops betreut“) und beobachten Sie, wo sie zögern. Die größten Probleme zeigen sich meist schon bei den ersten Tests. Was dort auffällt, korrigieren Sie in Minuten statt in Tagen.

Der nächste Schritt

Nehmen Sie den wichtigsten Seitentyp Ihrer Website, etwa die Leistungsseite, und skizzieren Sie ihn auf Papier: Was muss der Besucher in den ersten fünf Sekunden verstehen, und welche eine Aktion soll er auslösen? Wenn diese Skizze steht, ist das Design deutlich leichter. Bei Konzeption und Umsetzung unterstützen wir Sie gern im Rahmen von Webentwicklung und Apps.