Wireframes

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!

 

Ähnliche Einträge

Zum Glossar

Neuer Artikel!