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

Dragdis: Recherche per Drag and Drop

Dragdis: Recherche per Drag and Drop

Bookmarks übersichtlich verwalten und online speichern: Heute möchten wir euch das Recherche-Tool Dragdis vorstellen.

17. November 2015 | 2 Kommentare

Webfonts für ansprechende Typografie im Web

Webfonts für ansprechende Typografie im Web

Die Verwendung von Webfonts im Webdesign ermöglicht die optimale Integration der Website in den Gesamtauftritt des Unternehmens oder der Marke

14. Januar 2014 | 1 Kommentar

Tipps & Tricks in Illustrator #3: Pathfinder – schnell kombiniert.

Tipps & Tricks in Illustrator #3: Pathfinder – schnell kombiniert.

Beim Bearbeiten mehrerer Formen kommt man am Pathfinder nicht vorbei. In diesem Beitrag findet ihr eine kurze Erklärung zu diesem Werkzeug von Illustrator.

23. Januar 2017 | Kommentar schreiben

Schreibe einen Kommentar