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

Suitcase Fusion 5 – Teil 1: Tipps für den Überblick im Schriftenuniversum

Suitcase Fusion 5 – Teil 1: Tipps für den Überblick im Schriftenuniversum

Wir geben in zwei Teilen Tipps für die Arbeit mit dem Schriftverwaltungsprogramm Suitcase Fusion 5. Teil 1: Von Symbolleiste bis Vorschau.

23. Juni 2015 | Kommentar schreiben

Tipps & Tricks in Illustrator #2

Tipps & Tricks in Illustrator #2

Die Schumacher Illustrator-Trickkiste: Diese kleinen Kniffe können einem den Arbeitsprozess erheblich vereinfachen.

17. September 2015 | Kommentar schreiben

Farbenfroh arbeiten in Adobe Illustrator

Farbenfroh arbeiten in Adobe Illustrator

Welche Farben passen gut zusammen? – Der Umgang mit Farben in Illustrator näher erklärt.

14. Oktober 2014 | Kommentar schreiben

Schreibe einen Kommentar