Wireframe

Was ist ein Wireframe?

Ein Wireframe bezeichnet den konzeptionellen Entwurf einer Website, der während der Planungsphase erstellt wird. Er bildet eine Darstellung der wichtigsten Elemente und definiert in erster Linie die Struktur und Benutzerführung der Website. Gestaltungselemente oder einzelne Funktionen bleiben dabei unberücksichtigt. 

Ziele des Wireframing

Das Wireframing erfolgt vor dem grafischen Design und der technischen Umsetzung einer Website und bildet dementsprechend deren Grundlage. Der Entwurf vereint die Vorstellungen des Auftraggebers mit der Expertise des Webdesigners oder Programmierers. Dieser erhält durch den Wireframe eine Übersicht der wesentlichen Kriterien hinsichtlich Layout, Darstellung der Elemente und Funktionen der Website. 

Unterschied zu Mockup & Prototyp 

Während Wireframes lediglich die Struktur und Nutzerinteraktion einer Website darstellen, enthalten Mockups bereits Designelemente wie Bilder, Farben oder Grafiken. Bei Prototypen handelt es sich um Websites, die bereits technisch umgesetzt sind und als Quellcode in HTML und CSS bestehen. Wireframes bilden demnach die Vorstufe von Mockups und Prototypen. 

Inhalte des Wireframes

Bei der Erstellung des Wireframes werden die folgenden Bereiche berücksichtigt:

• Layout und Informationsarchitektur
• Anordnung der grundlegenden Elemente 
• Darstellung verschiedener Arten von Content 
• Benutzerführung 

Arten von Wireframes

Je nach Ausarbeitung von Details werden zwei Arten von Wireframes unterschieden:

Low Fidelity 

Low Fidelity Wireframes, auch statische Wireframes genannt, sind sehr einfache schematische Darstellungen einer Website. Sie geben lediglich die grobe Struktur wieder und bilden die grundlegenden Elemente auf eine stark reduzierte Art und Weise ab. 

High Fidelity

High Fidelity Wireframes, auch dynamische Wireframes genannt, sind umfangreichere Entwürfe einer Website, welche bereits deren Funktionen definieren. In der Regel bestehen dynamische Wireframes aus mehreren Seiten, die interaktiv miteinander verknüpft werden, um die Navigation zu testen. 

Beispiel eines Wireframes

Ein einfacher Wireframe kann beispielsweise folgendermaßen aussehen:

Bedeutung für SEO

Die im Wireframe festgelegte Benutzerführung hat einen wesentlichen Einfluss auf die Usability der finalen Website, welche wiederum die Conversion Rate maßgeblich beeinflusst. Aus diesem Grund gilt es die Struktur und Interaktionsmöglichkeiten im Wireframe so zu definieren, dass eine optimale Benutzerführung gewährleistet wird.