Wireframing

Stand: 21.07.2022

Das Wireframing bezeichnet die Visualisierung von grundlegenden Elementen und Konzepten bei der Erstellung und Gestaltung von Webseiten. Mithilfe eines Wireframes (deutsch: Drahtgerüst) können einzelne Teile der Informationsarchitektur, der Navigation und der Benutzerführung visuell dargestellt und evaluiert werden. Dabei liegt der Fokus innerhalb des Wireframing eindeutig auf dem Layout der Website, der Art und Gestaltung des Contents und der Steuerung von Webseitenbesuchern mithilfe von Links, Bild- und Textelementen oder Formularen. Die Wireframes lassen sich sowohl manuell als auch mithilfe spezifischer Tools entwickeln.

Ziele des Wireframings

Im Rahmen des Wireframings können Webseitenbetreiber die gesamte Webseitenstruktur in abstrahierter Form abbilden und so die Beziehungen und Wechselwirkungen zwischen einzelnen Elementen der Webseite analysieren und bewerten, ohne von Farben, Fonts und tatsächlichem Content irritiert zu werden. Während Mockups bereits Bilder, Grafiken, Farben und Fonts beinhalten, werden diese Komponenten in einem Wireframe von ihrer konkreten grafischen Darstellung abstrahiert.

Mithilfe des Wireframings können Webseitenbetreiber die Gestaltung und Anordnung von Elementen, welche die direkte Interaktion zwischen Webseitenbesucher und Webseite maßgeblich beeinflussen, untersuchen und evaluieren. Darüber hinaus wird mithilfe von Wireframes definiert, welche Funktionen und Funktionalitäten den einzelnen Webseitenelementen zugeschrieben werden, um die Interaktion mit der Webseite zu steigern und eine möglichst hohe Usability der Webseite zu erreichen. Ausgehend vom User Centered Design wird dabei ein starker Fokus auf die Informationsstruktur und die Customer Journey gelegt. Um eine Webseite im Rahmen des Wireframings fundiert hinsichtlich ihrer Benutzerführung und Struktur bewerten und evaluieren zu können, sollte zunächst der Zweck der Webseite ausgehend von Geschäftsmodell und Zielsetzung definiert werden.

Vorgehen und Funktionsweise

Bei der Erstellung von Wireframes wird in der Regel ein Fokus auf die folgenden Bereiche gelegt: Das Designkonzept und das Layout, die einzelnen Webseitenelemente, die verschiedenen Arten und Beschaffenheiten des Contents und die Benutzerführung. Die Entwicklung und Definition eines umfassenden Layouts mitsamt allen grundlegenden Webseitenelementen wie Header, Body und Footer, Links und Formulare oder Text- und Bildelemente, welche die Beschaffenheit der einzelnen Inhalte und die Beeinflussung und Steuerung der Customer Journey berücksichtigt, dient der späteren Verknüpfung des grundlegenden Konzepts mit der finalen visuellen Gestaltung.

Im Rahmen des Wireframing werden Inhalte abstrahiert, um die Informationsstruktur und die Proportionen hinsichtlich des Aufbaus der Webseite fundierter und ohne irritierende gestalterische Inhalte bewerten zu können: Text wird in der Regel als Lorem Ipsum eingefügt und Bilder und Grafiken werden schematisch durch Boxen oder Kästchen angedeutet. Auch die Verknüpfung der einzelnen Webseitenelemente hinsichtlich der Benutzerführung wird durch die Abstraktion der Inhalte erleichtert: Webseitenbetreiber bekommen einen fundierten Eindruck darüber, wie und in welchem Maße Webseitenbesucher mit der Seite interagieren und welche Nutzungsintentionen dabei vorliegen.

Wireframes stellen keine absoluten und starren Konzeptionen dar, sondern bilden vielmehr dynamische Diskussionsgrundlagen. Webmaster und Webseitenbetreiber erhalten einen ersten visuellen Eindruck von der späteren finalen Webseite und können fundierte Entscheidungen bezüglich der Proportionen und Anordnung von Webseitenelementen treffen. Anschließend lassen sich auf Grundlage des Wireframes Mockups und Prototypen erstellen. Darüber hinaus können durch eine erste Visualisierung der grundlegenden Konzepte bisherige Zielsetzungen und Intentionen kritisch hinsichtlich ihrer Relevanz und Umsetzung rezipiert und eine stetige Weiterentwicklung und Verbesserung dieser Konzepte erreicht werden.

Arten von Wireframes

Wireframes lassen sich hinsichtlich ihrer Detailliertheit unterscheiden. Dabei wird grundlegend zwischen High- und Low-Fidelity-Wireframes differenziert.

High-Fidelity-Wireframes zeichnen sich durch eine stärker visuelle und weniger abstrahierte Darstellung der Webseitenelemente aus. Webseitenbetreiber und Webmaster bekommen mithilfe von High-Fidelity-Wireframes einen detaillierteren Eindruck in die spätere Gestaltung der Webseite. Aufgrund der stärkeren Einbettung von Details ist die Erstellung von High-Fidelity-Wireframes weitaus aufwendiger.

Low-Fidelity-Wireframes hingegen setzen auf eine starke Abstraktion von Elementen und Webseiteninhalten und orientieren sich stärker am Gedanken einer dynamischen Diskussionsgrundlage als an einem detailliierten Entwurf einer Webseite. Low-Fidelity-Wireframes lassen sich gewissermaßen als ersten grundständigen Schritt im Gestaltungsprozess betrachten, auf dessen Grundlage sowohl High-Fidelity-Wireframes entwickelt und Mockups und Prototypen erstellt werden können.

Bedeutung für das Online Marketing

Die Entwicklung von Wireframes unterstützt den fundierten und reflektierten Entwicklungsprozess einer finalen Webseite maßgeblich. Durch ein Wireframe als Diskussionsgrundlage lassen sich die Vorstellungen und Wünsche des Auftraggebers mit den technischen Umsetzungsmöglichkeiten und Rahmenbedingungen harmonisieren. Darüber hinaus lässt sich die Konzeption der finalen Webseite Schritt für Schritt nachvollziehen, sodass Fehlerquellen beseitigt und Änderungen und Optimierungen weit vor der Veröffentlichung der Webseite vorgenommen werden können. Darüber hinaus setzt das Wireframing einen eindeutigen Fokus auf die Usability der Webseite für den Webseitenbesucher und die kontrollierte Benutzerführung, welche beispielweise die Erreichung unternehmerischer Ziele gewährleistet.

Arne Chananewitz

Head of Search Engine
Optimization (SEO)

Sie interessieren sich für das Thema "Wireframing"

Löwenstark bietet als Full-Service-Marketing-Agentur umfassende Beratung und professionelle Leistungen. Lassen Sie sich von Arne Chananewitz kostenfrei beraten.

Jetzt Kontakt aufnehmen