Was ist eigentlich … ein „Wireframe“?

Auf Englisch klingt es bedeutsam, so ein „Wireframe“. Auf Deutsch allerdings … nicht ganz: „Drahtgerüst“. Man fragt sich: Tut das weh?

Nein. Es ist der Entwurf einer Webseite, bevor sie gestaltet, gecodet und betextet wird. Es ist ein Schema, das aufzeigt, wo Navigationsmenü, Grafiken, Bilder und Textblöcke ihren Platz finden werden.

Da der Wireframe lediglich den logischen Aufbau beschreibt, wird gänzlich auf eine grafisch schöne Gestaltung verzichtet – höchstens Graustufen zur Markierung der Wahrnehmungsreihenfolge werden eingesetzt. Daher sieht auch die schönste Webseite im Grobentwurf eher langweilig und „drahtig“ aus.

Welche Arten gibt es?

Es gibt zwei Arten von Wireframes: den statischen und den dynamischen. Ein statischer wird erstellt, wenn es sich um eine einzige Seite handelt, die konzipiert werden soll. Ein dynamischer Wireframe kann eingesetzt werden, um mehrere Seiten, die untereinander verknüpft sind, zu repräsentieren. So kann von einer Seite auf eine andere (Unter-)Seite verlinkt werden und der Kunde ein Gefühl dafür bekommen, wie sich eine Webseite letztendlich „anfühlen“ wird.

Wireframe der Produktdetailseite eines Kundenprojektes

Was bringt der Einsatz von Wireframes?

Erstens: Struktur. Werden visuelle Objekte – Fotos, Grafiken etc. – abgebildet, absorbieren diese sofort die Aufmerksamkeit des Betrachters. Dabei geht es zu Beginn doch vor allem um eines: Strukturierung. Wer würde schon ein Gebäude errichten, ohne vorher dessen Grundriss zu planen? Genau das leisten Wireframes.

Zweitens: Abstimmung. Gerade wenn die Erstellung von Webseiten extern beauftragt wird, sind genaue Abstimmungen unumgänglich. Wo genau soll ein Button gesetzt werden? Wo befinden sich Logo und Startseitentext? Es gibt zahlreiche Fragen, für deren Beantwortung eine schematische Darstellung sehr arbeitserleichternd ist. Kunde und Dienstleister sind so auf dem gleichen Stand und reden nicht aneinander vorbei.

Drittens: Grafikvorlage. Erst, wenn der logische Aufbau der Webseite passend und gut ist, kann über die konkrete Gestaltung nachgedacht werden. Durch den Einsatz von Wireframes bekommt der jeweilige Grafiker eine genaue Vorstellung davon, was der Kunde erwartet – und kann mit der konkreten Gestaltung beginnen.

Ein Wireframe ist also nicht stachelig, sondern ziemlich nützlich, um einen Eindruck von Grafik und Bedienbarkeit einer im Entstehen begriffenen Webseite zu bekommen! Ob statisch oder dynamisch, ist dabei abhängig von der Komplexität des Entwurfs.