Das erste (Drahtgitter-)Modell: Wireframing

Sie werden vor allem erstellt, um komplexe Funktionalitäten darzustellen oder die Reihenfolge innerhalb mehrstufiger Prozesse zu erfassen. Hierfür werden auch wieder zunächst einfachere Skizzen erstellt, die dem Grobkonzept entsprechen oder das Grobkonzept wird durch Wireframes erstellt und von dort aus verfeinert. 

Die Genauigkeit reicht dabei von grober Struktur bis hin zu einer vollständigen Abbildung, die so ausführlich kommentiert ist, dass sie als das Lastenheft der Programmierer fungieren können. Anhand der Wireframes können außerdem andere Aufgaben recht genau umrissen werden – nicht nur die Programmierer, auch Screendesigner und Texter können sehr viel besser den Aufwand abschätzen. Und übrigens auch die Gewinnung von Investoren ist einfacher, wenn man nach dem schnellen Pitch sehr konkrete Planungen vorzeigen kann!

Für die konzeptionelle Planung sind Wireframes vor allem wichtig, um Prozesse zu visualisieren und auf ihre Usability zu prüfen und verschiedene Use-Cases und damit verbundene unterschiedliche Nutzungsanforderungen durchspielen. Hilfreich ist es dafür, verschiedene fiktive Nutzercharaktere – Personas (englisch) – zu erstellen, um sich in einen exemplarischen Vertreter der Zielgruppe hineinzuversetzen. Mit diesen Personas wird das Konzept durchgespielt: wer benutzt wann und wo diese App oder Webseite, und was ist des Users Ziel?

Mit den Wireframes geht es dann entweder weiter zum Screendesign oder es wird nur ein Styleguide erstellt, anhand dessen die Programmierer die Seite direkt umsetzen.

Beispiel für das Wireframing eines Feinkonzeptes: einzelne UI-Elemente sind ausführlich dargestellt
Beispiel: Wireframe für ein Feinkonzept