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

App-Tipp: Zwei in Eins – HDR Fotografie mit dem Smartphone

App-Tipp: Zwei in Eins – HDR Fotografie mit dem Smartphone

Wir haben getestet, wie man mit der App Pro HDR mehr Bildqualität bei Smartphone-Fotografie erzielen kann.

03. November 2014 | Kommentar schreiben

Ganz schön bunt: Mit Online-Tools Farbsets erstellen

Ganz schön bunt: Mit Online-Tools Farbsets erstellen

Wir möchten euch 3 hilfreiche Online-Tools vorstellen, mit denen ihr stimmige Farbreihen erstellen könnt.

04. September 2014 | Kommentar schreiben

Aufbereitung von Dokumenten für den optimalen Workflow

Aufbereitung von Dokumenten für den optimalen Workflow

In diesem Blogartikel geht es um die Aufbereitung von Dokumenten für den optimalen Workflow zwischen Auftraggeber und Designagentur.

05. März 2014 | Kommentar schreiben

Schreibe einen Kommentar