WebWissen: Wireframes

In unserem neuen Format "WebWissen" erklären wir Begriffe aus der digitalen Welt. Wir geben Tipps und erläutern im Detail vermeintlich logische Schlagwörter, damit ein jeder bei Bedarf seine digitalen Wissenslücken schließen kann. Heute: Wireframes

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.

netzstrategen Wireframe TrackApp Homescreen

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.
  • PCGames Wireframes

    Wireframe und ausgearbeitetes Screendesign im Vergleich am Beispiel von PC Games.

  • 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.

Wireframing-Tools

Wir netzstrategen beginnen jedes unserer Designprojekte mit der Ausarbeitung von Wireframes und können mittlerweile auf einige erfolgreiche Projekte zurückschauen. In der Praxis haben sich vorallem zwei Tools bewährt:
OmniGraffle und Adobe Illustrator
Während OmniGraffle ein reines Wireframing-Tool ist, welches schon über vorgefertigte Elemente verfügt, ist Illustrator sehr viel umfangreicher wenn es um die vektorbasierte Grafikerstellung geht. Illustrator bietet designtechnisch mehr Möglichkeiten, ist jedoch auch etwas komplexer in der Handhabung.

Wir geben Ihnen gerne noch mehr Tipps zur Umsetzung von Wireframes und der täglichen Arbeit mit den Tools von Adobe und OmniGraffle. Kontaktieren Sie mich dazu gerne persönlich oder nutzen Sie das Kontaktformular.

P.S. Smashing Magazine hat eine hilfreiche Liste über das 1×1 der Wireframes veröffentlicht. Sehr zu empfehlen! Wenn Sie noch mehr über Wireframes erfahren möchten, finden Sie hier weitere Infos und weitere Tools um Wireframes zu erstellen.

Alle Beiträge von Michael

Unsere meistgelesenen Beiträge

Zwei Jahre Chromebook: Ein Erfahrungsbericht

Google Chromebook
|
Gute 25 Jahre PC-Nutzung - von Anfang an mit Windows. Dann raucht im wahrsten Sinne des Wortes mein teures und gar nicht so altes Lenovo-Notebook ab. Und ich bestelle mir einfach ein Chromebook und bin schneller weg aus der Windows-Welt, als ich es für möglich gehalten hätte. Zwei Jahre ist das nun her - und ich habe zwischendurch immer wieder über meine Erfahrungen mit dem Chromebook berichtet.