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

Typografie DOs & DON’Ts

Typografie DOs & DON’Ts

Wir nehmen Bezug auf das Titelthema der aktuellen PAGE und ergänzen deren Beitrag um unsere Wahrnehmung von Typosünden und geben weitere Tipps.

11. Dezember 2014 | 2 Kommentare

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

Das optimale Briefing für Design- und Kommunikationsagenturen

Das optimale Briefing für Design- und Kommunikationsagenturen

Was ein gutes Briefing ausmacht und warum es entscheidend ist

19. Februar 2014 | 1 Kommentar

Schreibe einen Kommentar

Einwilligung in Verarbeitung personenbezogener Daten: