Was ist … Lexikon: Wireframe

Ein Wireframe ist ein Gitter, das der Webdesigner in der Planungsphase über eine Webseite legt, um zu definieren, in welchem Planquadrat sich unterschiedliche Bereiche einer Website befinden. Durch einen Wireframe gliedert man so Bereiche mit Text und solche mit Abbildungen. Mit Hilfe von Wireframes werden auch die Areale auf Webseiten definiert, die die meiste Aufmerksamkeit des Betrachters oder Lesers bekommen sollen. Wichtige Bereiche sind deshalb größer.

Ein Wireframe wird zur grundlegenden Strukturierung einer Webseite eingesetzt und untergliedert eine Internetseite unabhängig von Grafiken oder Farben.

Die ursprüngliche Bedeutung

Im eigentlichen Sinne handelt es sich bei einem Wireframe um ein Drahtgitter, das die Konturen bestimmt. Ursprünglich ging es darum, mit Hilfe einer Drahtfigur als Schneiderpuppe Formen anzupassen. Heute hat man den Begriff auf das Internet übertragen. Das CAD Computer Aided Design war das erste, das mit Hilfslinien arbeitete, um dreidimensionale Objekte mittels eines Wireframes darzustellen.

Der Wireframe in der Website-Erstellung

Heute wird Wireframe als Begriff vorwiegend bei der Konzeption und Gestaltung von Webseiten verwendet. Als Wireframe oder Mock-up werden Entwürfe von Internetseiten in der Entwicklungsphase bezeichnet. Bevor die eigentlichen Inhalte eingestellt werden, wird mit Hilfe von Wireframes die Struktur der Webseite definiert. Dazu gehören bestimmte Inhaltsbereiche ebenso wie Navigationselemente, Logos, Suchfunktionen, Fußnoten, Menüleisten und vieles mehr. Technisch unterscheidet man zwei unterschiedliche Arten von Wireframes: den statischen und den dynamischen. Wie unterscheiden sich diese?

Der statische Wireframe

Als statischen Wireframe bezeichnet man einen Erstentwurf einer Webseite, der grundlegend definiert, welche Elemente auf der Webseite enthalten sein sollen. Hierbei handelt es sich um ein rudimentäres, konzeptionelles Schema. Inhalte und Design spielen in dieser Phase noch keine Rolle.

Der dynamische Wireframe

Anders ist dies beim dynamischen Wireframe. Hierbei besteht der Entwurf bereits aus mehreren Seiten, die auch schon in eine hierarchische Ordnung gebracht wurden. Die Verknüpfung zwischen den Seiten funktioniert bereits, so dass Funktionen wie beispielsweise Suche oder Navigation schon getestet und überprüft werden können. Ein so genannter Navigationsbaum oder ein Flussdiagramm geben Aufschluss über die Organisationsstruktur der Webseiten.

Dennoch befinden wir uns auch bei dynamischen Wireframes immer noch in der Konzeptionsphase. Das Design spielt lediglich eine untergeordnete Rolle. Einzelne grafische Elemente werden nur vereinfacht dargestellt, da es lediglich um die grundlegende Gliederung eines Internetauftritts und seiner Websites geht.

Was kommt nach dem Wireframe?

Hat man sich auf die Struktur einer Webseite verständigt und will diese übernehmen, werden die Wireframes weiter bearbeitet. Nun werden Logos eingebunden, das Design entworfen, Inhalte formuliert und Farben festgelegt. In einem ersten Schritt verwendet der Webdesigner für den Entwurf in der Regel nur Graustufen. Sie reichen aus, um Wahrnehmungsreihenfolgen zu testen und gezielt Akzente zu setzen. Textabschnitte werden mit den berühmten Lorem ipsum Passagen versehen, um zu demonstrieren, wie die fertige Seite später aussieht.

Vorteile

Wireframes haben viele Vorzüge. Zum einen erleichtern sie es dem Webdesigner, Webseiten zu strukturieren. Andererseits bieten sie durch ihre Abstraktion gerade auch dem Laien eine gute Vorstellung davon, was wo auf einer Webseite stehen soll und welche Inhalte mit welchen anderen verknüpft werden sollen.

Bei einem Webauftritt mit vielen Unterseiten wird die Struktur ansonsten nämlich sehr komplex und unübersichtlich, so dass es schwer fällt, die Konzeption klar und verständlich zu halten. Da dies dem Leser oder Internetbesucher ebenso ergeht, ist die Phase der Konzeption und Strukturgebung besonders wichtig. Wireframes sind das wichtigste Abstraktions-Hilfsmittel bei der Gestaltung von Webseiten. Sie sind selbsterklärend und setzen keinerlei technisches Verständnis voraus.

Für den Webdesigner bedeutet dies eine enorme Zeitersparnis. Im Unterschied zum traditionellen Layout kann er nun in früher Phase bereits Änderungen ohne großen Aufwand vornehmen. Er kann auch viel leichter unterschiedliche Entwürfe einer Webseite anfertigen. Auf Kundenseite sorgt die Anschaulichkeit der Wireframes dafür, dass Entscheidungen bezüglich des Layouts und Designs sicherer und schneller getroffen werden. Aufwändige Fehlplanungen werden vermieden und sparen nicht nur Planungs- und Abstimmungszeit, sondern auch hohe Kosten ein.

Sicherheit für den Webdesigner

Für den Webdesigner bedeutet dies auch, dass er viel häufiger Abstimmungen mit dem Auftraggeber vornehmen kann. Damit ist das Risiko, in eine falsche Richtung zu planen, fast ausgeschlossen. Der Planungsprozess geht zudem sehr viel schneller in einen konkreten Layoutprozess über. Projekte können so in kürzerer Zeit abgewickelt und fertiggestellt werden.

Nachteile

Einen einzigen Nachteil haben Wireframes: Aufgrund der Darstellung innerhalb eines Planungsgitters wird man häufig dazu verleitet, in Kästchen zu denken. Für die Grundstruktur und den Entwurf einer Webseite ist dies absolut notwendig. Danach aber muss man wiederum den Blick auf das Ganze lenken und die einzelnen Bereiche zu einer optischen und inhaltlichen Einheit führen.

Kunden haben zudem die Eigenschaft, sich bei Wireframes häufig mit Kleinigkeiten aufzuhalten, die den Planungsprozess verzögerrn. Dies ist aber auch bei dem klassischen Layout der Fall und insofern kein Argument, das gegen Wireframes spricht. Wer einmal mit Wireframes gearbeitet hat, egal, ob als Webdesigner oder auf Kundenseite, wird sie nicht mehr missen wollen.