Wireframe

Zweck

Grundgerüst der Anwendung visualisieren

Zeitaufwand

ca. 1-2 PT

Beteiligte

UX Konzepter

Erfahrungsstufe

Fortgeschritten

Zusammenfassung

Ein Wireframe ist eine Art „technische Zeichnung" der Oberfläche, eine schematische Darstellung einer einzelnen Seitenvorlage. Die grundlegenden Elemente der Seite werden in Form, Position und ungefährer Größe bzw. Gewichtung festgehalten. Somit wird ein konzeptionelles Layout erkennbar. Der Fokus liegt auf der vollständigen Darstellung und Anordnung von Elementen, die aber noch nicht gestaltet sein müssen, d.h. es wird keine Farbe eingesetzt, Platzhalter ersetzen Bilder oder ganze Bereiche der Seite. Wireframes geben einen guten Eindruck davon, ob alle nötigen Informationen und Funktionen vorhanden sind, und ob das Layout der Seite stimmig ist. Wireframes eignen sich gut als erste Spezifikation der Oberfläche, die an Entwickler übergeben werden kann.

Ergebnis

Ein Grundgerüst der grafischen Benutzeroberfläche das einen ersten Eindruck der interaktiven Anwendung liefert.

Vorgehen

Aufbauend auf den Nutzungsanforderungen werden die notwendigen UI-Elemente im Anwendungsrahmen platziert. Dabei sollte ein Raster verwendet werden. Es empfiehlt sich vom "Groben zum Feinen" zu arbeiten: zunächst wird festgelegt wo Navigation und Inhaltsbereich in welchem Format platziert werden, bevor diese mit weiteren Details, z.B. Anzahl an Menüeinträgen, Überschriften, Textblöcken, Platzhalter für Bilder, etc. gefüllt werden. Am Ende kann mittels Graustufen das visuelle Gewicht der einzelnen UI-Elemente visualisiert werden.

Einsatzzeitpunkt

Wireframes können aufbauend auf Papierprotoypen erstellt werden. High-Fidelity-Prototypen bauen dann wiederum auf Wireframes auf.

Hilfsmittel und Templates

• Papier & Stift, oder
• digitale Prototyping-Tools, z.B. Balsamiq (opens new window)

Vorteile

Wireframes ermöglichen es mit Kunden und Nutzern fokussierter über die Inhalte der Anwendung zu diskutieren, anstatt über die genaue Ausgestaltung („mir gefällt dieses Blau nicht").

Nachteile

Es kann sehr aufwändig sein, Wireframes über den Verlauf eines Projekts aktuell zu halten.

Wichtige Hinweise

Halte dich bei der Gestaltung von Wireframes und der Platzierung von Elementen an etablierte Gestaltungsmuster (Design Pattern).

Quellen

• Lim, W. (2012) Ein Wireframing-Leitfaden für Einsteiger (opens new window)