Wenn man ein Webangebot prototypen möchte, kommt man um die Begriffe “Wireframe” und “Layouting” nicht herum. Doch was ist damit überhaupt gemeint? Dies und noch einige weitere Infos zu diesen Themen gebe ich dir in diesem Blogbeitrag.
Was sind Wireframes?
Das Wort Wireframe bedeutet auf Englisch soviel wie “Drahtgerüst”. Du fragst dich jetzt bestimmt, was das mit Websites zu tun hat. Nun, im Zusammenhang mit Webentwicklung, eine ganze Menge. Genauer gesagt steht hinter den meisten professionell erstellten Websites ein Wireframe.
Die Erstellung von Wireframes ist eine Methode, welche während der Design- und Prototyping-Phase des User-centered Design-Prozesses angewendet wird. Bei Wireframes geht es darum, das Layout und die wichtigsten Elemente graphisch, als eine Art “Drahtgerüst”, lediglich mit Hilfe von Linien und Boxen darzustellen. Es geht dabei grundsätzlich um die Frage was überhaupt dargestellt wird und noch nicht darum, wie etwas dargestellt wird. Das tatsächliche visuelle Design wird bei diesem Schritt noch aussen vor gelassen. Wireframes können aus Papierprototypen, aber auch direkt aus Use-Cases, User-Stories oder Szenarien entstehen.
Für die Erstellung von Wireframes gibt es verschiedene Tools. Eine empfehlenswerte und gängige Möglichkeit ist die Verwendung des Prototyping-Tools "Figma".
Was macht ein gutes Wireframe aus?
Bei der Erstellung eines guten Wireframes sind Raster unverzichtbar. Raster sind dazu da, Ordnung zu schaffen und die Harmonie der Elemente untereinander zu garantieren. Weiterhin sind Raster dazu da, Proportionen festzulegen und so Kohärenz innerhalb der Website zu generieren. Dennoch sollen Raster kein autoritäres, strikt festgelegtes System sein, sondern als Hilfestellung dienen. Zu Beginn wird in der Regel ein Floorplan erstellt, welcher die Grundstruktur aufzeigt und auf dessen Basis das Wireframe durch ständige Iteration weiter ausgearbeitet werden kann.
Ein gutes Wireframe ist ausserdem mit Annotationen versehen, welche Erklärungen zu den Verhaltensweisen der einzelnen Elemente liefern. Oftmals sind diese nicht sofort erkennbar, weshalb eine solche Hilfestellung durchaus sinnvoll ist.
In der heutigen Zeit, in welcher die meisten Menschen sowohl ein Smartphone, als auch einen Laptop besitzen, ist ein responsives Design, also ein Design, welches sich dem Display des Endgeräts anpasst, mit einzuplanen. Dies wirkt sich schlussendlich positiv auf die User-Experience der Website aus. Mehr dazu aber später.
Bei wiederkehrenden Problemstellungen im Bereich der Webentwicklung lohnt es sich, sogenannte UX-Patterns zu benutzen, um das Problem nach einem standardisierten Muster lösen zu können. Darin sind auch Wireframes enthalten. Für Designer und Designerinnen entsteht dadurch ein schnellerer Designprozess. Oftmals werden auch ganze UX-Pattern-Libraries angelegt. Ein zusätzlicher Vorteil besteht darin, dass die User mit den Designlösungen bereits vertraut sind, was die Usability der Website steigert.
Wireframes vs. Sketches: Ist das nicht das gleiche?
Du fragst dich nun vielleicht, was der Unterschied zwischen Wireframes und (GUI-)Sketches ist. Schliesslich geht es ja bei beiden Methoden darum, den geplanten Webauftritt zu skizzieren. Der Unterschied liegt dabei im Detaillierungsgrad, wobei der Übergang von Sketches zu Wireframes im Prinzip nahtlos ist. Während Sketches dazu da sind, eine erste Idee des Layouts zu skizzieren und nur die wichtigsten Features und Interaktionsmöglichkeiten anzeigen, geht das Wireframe weiter und zeigt bereits eine fortgeschrittene Darstellung des Layouts, welches als Grundlage für die Entwicklung des Endprodukts benutzt werden kann.
Was versteht man unter Layouting?
Der Begriff Layouting kommt ursprünglich aus dem Printmedienbereich und befasst sich damit, wie der vorhandene Raum auf der Website genutzt wird. Wie du wahrscheinlich bereits richtig erahnt hast, spielen Wireframes in der Konzeption des Layouts eine wichtige Rolle. Bei der Erstellung des geeigneten Layouts gibt es verschiedene Faktoren, welche mit einzubeziehen sind.
Welche Layouts gibt es?
Im Folgenden aufgelistet sind die möglichen Layout-Typen und wie sie sich voneinander unterscheiden:
- Statisches Layout: Fixes Layout, welches nicht an das Endgerät anpassbar ist.
- Liquid/Fluid Layout: Dieses Layout basiert auf starren Gestaltungsrastern, in Kombination mit Media-Queries. Media-Queries erlauben bereits Anpassungen an das Display des Endgeräts.
- Adaptive Layout: Das Adaptive Layout ist sehr ähnlich wie das Liquid/Fluid Layout aufgebaut, der Unterschied liegt dabei in der Art, wie das Display eingeteilt wird.
- Responsive Layout: Das Responsive Layout basiert auf einem flüssigen Gestaltungsraster, im Zusammenhang mit Media-Queries.
Was macht ein gutes Layout aus?
Ein wichtiger Faktor bei der Erstellung des Layouts ist der Fokus des Users. Man möchte ja in der Regel, dass dieser möglichst lange auf der Website bleibt und sich unkompliziert durch den Content bewegen kann. Häufig verwendet wird dabei der sogenannte “goldene Schnitt” (siehe Abbildung unten). Der goldene Schnitt kommt ursprünglich aus der Mathematik, wird aber, im Zusammenhang mit Layouting dazu benutzt, die Wahrnehmbarkeit des Contents bzw. den Fokus des Users zu beschreiben. Anhand dessen soll der Content wahrnehmbar angeordnet werden.
Wie bereits weiter oben angedeutet, ist ein responsives Design stark zu empfehlen. Da heutzutage die meisten Leute mehrere verschiedene Endgeräte mit jeweils unterschiedlichen Displays besitzen und der Markt mittlerweile sehr gross ist, kommt man um ein responsives Design fast nicht mehr drum herum. Es gibt zwar noch einige Websites, welche ein statisches Design vorweisen, jedoch werden diese immer weniger. Ein responsives Layout fördert die User-Experience und erhöht auch die Chance, dass die User länger auf der Website verweilen.