Wireframe
Ein Wireframe ist eine bewusst schlichte, in der Regel grau gehaltene Skizze einer Webseite, die Struktur und Anordnung der Inhalte zeigt – ohne Farben, Bilder oder finale Typografie. Sie dient als Diskussions-Grundlage, bevor das eigentliche Design beginnt.
Wireframes sind die Grundriss-Ebene des Web-Designs. Sie klären die Informations-Architektur einer Seite, bevor Farben, Bilder und finales Layout investiert werden – und verhindern damit Korrekturschleifen, die aus strukturellen statt grafischen Gründen entstehen.
In einfachen Worten
Wireframes funktionieren wie der Grundriss vor dem Hausbau: Sie zeigen, wo das Logo steht, wo die Hauptbotschaft im sichtbaren Bereich (Above the Fold) liegt, wo die Buttons, wie die Bereiche angeordnet sind und welche Klickpfade vorgesehen sind – ohne sich an Farben oder Bildern festzuhängen. Die graue, unaufwändige Darstellung ist Methode, nicht Mangel: Sie lenkt die Diskussion bewusst auf die Struktur und das Zusammenspiel der Inhalte, statt auf gestalterische Details. Erstellt werden Wireframes mit gängigen Design-Werkzeugen, mit kollaborativen Online-Whiteboards oder schlicht mit Stift und Papier. Üblich ist die Unterscheidung zwischen Low-Fidelity-Wireframes (grobe Block-Skizzen für die erste Strukturierung) und High-Fidelity-Wireframes (detaillierte Anordnungen mit echten Inhalts-Längen, Abständen und Hierarchien).
Wozu brauche ich das?
Wireframes gehören in die frühe Phase jedes Web-Projekts. Sie sparen Zeit, weil grundlegende Probleme der Informations-Architektur und Usability erkannt werden, bevor das aufwändige Detail-Design beginnt. Sie dienen als gemeinsame Diskussions-Grundlage zwischen Auftraggeber und umsetzendem Team und ersetzen lange Texte in Anforderungs-Dokumenten durch eine sichtbare Anordnung. Für Re-Design-Projekte sind Wireframes besonders nützlich, weil sie strukturelle Schwächen der bestehenden Seite sichtbar machen.
Beispiel aus der Praxis
Ein typischer Reibungspunkt in Web-Projekten: Ein umfangreiches Portal-Projekt startet ohne Wireframes direkt mit fertigen Design-Entwürfen. Nach mehreren Iterationen fällt auf, dass die geplante Informations-Struktur auf der zentralen Landingpage gar nicht navigierbar ist – die visuelle Hierarchie funktioniert für den Anwendungsfall nicht. Der Design-Aufwand für die verworfenen Entwürfe ist erheblich. Im zweiten Anlauf wird mit Wireframes gestartet, die Informations-Architektur ist in wenigen Wochen geklärt, und das anschließende Detail-Design läuft in einer einzigen Iteration durch. Wireframes wirken damit als günstige Versicherung gegen Design-Schleifen, die aus strukturellen statt grafischen Gründen entstehen.
Wirtschaftlicher Nutzen
Wireframes verhindern teure Korrekturschleifen im Detail-Design, weil strukturelle Probleme bereits in der günstigen Skizzen-Phase auffallen. Bei größeren Projekten sind Wireframes betriebswirtschaftlich praktisch immer geboten; bei kleineren zumindest für die strategischen Hauptseiten – Startseite, Produktseite, Kontakt. Sie sind eine günstige Versicherung gegen Iterationen, in denen Designs aus strukturellen Gründen verworfen und neu entwickelt werden müssen. Zusätzlich beschleunigen sie die Abstimmung mit Auftraggebern, weil sich am Wireframe konkreter über Strukturen diskutieren lässt als am Text-Dokument.
Typische Fehler
- Wireframes mit Farben und Bildern angereichert – die Diskussion verlagert sich von der Struktur auf die Optik, der eigentliche Zweck geht verloren.
- Platzhalter-Text („Lorem Ipsum") eingesetzt – die tatsächlichen Inhalts-Längen werden systematisch unterschätzt, die Seite wirkt im finalen Layout überfrachtet.
- Nur Desktop-Wireframes erstellt – die mobile Sicht wird zum unkontrollierten Nachgedanken, obwohl sie für die meisten Branchen die relevantere ist.
- Wireframes nur intern besprochen – Auftraggeber und umsetzendes Team haben unterschiedliche Vorstellungen, die erst im Detail-Design auffallen.
- Nur einzelne Seiten betrachtet, ohne die Klickpfade zwischen ihnen zu prüfen – die Navigation zwischen den Seiten wird zur nachträglichen Korrektur.
Worauf achten?
- Inhalte realistisch einsetzen – mit echten Texten, echten Überschriften, echten Bild-Anzahlen. Platzhalter verschleiern Probleme.
- Kein Detail-Design einfließen lassen – sobald das Wireframe „schön" wird, verliert es seinen strukturellen Zweck.
- Mobile- und Desktop-Variante getrennt zeichnen – die Anordnungen unterscheiden sich grundlegend.
- Mit dem Auftraggeber gemeinsam besprechen, nicht nur intern abnehmen – die strukturellen Entscheidungen sollten auf beiden Seiten verstanden sein.
- Klickpfade durchspielen, nicht nur einzelne Seiten betrachten – die Bewegung zwischen Seiten ist Teil der Informations-Architektur.
Häufig gestellte Fragen
Wozu dient ein Wireframe?
Ein Wireframe klärt die strukturelle Anordnung der Inhalte einer Seite, bevor das eigentliche Design entsteht. Es ist Diskussions-Grundlage für die Informations-Architektur und vermeidet teure Korrekturschleifen im späteren Detail-Design.
Wann lohnt sich ein Wireframe?
Bei größeren Web-Projekten praktisch immer; bei kleineren Projekten zumindest für die strategischen Hauptseiten wie Startseite, Produktseite oder Kontakt. Je komplexer die Informations-Struktur, desto höher der Nutzen.
Was ist der Unterschied zwischen Low- und High-Fidelity-Wireframes?
Low-Fidelity-Wireframes sind grobe Block-Skizzen für die erste Strukturierung. High-Fidelity-Wireframes arbeiten mit echten Inhalts-Längen, Abständen und Hierarchien – immer noch ohne Farben und Bilder, aber näher an der finalen Anordnung.
Womit werden Wireframes erstellt?
Mit gängigen Design-Werkzeugen, mit kollaborativen Online-Whiteboards oder schlicht mit Stift und Papier. Die Werkzeug-Wahl ist sekundär – entscheidend ist, dass die Skizze schnell anpassbar bleibt, damit Struktur-Diskussionen ohne Reibungsverluste geführt werden können.
Warum sollten Wireframes grau bleiben?
Sobald Wireframes mit Farben, Bildern oder finaler Typografie angereichert werden, verschiebt sich die Diskussion von der Struktur auf die Optik. Die graue Darstellung ist Methode: Sie zwingt alle Beteiligten, sich zunächst über die Anordnung der Inhalte zu einigen.