Designagentur Schumacher

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

Blog

Webdesign: Rapid Prototyping mit InVision

Webdesign: Rapid Prototyping mit InVision

07. Juni 2016 | und
Tags: , ,
Kategorie: Tipps & Tutorials

Wie macht man aus einem Wireframe einen Prototypen? Darum ging es neulich in unserem Blog. Wie ihr mit dem kollaborativen Online-Tool InVision klickbare Dummies erstellen könnt erklären wir euch heute. Zudem noch ein paar hilfreiche Tipps zu Features, die die Zusammenarbeit mit Kollegen und Kunden erleichtern. 

Vom Layout zum Prototypen. Los geht’s!

Ihr habt bereits Layouts in Sketch oder Photoshop erstellt? Wunderbar. Denn diese Dateien könnt ihr in InVision importieren und anschließend direkt als einzelne Prototyp-Seiten ablegen. Hier definieren wir klickbare Felder um eine Navigation zu simulieren. Der Nutzer kann sich somit ein Bild von geplanten Navigationsprinzipien und den zu Grunde liegenden Informationsebenen machen. Bereits jetzt können zu lange Wege und unausgewogene Darstellungen entdeckt und nach Wunsch korrigiert werden. Und das Ganze ohne auch nur eine Zeile Code.

invision

InVision iPhone Prototyp

Webdesign tüftelt selten allein: Die kollaborativen Funktionen

Wer am Projekt mitarbeiten soll, dem stellen wir per Einladung einen Link zur Verfügung. Diskussionen, Anmerkungen und Änderungswünsche können die Beteiligten über die Kommentarfunktion kundtun. Die Themen können nach Kategorien geordnet und später als erledigt markiert werden. Schritt für Schritt arbeiten wir uns mit den zur Verfügung stehenden Tools zur Usability des finalen Produkts vor.

Dank der Sync-Funktion werden lokale Sketch- oder Photoshop-Dokumente beim Speichern automatisch mit dem Prototypen in der Cloud synchronisiert. Änderungen stehen damit sofort für alle Beteiligten zur Verfügung. Je nach Bedarf können Updates auch manuell über den Dateiupload in den Prototypen integriert werden. Auf diese Weise werden die anfänglich schmucklosen Wireframes Stück für Stück in das finale visuelle Design umgewandelt.

Für Präsentationszwecke laden wir die Prototypen als PDF oder HTML-Seite herunter, um sie offline weiter zu verwenden. Weitere Features wie LiveShare erlauben das gleichzeitige Telefonieren und Zeichnen, zum Beispiel während alle Beteiligten den Prototyp in einer Konferenz betrachten.

InVision lässt für das bildbasierte Prototyping kaum einen Wunsch offen. Zur Entwicklung von Websites und Apps ist es mit seinen zahlreichen kollaborativen Funktionen eine praktische Plattform zum gemeinsamen und effektiven Arbeiten an Webprojekten.

DIESE BEITRÄGE KÖNNTEN SIE AUCH INTERESSIEREN

Pinselei! Der Tropfenpinsel in Illustrator CS6

Pinselei! Der Tropfenpinsel in Illustrator CS6

Das Grafikprogramm Illustrator CS6 bringt ein spannendes Feature mit: Hier stellen wir das Tropfenpinsel-Werkzeug in einem Tutorial vor.

28. Januar 2014 | 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

Kommt ein Vogel geflogen …

Kommt ein Vogel geflogen …

Hermann Schmidt Verlag bringt Buch über Illustration heraus. Vorfreudig haben wir selbst die Stifte gezückt und einige Vögel illustriert.

22. November 2013 | Kommentar schreiben

Schreibe einen Kommentar