fbpx

10. Oktober 2019

Was sind Wireframes und wo werden diese eingesetzt?

Was ist ein Wireframe und wieso ist es sinnvoll im Rahmen eines Webdesigns mit diesem anzufangen? In diesem Blogbeitrag erläutern wir Ihnen den Sinn von Wireframes und welche Vorteile diese in einer (Web-)Designphase mit sich bringen.

Was ist ein Wireframe?

Ein Wireframe versucht das grundlegende Gerüst einer Website mit einfachen Elementen visuell darzustellen. Damit soll die Grundarchitektur einer Website, einschliesslich wichtiger Komponenten wie Kopf- und Fussbereich einer Navigation, Bilder, Videos und Knöpfe, definiert werden.

Der Fokus steht in der Anordnung der visuellen Bausteine und der Informationshierarchie. Dabei werden bei Wireframes auf designspezifische Aspekte wie Farben, Schriftart und andere dekorative Elemente verzichtet. Dadurch können Probleme in der Bedienung und der Benutzerfreundlichkeit der Website besser identifiziert werden.

Um ein Wireframe zu erstellen, benötigen Sie lediglich einen Stift und Papier. Es gibt aber auch eine Reihe von Tools, welche die Erstellung von grösseren und komplexeren Websites mit vorgefertigten Bausteinen um einiges vereinfachen können.

Wireframe Abbildung von InvisionApp


Arten von Wireframes

Der Aufbau der Wireframes kann nach Bedarf unterschiedlich umfangreich gestaltet werden. Daraus ergeben sich unterschiedliche Arten von Wireframes.

Eine Art davon sind die "Low-Fidelity-Wireframes", bei denen die visuelle Darstellung der Elemente einer Website im Fokus liegen. Die Inhaltsbereiche werden hierbei als einfache Blöcke dargestellt und kommentiert. Dadurch sind solche Wireframes relativ schnell zu erstellen, lassen jedoch bei komplexeren Designvorhaben einige Fragen offen.

wireframe lf


Das Gegenstück davon sind die "High-Fidelity-Wireframes", bei denen man viel detaillierter vorgeht. Textbereiche, Links und Überschriften werden beispielsweise in der vorgestellten Grösse bereits in der Wireframe festgehalten. Diese zusätzlichen Details eignen sich vor allem, um komplexe Konzepte und Interaktionen vor der Designumsetzung zu erforschen. High-Fidelity-Wireframes benötigen entsprechend mehr Zeit zum Erstellen, bilden jedoch ein guter Ausgangspunkt für das Design, was letztendlich Zeit in der Designphase sparen kann.

wireframe hf


Vorteile von Wireframes

Viele denken, dass man den Schritt der Wireframes überspringen und dadurch Zeit einsparen kann. Doch der zusätzliche Aufwand lohnt sich, insbesondere für neue, unerprobte Webdesignkonzepte. Deshalb zählen wir Ihnen 5 Vorteile von Wireframes auf.

1 Anpassungen machen

Würden Sie kein Wireframe für Ihr Webdesign erstellen und während der Entwicklungsphase einen Mangel entdecken, würde eine Überarbeitung der angelegten Struktur einen erheblichen Mehraufwand bedeuten. Mit Wireframes werden solche Mängel frühzeitig erkannt und Änderungen am Konzept können einfach und schnell gemacht werden. Dadurch können auch unterschiedliche Ansätze vor der Umsetzung kostengünstig getestet werden.

2 Übersicht der Struktur

Auch wenn Sie bei der Konzeption eines Webdesigns bereits eine klare Vorstellung haben, wie das Endprodukt am Ende aussehen soll, empfiehlt es sich das Grundgerüst des Designs in einem Wireframe darzustellen. Sie erhalten dadurch einen besseren Eindruck wie das Grundgerüst auf einen Nutzer wirkt und was möglicherweise angepasst werden muss.

3 Relevanz der Funktionen

Mit einer Auslegung des Grundgerüsts eines Webdesigns können Sie sich besser auf die Kernfunktionen der Website und die Platzierung davon konzentrieren. Sie erkennen, unter anderem auch durch User-Testing, welche Funktionen für die Benutzer relevant sind und können diese strategischer platzieren.

4 Fokus auf Benutzerfreundlichkeit

Ein wichtiges Ziel des Webdesigns ist es die Benutzerfreundlichkeit zu garantieren und dafür zu sorgen, dass der Benutzer der Website eine positive Erfahrung macht. Eine schwierige und verwirrende Navigation oder eine schlechte Informationshierarchie können das Gegenteil bewirken und so zu einer höheren Bounce-Rate führen. Dadurch schädigen Sie langfristig möglicherweise Ihre Position in den Suchmaschinen.

Anhand von greiffesten Wireframes können Sie die Benutzerfreundlichkeit eines Webdesigns ausgiebig testen, bevor Sie mit der technischen Umsetzung des Designs beginnen.

5 Mobile Responsiveness

Wireframes eignen sich auch gut, um die Anordnung von einzelnen Elemente einer Website auf einem mobilen Endgerät einmal darzulegen. Weil ein Grossteil der Internetnutzer heutzutage über mobile Endgeräte auf Websites zugreift, ist es wichtig diese responsiv zu gestalten. Mit Wireframes haben Sie die Möglichkeit so unterschiedliche Darstellungsformen auf Ihre Benutzerfreundlichkeit zu testen.


Gefahren von Wireframes

Es sollte darauf geachtet werden, dass schlussendlich nicht mehr Zeit in der Erstellung von Wireframes investiert wird, als es wirklich nötig ist. Zwar sollte die Grobstruktur des Designs einmal visualisiert und auf ihre Alltagstauglichkeit geprüft werden, doch kann die Wirkung auf beispielsweise die Benutzerfreundlichkeit des Endprodukts erst wirklich nach dem Design untersucht werden. Weshalb es sich lohnt mehr Zeit für das Design einzuplanen.

Weiter birgt der Einsatz von Wireframes die Gefahr, dass man in der Designphase sich zu stark auf die vorgelegten Wireframes einschränkt. In einer idealen Welt bilden Wireframes optimale Grundlagen für das Design, in der Realität sieht das aber oft anders aus. Folglich macht es Sinn aus strategischen oder technischen Gründen in der Designphase von der vorgelegten Struktur abzuweichen.

Fazit

Wireframes können Ihnen viel Zeit und damit Geld einsparen. Sie können potentielle Mängel frühzeitig erkennen und Änderungen schneller vornehmen.

Unabhängig davon, ob Sie ein neues Webdesign entwerfen oder ein bestehendes umgestalten, erlaubt Ihnen Wireframing die Funktionalität und Benutzerfreundlichkeit eines Webdesigns zu geringen Kosten ausgiebig zu testen, bevor Sie mit der technischen Umsetzung beginnen. Scheuen Sie sich aber nicht davor neue Erkenntnisse gleich in der Designphase zu berücksichtigen.


Haben Sie Fragen zu diesem Thema?

Mit uns Kontakt aufnehmen



Quellenangaben:
In Anlehnung des Beitrags von Intellrocket
Wireframe-Bild 1
Wireframe-Bild 2
Wireframe-Animation




Schreibe einen Kommentar

Bitte achte darauf, alle Felder mit einem Stern (*) auszufüllen. HTML-Code ist nicht erlaubt.

team work2