Designagentur Schumacher

entwickelt medienübergreifende Designlösungen für zukunftsorientierte Menschen.

Blog

Webdesign: Vom Wireframe zum Prototypen

Webdesign: Vom Wireframe zum Prototypen

09. Mai 2016 | und
Tags: , , , ,
Kategorie: Tipps & Tutorials, Workflow

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.

DIESE BEITRÄGE KÖNNTEN SIE AUCH INTERESSIEREN

Hokus-Pokus-Photoshop

Hokus-Pokus-Photoshop

Faszinierende neue Funktionen bringt Photoshop in seiner aktuellen Version CS6 mit. Wir haben sie unter die Lupe genommen.

01. August 2013 | Kommentar schreiben

Erfolgreiche Unternehmen beginnen mit dem »Warum«

Erfolgreiche Unternehmen beginnen mit dem »Warum«

Warum sind manche Unternehmen erfolgreicher als andere, obwohl sie »scheinbar« genau gleich sind?

17. März 2015 | Kommentar schreiben

Agentur-Hackathon: Probleme sind zum Hacken da.

Agentur-Hackathon: Probleme sind zum Hacken da.

Kollaboratives Arbeiten und Ideen gemeinsam in der Gruppe testen? Das klingt nach uns. Gesagt. Getan.

19. August 2016 | Kommentar schreiben

Schreibe einen Kommentar