Wireframing ist eine Methode zur Erstellung von Layout-Rastern und Navigationskonzepten für Websites. Gutes Design soll ein Unternehmen perfekt repräsentieren und dem User eine intuitive Benutzeroberfläche bieten. Dafür schafft Wireframing eine übersichtliche Struktur und ein starkes Gerüst, auf dem Design aufbauen kann.
Vorwort: Was sollte geklärt sein bevor es mit Wireframing losgeht?
Bevor man mit Wireframing wirklich erfolgreich starten kann, folgt zuerst eine Konzeptionsphase. Grundlegend muss natürlich bekannt sein welche Inhalte die Website transportieren und wer mit ihr erreicht werden soll. Dabei kann die Definition der Zielgruppe z.B. mit Personas herausgearbeitet werden.
Die Navigationsstruktur sollte bereits feststehen. Auch hierbei ist das Arbeiten mit Personas und Userjourneys eine große Hilfe. Eine gute Navigation ermöglicht dem User eine intuitive Bedienbarkeit, indem sie den Aufbau der Website übersichtlich und logisch gliedert.
Gegebenenfalls gibt es schon weitere Vorgaben für das Projekt und das Unternehmen hat bereits ein Corporate Design. Möglicherweise gibt es bereits Bild- und Textvorgaben. Ist das nicht der Fall, müssen sie entwickelt werden.
Diese Punkte sollten geklärt sein, bevor man mit dem Wireframing beginnt. Für den Planungsprozess ist es von Vorteil, wenn von Anfang an so viele Informationen wie möglich zur Verfügung stehen.
Mit schnellen Skizzen Ideen diskutieren und schematisch definieren
Schnelle Skizzen helfen beim Brainstorming der Informationsstruktur der Website. Mit Hilfe dieser einfachen Zeichnungen kann man Ideen sofort diskutieren.
Im skizzierten Plan, wie im folgenden Beispiel, kann man bereits schematisch die Anordnung der Elemente erkennen. Wenn nun z. B. die Navigation an anderer Stelle platziert werden soll, kann dies anhand mehrerer kleiner Zeichnungen, mit geringem Aufwand ausprobiert werden.
Ein Gestaltungsraster definiert die Basis
Als Basis des Wireframings dient ein Gestaltungsraster, das im späteren Prozess des Screendesigns verfeinert werden kann. Die schematische Ausrichtung anhand des Rasters vereinfacht das Arbeiten – auch für spätere Arbeitsschritte.
Websites sind heute im responsive Design gestaltet, damit sie auf allen Endgeräten perfekt dargestellt werden. Das Verhalten der einzelnen Gestaltungselemente auf unterschiedlichen Geräten muss ebenso berücksichtigt werden, wie das Funktionieren des Rasters selbst.
Hierfür eignet sich ein 12-Spalten-Raster besonders, da es sich sehr gut
in Segmente unterteilen lässt. Es wird auch von Frameworks wie Bootstrap verwendet. Anfangs erstellte verschiedene Versionsvorschläge werden später im Wireframing-Prozess getestet. Dazu überprüft man die wichtigsten Seiten für die unterschiedlichen Gerätegrößen (wie z. B. Desktop, Tablet und Mobile).
Inhalte sollen für Benutzer optimal zu finden sein
Wenn das eigentliche Wireframing beginnt, konnten bereits mehrere Ideen ausprobiert und einige Details festgelegt werden. Nun geht es darum, das Content Inventory und die genaue Aufteilung von Content festzulegen.
Im Falle eines Relaunch gibt es bereits vorhandene Inhalte. Beim Festlegen der Navigationsstruktur macht man sich bereits automatisch Gedanken wie diese platziert werden sollen. Im Content Inventory lassen sich alle bestehenden Texte und Bilder sowie Media Content für die mögliche Weiterverwendung sortieren. Hier kann auch geklärt werden, welche Teile des Content ggf. wegfallen, weil sie veraltet sind und ob neue Inhalte hinzukommen.
Bei der Positionierung des Contents helfen die sogenannten User-Stories. Dabei ist es sinnvoll herauszuarbeiten, welche Seiten und Abläufe in den Wireframes definiert werden sollen. Diese können dann aus Sicht verschiedener Personas betrachtet und anhand der User-Stories reflektiert werden. So wird klar, was der User benötigt und wie er an sein Ziel gelangt.
Wireframing Tools
Welche Tools für Wireframing genutzt werden, ist letztendlich eine Geschmacksfrage. Für uns hat es sich gezeigt, dass wir sehr zügig mit Stift und Papier arbeiten können. Andere beliebte Tools sind z. B. Balsamic und Axure. Und natürlich kann man im Entwicklungsprozess unterschiedlich weit mit Wireframes auf Papier arbeiten, um dann mit anderen Tools weiterzuarbeiten. Interessante Ansichten und Erfahrungsberichte zum Thema Wireframes und Responsive Webdesign finden sich auch in unserem Blog-Artikel.
Für das Wireframing verwenden wir schlicht Stift und Papier, und bearbeiten bei Bedarf die entstandenen Skizzen auch mit Photoshop weiter. Der Vorteil ist, dass man mit einem leeren Blatt Papier startet und so von Anfang an vollkommen uneingeschränkt ist. Ein Nachteil ist, dass Änderungen immer wieder von Hand vorgenommen werden müssen und Schreibfehler entstehen können. Das ist jedoch Teil des Prozesses und kann genauso mit anderen Tools passieren. Ein großer Vorteil beim Arbeiten mit Stift und Papier: Es besteht jederzeit die Möglichkeit, mit einer neuen Skizze schnell etwas auszuprobieren. Die so entstandenen einzelnen Wireframes kann und sollte man immer wieder zusammen
betrachten und überprüfen.
Wireframing definiert, wo Content platziert werden soll und arbeitet deshalb nach Möglichkeit bereits mit echten Headlines. Dazu gibt es ein in unserem Blog einen Artikel wie man Blindtext-Fonts in Wireframing verwenden kann.
Abläufe definieren und verdeutlichen
Einzelne Funktionsdetails lassen sich durch Wireframes überprüfen. Unabhängig davon ob Nutzer über einen Desktop oder von einem mobilen Gerät aus eine Website besuchen, sollte diese immer schlüssig funktionieren. Dazu werden Inhalte gerätespezifisch angepasst. Beim Zugriff via Smartphone könnte z. B. die direkte telefonische Kontaktmöglichkeit im Vordergrund stehen.
Wenn alle Elemente ihren Platz gefunden haben, folgt der nächste Schritt – das Screendesign.
Mehr zum Thema Web Design findet ihr auch auf der Pagemachine Homepage.
Feedback? Sehr gerne!
Hat euch dieses Thema gut gefallen, könnt ihr unseren Beitrag gerne teilen. Vielen Dank dafür!
Arbeitet ihr selbst mit Wireframes und habt eigene Erfahrungen dazu, freuen wir uns über einen Kommentar.
Weitere Informationen zu unserer Konzeptionphase gibt es auf unserer Pagemachine Website.
Weitere Artikel zum Thema Wireframing und Responsive Design:
Blindtext-Fonts: Eine Methode für die Gestaltung von Text für agiles Wireframing, Design und Prototyping
Vorteile von Responsive Design kurz und knapp aufgelistet:
5 Gründe warum Responsive Design ein SEO-Killerfeature ist
Erfahrungs Ausstausch in TYPO3 Camp Mallorca 2014 zum Thema Wireframes:
TYPO3Camp Mallorca 2014: “New Responsive Concepts”
Ausdruckbare Papiere zum wireframen:
inspirationhut.net/printable-paper
Unser erfahrenes Team steht Ihnen gerne bei der Entwicklung Ihrer Website zur Seite – von der Konzeption über das Design bis zur Codierung. Erfahren Sie mehr über unsere Dienstleistungen: https://www.pagemachine.de/pagemachine/ueber-uns
Kontaktieren Sie gerne uns unter info@pagemachine.de .