Definition und Vorteile

Bei der Entwicklung von Software oder Websites stehen wir immer vor der Frage, was wie und wo dargestellt wird. Welche Informationen werden vermittelt, wie ist die Struktur der Darstellung und wie soll sich ein Anwender durch das Produkt navigieren? All das kann mit Hilfe eines schematischen Entwurfs (Wireframes) definiert werden. Den Prozess der Erstellung eines Wireframes bezeichnet man als Wireframing. Beim Wireframing geht es also darum, ein Gerüst zu entwerfen, das die Informationsarchitektur, die Navigation und Struktur visualisiert.

Teamarbeit und gemeinsame Ziele

Neben der Visualisierung entstehen durch den Einsatz von Wireframes weitere Vorteile. So entsteht im gesamten Team Klarheit über das Konzept und den Aufbau einer Anwendung. Alle Projektbeteiligten – wie Stakeholder, Nutzer, Entwickler und Product Owner – lassen sich so einfach in den Produktdesignprozess einbinden. So wird die Zusammenarbeit unterstützt und lässt alle Beteiligten ein klares Ziel verfolgen.

Flexibilität

Da visuelles Design bei der Erstellung von Wireframes keine Rolle spielt, sind sie mit geringem Aufwand realisierbar. So werden Iteration in kurzer Zeit und mit geringem Einsatz von Ressourcen möglich. Das ist ein wesentlicher Grund für die Erstellung von Wireframes. So können wir in einer frühen Phase das Feedback von Nutzern berücksichtigen sowie Probleme finden und lösen, bevor die Zeit in UI-Design und Entwicklung investiert wird.

Arten von Wireframes

Low-Fidelity-Wireframes

Unter Low-Fidelity-Wireframes werden einfache Entwürfe verstanden, also Zeichnungen mit Stift auf Papier. Jedoch sollten die Projektinvolvierten aufgrund des geringen Detailgrads eine Menge Abstraktionsvermögen mitbringen.

High-Fidelity-Wireframes

High-Fidelity-Wireframes stehen für eine ausgereifte, optisch und technisch detailierte Ausführung, die die Elemente, das Verhalten der Inhalte und mögliche Aktionen gut erkennbar macht. Einzelne Elemente lassen sich in dieser Wireframe-Variante deutlich besser differenzieren, gleichzeitig ist die Erstellung von solchen Wireframes aufwendiger. Im Vordergrund steht hier ein besseres Verständnis für das geplante Bedienkonzept.

Um den Nutzen von Wireframes richtig nutzen zu können, muss bei visuellen Elementen Folgendes beachtet werden:

• Die Wireframes sind typografisch und visuell neutral gehalten, um zu vermeiden, dass der Betrachter vom rein funktionalen Charakter abgelenkt wird.

• Fotos, Abbildungen oder Grafiken werden durch Platzhalter symbolisiert, solange sie keinen fachlichen Inhalt wiedergeben.

Tools

Wireframes können mit verschiedenen Tools erstellt werden. Wichtig ist dabei, dass eine schnelle Arbeitsweise unterstützt wird. Für Profis, die sich sehr gut mit Designprogrammen auskennen, lohnt es sich, Wireframes in z.B. Sketch, Figma oder Adobe XD zu erstellen. Einfacher lassen sich Tools wie Omnigraffie, Balsamiq oder Marvel einsetzen. Und manchmal reicht auch ein handgezeichnetes Scribble aus.

Wireframes dienen als Brücke zwischen der Ideenfindung, nutzerzentrierter Evaluation und Umsetzung. Beim Wireframing können Entwickler sich bereits Gedanken über die Realisierung machen, während parallel dazu detaillierte Bedienoberflächen ausgestaltet werden können. Product Owner haben die ersten Ergebnisse in der Hand und können diese mit anderen Projektbeteiligten evaluieren.