Bevor eine Website programmiert und grafisch ausgearbeitet wird, sollten zuerst die wichtigsten Elemente und Funktionen einer Website in einem Grundgerüst dargestellt werden. Dies gelingt mithilfe von Wireframes. Sie sorgen dafür, dass die Website-Struktur vereinfacht abgebildet wird und Änderungen in der Struktur schnell und ohne großen Aufwand umgesetzt werden können.

Mehr als nur graue Kästchen – Ziele des Wireframings

Das Hauptziel von Wireframes besteht, wie bereits erwähnt, zum einen darin, die Struktur sowie die Benutzerführung der Website abzubilden. Zum anderen soll für den Designer ein strukturelles Grundgerüst erstellt werden, auf dem anschließend die grafische Ausgestaltung stattfindet. Dazu werden das Geschäftsmodell sowie die Ziele der Website im Voraus definiert und es ergeben sich daraus all jene Elemente und Funktionen, die für die Wireframes und damit der ersten Darstellung der Website nötig sind. Abgebildet werden diese Elemente in Form von Kästchen, Platzhaltern, Pfeilen und anderen simplen Formen. Stück für Stück entsteht somit ein rohes Layout, das die Interaktion zwischen dem Benutzer und der Website abbildet.

Im Mittelpunkt steht also die Struktur der Website und die Benutzerführung – angepasst an das Geschäftsmodell und die Ziele der Website.

Von der Bleistiftskizze zum digitalen Grundgerüst

Wie bereits erläutert, steht am Anfang die Definition des Geschäftsmodells und der Ziele, die mit der Website erreicht werden sollen. Anhand dieser ergeben sich unterschiedliche Elemente sowie Funktionen, Inhalte, Formulare oder Schnittstellen, die in das Modell eingearbeitet werden.

Die ersten Skizzen entstehen dabei oftmals in Form einer Bleistiftzeichnung oder auf einem Whiteboard. Step by Step werden die nötigen Elemente angeordnet und zueinander in Beziehung gesetzt. Dabei werden gestalterische Elemente wie Farben, Schriftarten oder tatsächlicher Text bewusst nicht in den Entwurf aufgenommen, um nicht vom Wesentlichen abzulenken. Änderungen, wie zum Beispiel die Anordnung der Elemente, können so ohne großen Aufwand vorgenommen und mehrere Layoutvarianten durchgespielt werden.

Anschließend werden die Entwürfe digitalisiert. Auch dabei sind die Entwicklungszyklen noch kurz und es kann problemlos auf Änderungen des Grundgerüsts eingegangen werden, da sowohl mit der Programmierarbeit als auch dem Design noch nicht begonnen wurde.

Obwohl der ein oder andere mit den grauen Kästchen und Skizzen nur wenig anfangen kann, sollte diese Phase dennoch intensiv genutzt werden. Denn durch das Runterbrechen auf das Wichtigste werden essenzielle Funktionen und Elemente sichtbar und Fehlplanungen können in einer frühen Phase vermieden werden.

Sobald also alle Beteiligten mit dem Ergebnis zufrieden sind, kann mit weiteren Schritten wie der Programmierung und dem Screen Design begonnen werden.

Die Vorteile von Wireframes auf einen Blick

• Frühes Einbeziehen der Usability:  Bei der Erstellung der Wireframes werden meist verschiedenste Nutzungsszenarien, auch Use Cases genannt, durchgespielt. Damit werden einerseits die wichtigsten Funktionen für die Interaktion der Nutzer mit der Website erkannt. Andererseits  können bereits in dieser frühen Phase grundlegende Probleme und Stolperfallen während der User Journey ausfindig gemacht und behoben werden.
• Zeitersparnis: Da die Wireframes bereits die Struktur, das rohe Layout und die Benutzerführung darstellen, wird für die weiterführenden Schritte (Programmierung, Design) wesentlich weniger Zeit und Energie benötigt. Schließlich steht bereits das Grundgerüst und dem Ganzen muss „nur noch“ etwas Leben eingehaucht werden. Am Ende zahlt es sich aus, mehr Zeit in die Erstellung der Wireframes zu investieren. Denn wenn während der grafischen Gestaltung gleichzeitig noch die Struktur und das Layout entworfen werden, kostet jede Änderung ein Vielfaches mehr Zeit.
• Fehlplanungen vermeiden: Im Idealfall werden während der Erstellung der Wireframes alle wichtigen Strukturen, Elemente und Abläufe der Benutzerführung abgebildet. Das heißt: dem Risiko von Fehlplanungen wird in einem sehr frühen Stadium entgegengewirkt. Fehler in der Website-Struktur oder bei der Benutzerführung, die erst bei der Programmierung oder nach der grafischen Gestaltung auffallen, benötigen zur Behebung meistens deutlich mehr Zeit und sind unter Umständen auch mit höheren Kosten verbunden.

Obwohl der Einsatz von Wireframes zahlreiche Vorteile mit sich bringt, birgt diese Vorgehensweise auch ein Risiko. Man kann sich auch beim Grundgerüst in der Ausarbeitung von Details verzetteln und somit den Prozess künstlich in die Länge ziehen. Jedoch kann das genauso bei klassischen Design-Layouts passieren, was meist ungleich länger dauert.

Wir von artindustrial verwenden bei unseren Online-Projekten gerne Wireframes, da die Vorteile für den Kunden deutlich überwiegen. Wenn Sie die Realisierung einer neuen Website planen oder einen erfahrenen Partner für Ihr nächstes Online-Projekte suchen, helfen wir Ihnen gerne. Kontaktieren Sie uns einfach!