Was sind Wireframes?
Wireframes sind wie Skizzen Handzeichnungen oder gitterartige, simple Darstellungen eines geplanten Web-Projektes. Ein Wireframe bildet das Grundgerüst und visualisiert die Platzierung von Text, Grafik und Navigationselementen einer Website. In der Konzeptionsphase dienen Wireframes der anschaulichen und verständlichen Darstellung gegenüber Auftraggebern einer Online-Entwicklung vor der eigentlichen technischen Umsetzung. Bei Bedarf lassen sich ebenso verbundene Strukturen, Prozesse und Interaktionen mit abbilden.
Wireframes zur Webentwicklung nutzen
In der Webentwicklung dienen Wireframes als Spezifikation vorab erstellter Page-Flow-Diagramme als Detailspezifikation. In der Praxis dienen Wireframes – der Begriff Wireframe leitet sich dabei vom englischen “Wire” also Draht ab – der modellhaften Skizze einer Website. Mit einem Wireframe wird eine Webseite mitsamt der enthaltenden Komponenten – wie Inhaltscontainern und Call2Actions – modelliert.
Mit dem Wireframe in den Entwicklungsprozess starten
Einsatz finden Wireframe während der Konzeptionsphase also bereits früh im Entwicklungsprozess einer Webseite. Ein gutes Wireframe modelliert jeden einzelnen Seitentyp im Detail, also beispielsweise eine Produktdetailseite, die Kategorieseite die Auswahl eines Themenbereichs und bildet mit jedem Modell die Elemente skizzenhaft ab die dieser Seitentyp später verwendet. Ein guter Webdesigner nutzt Wireframes um bestimmte Komponenten – wie Suchboxen, Registrierfunktionen, Kontaktformulare und Call2Actions – auf einer Webseite stets an derselben Stelle zu platzieren. Der Page-Flow des Wireframe konkretisiert mit der Zuweisung spezifischer Funktionen von einzelnen Seitenelementen die Usability einer Website, Änderungen lassen sich in diesem Stadium – gerade bei komplexen Websites – kostengünstig realisieren.
Wireframes für die Conversion-Optimierung
Der Vereinheitlichung von Webseiten kommt für die Conversion-Optimierung und um ein optimales Nutzererlebnis zu bieten eine sehr große Bedeutung zu. Bei drastischen Abweichungen hinsichtlich der Platzierung wichtiger Seitenelemente verhält sich die Webseite nicht konform zu den grundlegenden Erwartungen des Anwenders. Nicht selten führt dies dazu dass Kunden einen Online-Kauf abbrechen oder eine Webseite vorzeitig verlassen. Wireframes lassen sich komfortabel mit spezialisierten Softwarelösungen erstellen, die neben der graphischen Modellierung auch die Erstellung von Klick-Prototypen unterstützen, empfehlenswert sind Axure oder Mybalsamiq.
Wireframes als dynamische Klick-Prototypen
Unabhängig davon, ob Wireframes statisch in Form von Dokumenten oder als dynamischer Klick-Prototyp erstellt werden, hat diese Spezifikations-Methode folgende Vorteile:
- die Struktur und den Aufbau von Webseiten zu vereinheitlichen
- ähnliche Elemente und Inhalte zu identifizieren und zu gruppieren
- “Freiräume” in Form von White space einplanen, um die Webseite nicht mit Inhalt zu überfrachten
- Optimierung der Usability von Webseiten
- Kostenreduktion bei der Umsetzung komplexer Websites
Sie wünschen eine professionelle Umsetzung Ihrer Website oder planen einen Relaunch? Sprechen Sie uns an: Jetzt unverbindlich anfragen!