Wireframe: Definition & Beispiel

Was bedeutet Wireframe?

Ein Wireframe, zu Deutsch Drahtgestell, ist eine vereinfachte Skizze einer Website oder App-Ansicht. Es zeigt, wo welche Elemente erscheinen, seien es Überschriften, Text, Bilder, Schaltflächen, Menü oder Formular.

Es kann dabei auf Farben, echte Bilder und ein ausgestaltetes Design verzichten und aus Kästen, Linien und Platzhaltern bestehen. Es geht in dieser Konzeptphase um Aufbau, Struktur und Nutzerführung und nicht um Optik.

Das Wireframe beantwortet grundsätzliche Fragen: Welche Elemente braucht die Seite? In welcher Reihenfolge erscheinen sie? Wie findet sich der Besucher auf der Seite zurecht?

Wo hat das Wireframe seinen Ursprung?

Das Prinzip hat seine Wurzeln im Interface-Design und in der Informationsarchitektur und gewann mit der wachsenden Komplexität von Websites ab den späten 1990er-Jahren zusätzlich an Bedeutung.

Dabei folgt das Wireframe einem auch aus Architektur und Produktentwicklung bekannten Prinzip: Erst entsteht ein grober Entwurf, bevor es ins Detail geht.

Warum ist das Wireframe wichtig?

Spätere Änderungen an einer fertigen Website sind teuer und aufwendig, an einer Skizze hingegen schnell und günstig. Das Wireframe klärt Grundsatzentscheidungen früh und ohne großen Aufwand.

Es schafft zudem eine gemeinsame Grundlage für alle Beteiligten, bevor Zeit und Ressourcen in Design und Umsetzung fließen. Der Kunde erhält ein Bild davon, wie die Seite aufgebaut sein soll, und Missverständnisse über Struktur und Inhalt fallen auf, bevor sie in den Code eingebrannt sind.

Vorteile

Ein Wireframe klärt Struktur und Nutzerführung früh und günstig.
Es hilft, teure Korrekturen an der fertigen Website zu vermeiden.
Es schafft eine gemeinsame Grundlage für alle Beteiligten.
Es deckt Lücken und Missverständnisse rechtzeitig auf.

Herausforderungen

Die vereinfachte Darstellung führt bei Auftraggebern oft zu Verunsicherung, da das spätere Erscheinungsbild noch nicht erkennbar ist. Es hilft, das Wireframe zu erläutern und klarzustellen, dass das eigentliche Design erst noch folgt.

Ein Wireframe ist zudem nur so gut wie das Verständnis des Nutzerbedürfnisses dahinter. Sonst ist das Wireframe nichts weiter als eine Anordnung ohne jegliche Wirkung.

Beispiel

Ein Maschinenbauer lässt eine neue Website erstellen und hat klare, aber unausgesprochene Vorstellungen. Die beauftragte Agentur legt zunächst ein Wireframe der Seite vor, bevor sie mit dem Design beginnt.

Im Gespräch wird deutlich, dass ein entscheidender Bereich für technische Datenblätter fehlt. Die Ergänzung dieses Bereichs ist in der Skizze innerhalb weniger Minuten erledigt.

Wäre das erst später an der fertigen Seite aufgefallen, hätte die Korrektur womöglich Tage und mehr Budget gekostet.