Michael Wallner
Design-Stratege | netzstrategen
Was sind Wireframes?
Digitale Produkte, wie z.B. Apps und Websites benötigen einen Plan. So wie man beim Hausbau auch einen Bauplan benötigt. Diesen Plan skizzieren wir mit sogenannten “Wireframes”. Wireframes sind eine schematische Darstellung für ein digitales Produkt. Hier wird über Platzierung von Elementen, Features, Conversion Bereiche und Navigation der Website entschieden. Es sind Layouts ohne konkrete visuelle Gestaltung, reine Drahtgestelle sozusagen. Zu Beginn eines jeden Projektes steht die Konzeptionsphase, in der es darum geht, Strategien zur Zielerreichung zu entwickeln. Für den Designprozess bedeutet dies die Entwicklung einfacher Layouts, welche im Handumdrehen erstellt sind und wichtige Fragen zum richtigen Zeitpunkt klären.
Wireframe und ausgearbeitetes Screendesign im Vergleich am Beispiel unserer TrackApp.
Es gibt mehrere gute Gründe Wireframes zu verwenden
- Visuelle Darstellung der Seitenarchitektur
Nachdem alle Navigationspunkte in die Sitemap aufgenommen sind, hilft es diese in ein Format zu bringen um Verhältnisse und Abhängigkeiten zu verdeutlichen. Wireframes unterstützen an der Stelle dabei, ein konkretes Gefühl für das spätere digitale Produkt zu entwickeln. Somit haben alle Projektteilnehmer das selbe Bild im Kopf und es entstehen keine Missverständnisse. - Einfache Erklärung von Features
Nicht jeder Kunde versteht sofort worum es geht, wenn Begriffe fallen wie z.B. Slider, Newsfeed, Lightbox, Dropdown, um nur einige davon zu nennen. Wireframes erleichtern das Erklären dieser Elemente. Zur Unterstützung zeigen wir unseren Kunden meist ein interaktives Beispiel aus dem Web, wo diese Elemente bereits implementiert sind. - Fokus auf Funktionalität, Struktur und Usability
In der Konzeptionsphase ist man gezwungen, das digitale Produkt und dessen Funktionalität objektiv und vorausschauend zu betrachten und sich mit den elementaren Dingen wie Nutzerführung, Conversion, Navigation und Platzierung von Elementen zu beschäftigen. Die visuelle Gestaltung wird erst zu einem späteren Zeitpunkt umgesetzt, da sie in diesem Schritt nur unnötig ablenken und die gesamte Aufmerksamkeit absorbieren würde. Die Diskussion soll sich in dieser Phase ausschließlich um Funktionalität und Struktur drehen und noch nicht um Farben, Schriften und das Erscheinungsbild. - Iterativer Gestaltungsprozess
Der funktionale und der gestalterische Teil werden durch Wireframes getrennt. Dadurch wird sichergestellt dass beide Bereiche (Funktionalität, Usability & Layout und Branding & Visual Design) getrennt voneinander behandelt werden. Dies hat zur Folge, dass dem Kunden zu einem frühen Zeitpunkt im Prozess Feedback gegeben werden kann. - Zeitersparnis während des Projekts
Wireframes sparen Zeit auf mehrere Arten: Die Gestaltung kann besser kalkuliert werden. Die Entwickler haben ein klares Bild davon was sie technisch umsetzen müssen. Content zu erstellen ist leichter. Das gesamte Team und der Kunde haben die gleiche Vorstellung, davon wie sich das Produkt verhalten und es funktionieren soll.
Wireframe und ausgearbeitetes Screendesign im Vergleich am Beispiel von PC Games.
