Wireframe-Grundlagen für Anfänger: Eine Agenturperspektive

Auf Wireframing kann bei der Konzeption von Apps, Webseiten und anderen softwarebasierten Projekten, die Benutzerschnittstellen enthalten, nicht mehr verzichtet werden. Es hat sich in vielen Bereichen als Standard durchgesetzt. Doch was genau ist Wireframing eigentlich und warum wird es auch von vielen Agenturen inzwischen stark bevorzugt?

Was ist Wireframing?

5466e6c1c45d1841cd7fa7a134fd4570a398334e845d6Bei der Webentwicklung ist das Wireframing die Darstellung eines frühen Entwurfes der geplanten Webseite. Das Wireframing konzentriert sich dabei auf die Anordnung von Elementen der Webseite und der Benutzerführung. Inhalte und Funktionen spielen dabei keine Rolle. Das Wireframe ist quasi das Gerüst, oder wörtlich das Drahtgestell, einer Webseite. Es gibt dabei einmal das Modell einen statische Wireframe zu verwenden, bei dem eine Art Seitenvorlage erstellt wird, auf dem das Konzept des Seitenlayouts zwar erkennbar ist, aber es sich noch nicht um ein fertiges Design handelt. Die andere Möglichkeit ist ein dynamisches Wireframe zu verwenden, das aus mehreren Seiten besteht und schon Verlinkungen zwischen diesen Seiten enthält. Dabei wird die Navigation auf den Webseiten geplant, welche üblicherweise in einem Navigationsbaum oder einem Flussdiagramm festgeschrieben wird.

Was sind die Vorteile von Wireframing?

Anstelle eines Wireframes kann man auch einen visuellen Dummy, bzw. Prototypen der zu erstellenden Webseite verwenden um erste Konzepte einer neuen Software oder Webseite darzustellen. Bei einem Wireframe ist dabei in erster Linie die Konzeption und Navigation wichtig und nicht das Design. Dadurch ergeben sich folgende Vorteile:

  • – Zeitersparnis: Da keine grafischen Elemente benötigt werden, kann ein Wireframe sehr schnell erstellt werden. So kann man z.B. auch leicht mehrere unterschiedliche Wireframes erstellen und sich nach Ansicht dieser für ein Modell entscheiden.
  • – Klare Vorgaben für Designer: Dadurch, dass die Größe der unterschiedlichen Elemente auf einer Webseite im Wireframe festgelegt ist, kann man Designern und Grafikern genauere Vorgaben zur Grafikerstellung machen.
  • – Klare Kommunikation mit dem Kunden: Der Kunde kann von Anfang an informiert mitreden wie sein Projekt entsteht und einzelne Stadien des Wireframes direkt abnehmen.

Wireframes sind also das perfekte Modell, wenn viele Stakeholder an einem Projekt beteiligt sind und daneben ist aus Agentursicht insbesondere die Kundenbeteiligung von Vorteil. Bei Kritik vom Kunden am Layout kann z.B. auf abgenommene Wireframes verwiesen werden.