Webdesign: Vom Wireframe zum Prototypen

Jedes Webprojekt bringt ganz eigene Anforderungen mit sich. Deshalb ist auch, wenn wir eine Website entwickeln, die Gewichtung einzelner Arbeitsschritte sehr unterschiedlich. Einige Meilensteine begleiten uns jedoch immer wieder und haben sich als absolut sinnvoll erwiesen. 
Wir schauen uns an, wie es mit dem Webdesign weitergeht, wenn die Informationsarchitektur steht und die inhaltlichen Anforderungen ausgearbeitet sind:

Wireframing als Fundament

Wireframes, sprich »Drahtgittermodelle« sind grobe Skizzen, die den Aufbau eines Interfaces demonstrieren. Unabhängig vom späteren visuellen Design setzen wir in diesem Arbeitsschritt erste Entwürfe als Gerüst um und fokussieren uns ausschließlich auf die inhaltliche Struktur. Deshalb sehen Wireframes optisch ziemlich langeilig aus, sind aber so bedeutsam, weil wir hier bereits herauslesen können, ob der Inhalt und die Benutzerführung logisch und schlüssig sind. Ohne viel Mehraufwand lassen sich in diesem Stadium diverse Varianten ausprobieren, die aufgrund ihrer Einfachheit leicht anzupassen sind. Für einen Ersteindruck der Website sind Wireframes eine ideale Basis. Mit wenigen Projektschritten können wir sie im weiteren Prozess als Prototypen zum Leben erwecken.

Mit Sketch erstellte Wireframes

Ob auf Papier skizziert oder in einem Layoutprogramm erstellt – beim Wireframe geht es nicht um Gestaltung sondern um die Inhaltliche Struktur

Prototyping: Der Website ein Gesicht geben!

Wer bereits in Sketch oder Photoshop eine Startseite und einige, wenige Unterseiten entworfen hat, ist von einem voll funktionsfähigen Webseiten-Prototyp nur wenige Klicks entfernt. Mit modernen, browserbasierten Webapplikationen wie InVision lassen sich Wireframes und Layouts im Handumdrehen interaktiv nutzbar machen. Plugins wie Content Generator oder Craft unterstützen dabei, den Prototypen mit beispielhaften Inhalten lebendig zu machen. Wie das funktioniert, werden wir euch bald in einem weiteren Beitrag verraten.
Und wozu? Einen frühen Prototypen zu entwickeln klingt zunächst nach Mehraufwand, der dem Kunden unter Umständen erst schmackhaft gemacht werden will. Mitnichten: Denn jedes digitale Produkt sollte bereits vor seiner Umsetzung auf seine Benutzerfreundlichkeit hin geprüft werden. Zum Beispiel im Rahmen eines Usability-Tests: Werden Testpersonen, die das Projekt nicht kennen, dazu aufgefordert, bestimmte Aktivitäten auf dem Interface durchzuführen, gibt der Prototyp bereits eingehend Aufschluss über die Praxistauglichkeit des Entwurfs. Man bemerke, dass zu diesem Zeitpunkt noch keine einzige Zeile Code geschrieben wurde!
Der Mehrwert von Wireframes und Prototypen ist im Vergleich zur gering investierten Zeit enorm und auf den gesamten Entwicklungsprozess bezogen effektiv und aufschlussreich. Sie geben dem Kunden und den Projektbeteiligten einen realistischen Eindruck vom Endprodukt, Fehler und Irrtümer erkennen wir hierbei frühzeitig und können sie problemlos beseitigen.

Teilen

Bild von SCHUMACHER-Teammitglied Anna Hagmann

Beitrag verfasst von

Anna Hagmann
Art Director


Gemeinsam Großartiges erreichen

Bild von Michael Schumacher

Michael Schumacher 06151 49300-31

Jetzt kostenlose Erstberatung vereinbaren!

30 Minuten
Gespräch

Vereinbaren Sie jetzt ein unverbindliches Erstgespräch, in dem wir gemeinsam herausfinden, welche die beste Lösung für Sie und Ihr Unternehmen ist – und, ob wir zusammen passen.

Erstgespräch vereinbaren

Oder kontaktieren Sie uns