# Wireframe

Ein Wireframe zeigt das Layout und die UI-Elemente einer interaktiven Anwendung.

Bewertung

Kosten
Zeitaufwand
Notwendige Expertise
Beispiel eines Wireframe

# 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ändgen 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.

# Hilfsmittel und Templates

  • Papier & Stift, oder
  • digitale Prototyping-Tools, z.B. Balsamiq

# 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.

# Referenzen