Vom ersten Entwurf bis zur vollständigen Website – Wireframes im Webdesign
Ein Merkmal einer guten Website ist, dass diese im Laufe eines strukturierten Entwicklungsprozesses entstanden ist. Hilfreich ist hierbei ein Konzept, durch welches der Aufbau der zukünftigen Seite grafisch dargestellt werden kann: ein Wireframe. Sowohl für eine Agentur als auch für die Kundin bzw. den Kunden bringt ein solches strukturelles Modell einige Vorteile.
Was sind Wireframes?
Wireframing bezeichnet den schematischen und reduzierten Entwurf einer Website zur Definition und Veranschaulichung aller enthaltenen Elemente. Vereinfacht gesagt ist ein Wireframe die simpelste Art, den Aufbau einer Webpage grafisch darzustellen.
Übersetzen lässt sich ein Wireframe mit „Drahtgerüst“. Der Fokus liegt dabei jedoch nicht auf der visuellen Gestaltung, sondern vielmehr auf der Anordnung der Elemente. Meist sind Wireframes statisch und nicht responsiv. Sie sollen als Grundgerüst für die spätere Website dienen.
Die Färbung bei Wireframes ist in der Regel grau gehalten. Wichtige Bereiche, die mehr Aufmerksamkeit von den Usern erhalten sollen, werden dunkler oder auch größer dargestellt.
Vorteile: Warum sind Wireframes wichtig für den Designprozess?
Mithilfe eines Wireframes sollen Aufbau der Website und inhaltliche Struktur geplant werden. Die vereinfachte Darstellung ohne eine große Ausgestaltung oder die Verwendung von Farben ermöglicht die Konzentration auf das Wesentliche: die Konzeption und damit die Struktur der Seite. So liegt der Fokus auf
- dem Layout,
- dem Navigationsmenü,
- Formularen,
- der Contentart,
- internen Links,
- Textblöcken sowie
- Blöcken für Logos, Grafiken und Bilder.
Diese Elemente werden in Hinblick auf Größe und Positionierung definiert. Wireframes dienen
- der Veranschaulichung des Aufbaus und der Struktur einer Webpage,
- als Vorlage für die grafische Gestaltung und
- der Planung einer sinnvollen Benutzerführung.
Ein Wireframe ist eine gute Basis für die Arbeit im Team einer Agentur. Dadurch, dass man sich auf die Inhalte der Seite konzentriert, lässt sich die Struktur deutlich besser beurteilen. Die Kundenseite wiederum erhält bereits in der sehr frühen Entwicklungsphase einen Einblick und kann zeitnah etwaige Änderungswünsche durchgeben.
Webdesigner:innen können sich durch die Erstellung von Wireframes die Arbeit deutlich erleichtern. Gewünschte Änderungen können schnell übernommen werden und ebenfalls sind regelmäßige Abstimmungen im Team mit unterschiedlichen Entwürfen möglich. So gesehen dient ein Wireframe auch als hilfreiches Kommunikationswerkzeug. Die Konzeption bleibt übersichtlich und Fehlplanungen lassen sich vermeiden.
Aufbau und Inhalte eines Wireframes
Beim Aufbau eines Wireframes sollte man schematisch vorgehen. Entscheidend sind zunächst die Inhalte der Seite, wie etwa Kopf- und Fußzeile, Seitenleiste sowie Inhaltsabschnitte. Zu den entsprechenden Elementen gehören Headlines, Fließtexte, Grafiken, Buttons usw. Auch Blöcke für Kontaktformulare oder Newsbereiche können festgelegt werden.
Im nächsten Schritt geht es um die Anordnung und Hierarchie dieser Inhalte. Dies erfolgt in einem so genannten Grid, einem Raster, in dem die Elemente angeordnet werden und in Form von einzelnen Kästchen oder Boxen platziert werden können.
Um die Gewichtigkeit der einzelnen Elemente zu definieren, hilft die Schattierung in verschiedenen Graustufen. Hiermit lassen sich Akzente setzen, zudem wird die spätere Arbeit im Designprozess erleichtert.
Welche Arten von Wireframes gibt es?
Grundsätzlich lassen sich je nach Grad der Ausgestaltung zwei Arten von Wireframes unterscheiden:
- Low Fidelity Wireframes
- High Fidelity Wireframes
Low Fidelity Wireframes
Ein Low Fidelity Wireframe ist statisch und meist auf eine Seite beschränkt. Es handelt sich um einen ersten Entwurf zur Definition und Anordnung der Elemente, die später auf der Seite zu finden sein sollen.
High Fidelity Wireframes
Der High Fidelity Wireframe geht mehr ins Detail und stellt ein dynamisches, mehrseitiges Modell dar. In der Regel sind hier bereits Links gesetzt. Dennoch bleibt es bei einer vereinfachten Darstellung der Website-Struktur.
Unterscheidung zwischen Wireframe und Prototyp
Prototypen gehen im Designprozess einen Schritt weiter als Wireframes. Sie sind detailreicher und bieten insbesondere für Kund:innen den Vorteil, dass diese sich dank visueller Details das Endresultat der Website bereits ziemlich gut vorstellen können. Typisch sind ausgestaltete Elemente im Contentbereich und auch wird mit Farben, Grafiken und Schriftarten gearbeitet. Ebenso gängig ist ein als Abbildung dargestelltes Navigationsmenü.
Bevor die technische Umsetzung des Designs erfolgt, welche durch die Kundschaft freigegeben wird, kommt es somit zum Entwurf samt Visualisierung sämtlicher wichtiger Funktionen, welche der User später nutzen kann. Hier finden sich detailreiche Animationen und die User Experience wird dank Wisch- oder Klickmöglichkeit realitätsnah simuliert.
Wireframing bei baseplus®
Auch wir setzen auf Wireframes und bieten unseren Kund:innen schon in der frühen Entwicklungsphase dank Anwendung der wichtigsten Wireframe-Tools die Möglichkeit, sich durch die zukünftige Website zu klicken. Benötigen auch Sie Unterstützung bei der Erstellung Ihrer Seite? Setzen Sie auf unser Expertenteam!