Wireframes: Was ich als Starter beachten sollte

Matze Fenn, den 1. August 2022

Wireframing auf Papier — Am Anfang genügt selbst ein Schreibblock. Die Erstellung von Wireframes durchläuft mehrere Phasen, weshalb nicht zwangsläufig von Anfang an Software zum Einsatz kommen muss. Bild: CC0

Ein Wireframe, also ein „Drahtrahmen“, ist ein wichtiges Tool aus dem Methodenbaukasten des Webdesigns. Er dient als Bindeglied zwischen Konzeption und Realisierung, welches sowohl auf die inhaltliche und strukturelle Logik als auch auf Designentscheidungen abzielt. Deshalb kommen Wireframes zum Einsatz, noch bevor sich der Webdesigner mit technischen und grafischen Details befasst. Obwohl sich das „Drahtkastenmodell“ einer Website auch ganz einfach per Hand skizzieren lässt, bieten diverse Softwarelösungen zusätzliche Features und mehr Komfort. In diesem Leitfaden haben wir die wichtigsten Punkte für die erfolgreiche Anwendung von Wireframes zusammengetragen.

Wireframes als Grundgerüst des Webdesigns

Kaum jemandem, der sich mit modernem Webdesign befasst, dürfte der Begriff „Wireframe“ noch nicht über den Weg gelaufen sein. Doch worum handelt es sich dabei? Kurz gesagt: Wireframes stellen das Grundgerüst des späteren Entwurfs für eine Website dar. Im Fokus stehen dabei die Anordnung und Hierarchisierung der inhaltlichen Elemente. Wireframes visualisieren das Konzept und schaffen so einen ersten Eindruck von der Seite. Welche Bilder, Farben und Formen später integriert werden, spielt hier jedoch noch keine Rolle. Stattdessen geht es zuerst einmal nur um die Struktur. Es mag vor allem für Designer ein ungewöhnlicher Denkansatz sein, aber durch die Abwesenheit grafischer Elemente bekommt man schnell eine Vorstellung davon, ob der geplante Aufbau für den Nutzer überhaupt Sinn ergibt. Das betrifft im Besonderen die Navigation. Im Wireframe-Entwurf ist sofort sichtbar, ob die innere Strukturlogik nachvollziehbar und intuitiv genug ist.

Wireframes bieten viele Vorteile

Die Erstellung eines Grundgerüsts per Wireframe bietet demnach klare Vorteile gegenüber einer direkten Umsetzung des schriftlichen Konzepts oder einer Designidee. Um welche es sich dabei handelt, wird im Folgenden genauer erläutert:

Fehlplanung schon früh korrigieren: Die ersten Ideen zum Aufbau einer Website sind oft noch abstrakt und ungenau. Durch die konkrete Visualisierung wird schnell klar, ob die Struktur und Führung des Users gut oder verbesserungswürdig sind. Die Erstellung des Wireframes verringert die Gefahr einer fehlerhaften Konzeption.
Prüfung auf Gebrauchstauglichkeit: In Bezug auf den ersten Punkt ergibt sich auch die Möglichkeit, unterschiedliche Szenarien durchzuspielen, um herauszufinden, auf welche Art Nutzer später mit der fertigen Website interagieren können. Die User-Journey lässt sich so schnell optimieren.
Weniger Korrekturschleifen: Es behindert den gesamten Arbeitsablauf, wenn in der Phase der Realisierung noch konzeptionelle Fragen geklärt werden müssen. Wireframes sind eine einfache Möglichkeit, diesen zeitraubenden Stolperfallen aus dem Weg zu gehen.

Inspiration bei anderen Designern holen

Da es jedoch kein Patentrezept für die genaue Herangehensweise beim Erstellen von Wireframe-Entwürfen gibt, sollten sich Anfänger zuerst an Prozessabläufen anderer Webdesigner halten. Für den ersten Überblick, wie ein Wireframe aussehen kann, hilft zum Beispiel die Bildersuche über Pinterest oder eine vergleichbare Seite. Ein weiterer Geheimtipp ist der Blog I Love Wireframes auf Tumblr. Zu Anfang sollten Sie genau beobachten, wie andere Designer ihre Wireframes aufbauen und wie man einen Wireframe „liest“ (also welche Platzhalter für welche Elemente genutzt werden).

Die richtige Herangehensweise wählen

Da es beim Webdesign möglichst vermieden wird statische Prozesse, wie eine Checkliste abzuarbeiten, gibt auch beim Einbinden des Wireframings in den Gesamtprozess unterschiedliche Herangehensweisen. Übliche Abläufe sind beispielsweise:

1. Rohentwurf, 2. Wireframe, 3. Grafik/Code
1. Wireframe, 2. Detaillierter Wireframe, 3. Grafik/Code

Welche Reihenfolge Sinn ergibt, liegt auch daran, mit welcher Ausgangsbasis Sie es zu tun haben. Existiert bereits eine erste Skizze, dann kann auf dieser Grundlage mit dem Wireframing begonnen werden. Ist noch gar nichts vorhanden, starten Sie direkt mit dem Wireframing. Ein weiterer Faktor ist der eigene Workflow. Müsste dieser für einen bestimmten Prozess komplett auf den Kopf gestellt werden, eignet sich eine andere Vorgehensweise vermutlich besser, um sicher ans Ziel zu kommen.

Whiteboard, Papier oder Software?

Wireframes dienen der Verdeutlichung einer Idee und möglicher Probleme bei der Umsetzung. Aus gutem Grund verzichten Wireframes daher auf Farben, Grafiken und alle andere Elemente, die ablenken könnten. Dieser Logik folgend sollte der Entwurf am besten auch möglichst frei von jeder Ablenkung zu Papier gebracht werden. Manche Webdesigner nehmen das wörtlich und nutzen ausschließlich Whiteboards oder Zeichenblöcke. Doch es gibt digitale Alternativen, die ein bisschen mehr Komfort bieten, ohne durch unnötige Funktionen vom entworfenen Grundgerüst abzulenken. Software-Tools wie Balsamiq, Flairbuilder oder Axure werden gern genutzt. Alternativ tut es aber auch die gängigen Grafikprogramme aus der Adobe-Suite-Familie.

Aufbau des Wireframes

Für welches Medium und Tool Sie sich auch entscheiden: Der Aufbau eines Wireframes läuft immer nach demselben Prinzip ab. Am Anfang lohnt es sich, die Seite in verschiedene Bereiche einzuteilen. Hierfür sollten Sie mindestens Kopf-, Fuß-, und Seitenzeile definieren. Anschließend können die jeweiligen Elemente, die in einem Bereich Platz finden sollen, mit einer Box platziert werden. Sie dürfen dann also Platzhalter für die Navigation, Bilder, Textbereiche, Buttons, etc. einzeichnen. Bei der Arbeit mit einer Software lässt sich unkompliziert herumexperimentieren, sodass am Ende verschiedene Positionierungen zur Auswahl stehen können. Dabei gilt es jedoch immer die Hierarchisierung zu beachten. Je wichtiger etwas ist, desto höher sollte es auf der Seite stehen. In einem letzten Schritt muss die Funktionalität einbezogen werden. Gruppieren Sie in dieser Phase alle Elemente, die in der Interaktion zusammenspielen müssen.

Mit Graustufen und Details für Übersicht sorgen

Vor allem bei der Gruppierung und Priorisierung hilft der Einsatz von verschiedenen Graustufen. Auf diesem Weg lassen sich Elemente hervorheben, ohne, dass auf Farben zurückgegriffen werden muss. Dieser letzte Schritt ist jedoch erst als Vorstufe zur Umsetzung nötig und sollte daher immer ans Ende des Wireframings stehen. Eine Alternative zur Nutzung von Graustufen ist die Ausarbeitung mit zusätzlichen Details. Sie können an diesem Punkt bereits mit Fülltext und verschiedenen Font-Größen arbeiten. Selbst Logos in Graustufen sind erlaubt.