Webdesign: Rapid Prototyping mit InVision

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.

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.