Wireframe – Hilfsmittel zur Konzeption Deiner Website

Ein Wireframe bedeutet übersetzt „Drahtgerüst“ und meint den ersten schematischen und konzeptionellen Entwurf einer Webseite. Noch bevor die Webseite gestaltet, gecodet und betextet wird. In der frühen Planungsphase legt der Webdesigner ein solches Gitter über die spätere Webseite, um verschiedene Planquadrate der Seite zu definieren und zu gliedern. Der Wireframe ist also eine visuelle Darstellung der späteren Struktur und Funktion einer Webseite. Diese wird meist in verschiedenen Graustufen dargestellt. Farben würde in dieser Phase nur ablenken.
Bei einem Wireframe wird auf ein grafisch ansprechendes Design verzichtet. Der Fokus liegt auf der Beziehung zwischen den einzelnen Elementen, die später auf einer Webseite zum Einsatz kommen sollen. Zum Beispiel:

Ein Wireframe ist also stark vereinfacht, reduziert und statisch. Trotzdem macht er aber die spätere Struktur der Webseite deutlich. Dabei bezieht er Farben, Bilder, Videos, Schriftarten und den tatsächlichen Content jedoch noch nicht mit ein. Allerdings wird bei einem Wireframe häufig schon ersichtlich, auf welche Areale der Webseite, die Aufmerksamkeit der Kunden gelenkt werden soll. Diese Bereiche werden meist dunkler oder größer dargestellt. Die Visualisierung kann mit Hilfe von HTML und CSS, mit speziellen Software-Tools oder auch nur mit Papier und Bleistift erfolgen. Falls Du allgemein Interesse am Aufbau einer guten Webseite hast und wissen willst was z.b. Website Marketing, Website Traffic, Website Design, Website Performance oder was ein Website Relauch ist dann schau in unseren Blogs nach.

Der Wireframe bildet die Basis für die grundlegende Strukturierung einer Webseite. Bevor die eigentlichen Inhalte und Gestaltungselemente eingepflegt werden. Er bestimmt die Positionierung und die Größe der einzelnen Elemente der Page. Hierbei wird jedoch nicht nur das rohe Layout festgelegt. Durch die Anordnung der Elemente wird auch die zukünftige Interaktion zwischen User und Page simuliert. Hierbei geht es um Logik und Situationen Benutzer die einzelnen Funktionen verwenden können. Neben der Strukturierung dient der Wireframe also auch der Benutzerführung – aber eben nicht dem Design.
Somit ist der Wireframe als Kommunikationsgrundlage zwischen Designer und CEO beziehungsweise auch innerhalb des Entwicklerteams. So können eventuelle Unstimmigkeiten während der Planung ausdiskutiert werden. Wünsche können einbezogen und schnell im Wireframe abgeändert werden.

Dabei ist es jedoch immer wichtig, im Vorfeld das Ziel des Projektes festzulegen und zu bestimmen, welchen Zweck die Website überhaupt verfolgt. Nur so können alle Beteiligten schon im frühen Prozessverlauf hilfreiches Feedback geben.

Wireframes dienen als eine Art Blaupause für den frühen Entwicklungsprozess einer Webseite. Der Auftraggeber oder CEO kann direkt entscheiden, ob der Entwurf seinen Vorstellungen entspricht. Der Designer hat eine Entwurf für das spätere Mockup. Und der Programmierer bekommt ein Listing mit allen wichtigen Elementen, Darstellungen, Formen und Funktionen an die Hand.
Alle beteiligten Personen haben in der Konzeptionsphase eine Grundlage, um über Möglichkeiten, Ziele und Grenzen zu diskutieren.

Dafür weist der Wireframe folgende Bereiche auf:

All diese Funktionsweisen haben schließlich eine Auswirkung auf die zukünftige Informationsstruktur der Webseite. Zwar dient diese als Diskussions-Grundlage zwischen dem Auftraggeber und des Webdesigners, doch die grundlegende Rolle spielt sie letztendlich für die Kunden. So ist die Usability, also die Benutzerfreundlichkeit ein wichtiger Aspekt für die Funktionsweise des Wireframes. Dieser wird so optimiert, dass die Aufnahme von Informationen durch die Strukturierung der Seite unterstützt, gelenkt und vereinfacht wird. Es soll in jedem Falle eine optimale Benutzerführung garantiert werden. Um diese zu gewährleisten und den Erwartungshaltungen Deiner Zielgruppe gerecht zu werden, kannst Du im Vorfeld Usability-Studien, wie Eye Tracking oder Befragungen durchführen.

Wireframes können dabei in ihrer Darstellung und der Vollständigkeit der Ausarbeitung von einzelnen Details variieren. Es gibt zwei grundlegende Arten von Wireframes:

Der Prozess des Wireframings verläuft meist in folgenden Schritten:

Die Erstellung von Website-Wireframes hat unheimlich viele Vorteile. So erleichtern sie in erster Linie natürlich die Arbeit des Web-Designers und sparen ihm viel Zeit. Er kann Änderungen ohne großen Aufwand vornehmen, häufigere Abstimmungen veranlassen und unterschiedliche Entwürfe der Webseite anfertigen, welche wiederum als Diskussions- und Entscheidungsgrundlage dienen. So bekommen auch andere Mitarbeiter im Unternehmen einen guten Einblick, was wo auf der Webseite stehen wird und welche Inhalte miteinander verknüpft werden. Gerade bei komplexen Pages mit vielen Unterseiten kann die weitere Konzeption sonst schnell unübersichtlich werden. Somit ist Wireframing das wichtigste Mittel, um eine Webseite im Vorfeld zu abstrahieren – und das funktioniert sogar ohne technisches Verständnis. Du vermeidest Fehlplanungen, die wiederum Aufwand, Zeit und Kosten bedeuten würden. So können Projekte in kürzerer Zeit und mit weniger Budget abgewickelt werden.

Doch es gibt auch einen Nachteil an der Erstellung eines Wireframes. Nach der Gestaltung des Drahtgerüstes fällt es oft schwer, den Blick wieder auf das große Ganze zu richten – weg von Boxen, Gittern und Kästchen. Die einzelnen Bereiche und Informationen müssen wieder zu einer Einheit zusammengefügt werden, sowohl optisch als auch inhaltlich. Dies fällt Dir aber leichter, wenn Du erste Entwürfe wieder vorskizzierst, den Wireframe zur Seite legst und dabei das „Kästchen-Denken“ mal außer Acht lässt.

Wireframes werden häufig mit Mockups verwechselt. Auch ein Mockup ist der Entwurf einer Seite im Web. Allerdings enthalten Mockups schon visuelle Details, wie Bilder, Grafiken, Farben und Schriftarten – sie folgen also nach der Erstellung von Wireframes, welche vorerst die Struktur der Seite definieren. Mockups verschönern also die Wireframe-Skizze auf visuelle Weise und auch für diese findest du zahlreiche Mockup-Tools im Web.
Sowohl Wireframes als auch Mockups dienen jedoch der Planung und Koordination im Team. Beide werden verwendet, um erste Gestaltungs-Entwürfe einer Webseite zu präsentieren.
Die erste technische Umsetzung der ganz konkreten Website wird schließlich Prototyp genannt. Dieser liegt meist schon als Quellcode in HTML oder CSS vor.

Wireframes verbessern die Qualität einer Webseite und erleichtern die Arbeit an dieser enorm. Durch solche Grundgerüste entsteht ein erster Eindruck von der grafischen Gestaltung, sowie der späteren Bedienbarkeit Deiner Seite.
Du solltest den Wireframe dabei immer als Experiment betrachten. Du kannst ihn immer wieder verschieben, verändern und anpassen. So lange, bis es zu Dir und Deinen Kunden passt. Teste verschiedene Tools und Arbeitsabläufe. Wenn Du so weit bist intuitiv weiterzuarbeiten, dann kannst Du das ganze Team mit einbeziehen. Dabei solltest Du immer wieder verinnerlichen, dass die Webseite auch Deinen festgelegten Zielen entspricht und benutzerfreundlich ist.
Ob Du dabei einen statischen oder dynamischen Wireframe erstellst. Ob Du diesen per Hand oder per Tool gestaltest. Oder ob Du direkt einen Grafik-Designer mit diesen Aufgaben vertraut machst. Das alles liegt dabei ganz bei dir und der Komplexität Deiner Seite.