Wie bei einem Hausbauprojekt, bei dem kein Stein ohne den Grundriss gelegt wird, muss auch bei der Entwicklung digitaler Anwendungen ein Bauplan erstellt werden, der stetig angepasst, optimiert und diskutiert werden kann.
Anhand eines Wireframes werden noch vor der gestalterischen und technischen Umsetzung einer digitalen Anwendung (z. B. Website) Funktionen, Inhalte oder User-Verhalten abgestimmt und diskutiert.
Was ist ein Wireframe?
Das Wort Wireframe bedeutet übersetzt so viel wie „Drahtgerüst“. Wireframes sind demnach nur auf die nötigsten Elemente begrenzte Layouts (Pläne) einer Website oder digitalen Anwendung. In einem Wireframe werden keine Farben, Bilder, Grafiken oder finalen Texte verwendet. Grundsätzlich geht es beim Wireframing nicht um das Design, sondern um die Struktur und Logik der Anwendung.
Wireframes bilden die Basis für das darauffolgende Screendesign und dienen als funktionelle Vorlage für die Programmierung.
In welcher Projektphase kommen Wireframes zum Einsatz?
Im Rahmen eines digitalen Projektes, hier am Beispiel eines Website-Relaunches, werden Wireframes während der Konzeptionsphase, also vor der Erstellung des sogenannten Screendesigns, erstellt. Dabei spielt die Größe des Projektes eine untergeordnete Rolle. Bereits bei kleinen Web-Projekten kann es hilfreich sein, mit einem Wireframe zu starten und die erste Struktur der Website zu zeigen.
Gründe, mit Wireframes zu arbeiten
1. Überblick
Wireframes vermitteln bereits am Anfang eines Projektes ein Gefühl für das spätere digitale Produkt. Funktionalität, Struktur und Usability stehen zunächst im Fokus.
2. Frühzeitige Abstimmung
Struktur und Funktionalitäten können frühzeitig mit dem Kunden abgestimmt und finalisiert werden.
3. Erklärung von Content-Modulen
Bestimmte Content-Module die nicht jedem Kunden geläufig sind, wie z. B Slider, Newsfeeds, Lightboxen, Dropdowns etc., können gezeigt, erklärt und abgestimmt werden.
4. Mobile Anpassungen
Das mobile Verhalten der Anwendung kann schon vor der Fertigstellung vermittelt werden.
5. Vorarbeit für das Screendesign
Ein gutes Wireframe ist die ideale Basis für das anschließende Screendesign. Zusätzliche Mehraufwände durch Korrektur- und Abstimmungsrunden lassen sich hierdurch reduzieren.
6. Technischer Überblick
Die Entwickler haben frühzeitig ein Bild davon, was sie technisch umsetzen müssen, und können ggf. auch schon vor der Fertigstellung des Designs mit der Umsetzung starten.
7. Genauere Kostenschätzung
Die Kosten- und Aufwandsschätzung durch die Entwickler kann genauer erfolgen.
8. Qualitätssteigerung
Die Qualität der fertigen Website/Anwendung ist deutlich höher, da das Userverhalten genau beleuchtet wurde.
9. Grundlage für Prototypen
Wireframes können ebenfalls als Basis für die Erstellung eines Prototyps/Klick-Dummys genutzt werden. Usertests können so bereits vor der Fertigstellung der Anwendung durchgeführt werden.
10. Parallele Projektarbeit
Der Projektprozess kann teilweise parallel verlaufen. Während des Designprozesses kann die Programmierung z. B. bereits Module entwickeln, so dass Design und Programmierung parallel am Projekt arbeiten können.
Fazit:
Bereits frühzeitig im Projekt können durch ein Wireframe schnell und kostengünstig Abstimmungen zu Benutzeroberfläche und Usability erfolgen. Strukturelle Defizite können schnell erkannt werden und fallen nicht erst im Rahmen der Umsetzung auf.
Bildquelle: Unsplash / Matteo Catanese