Sketch ist eine der führenden Lösungen für UX-Designer. Webseiten und Apps lassen sich einfach und doch mit einer Vielzahl an Funktionen umsetzen. Was dem Giganten auf dem Markt aber noch fehlt, ist die Prototyping-Funktionalität. Hier ist die Adobe Konkurrenz mit XD bereits ein Schritt voraus. Doch keine Angst, für Sketch gibt es eine Vielzahl an Prototyping-Erweiterungen. Eine der verbreitetsten ist InVision.
Ein Prototyp mit InVision erstellen
Mit InVision lassen sich Prototypen von Sketch einfach erstellen und beispielsweise mit Kunden teilen. 1 gleichzeitiger Prototyp gibt’s bei InVision gratis. Wenn gleichzeitig mehrere Prototypen laufen sollen, dann bietet InVision mehrere Preisvarianten an: www.invisionapp.com/plans
Ein InVision-Projekt erstellen
Ist man bei InVision angemeldet, dann lässt sich über den Plus-Button auf der rechten Seite einfach ein neues Projekt erstellen. Um die Möglichkeiten aufzuzeigen, erstellen wir ein neues Projekt «Map» und wählen dazu die Desktop-Variante aus, da wir eine Desktop-Applikation machen möchten:
Um die Screens von Sketch zu InVision zu bringen, stehen uns nun zwei Möglichkeiten zur Verfügung:
- Wir können die Sketch-Datei per Drag & Drop ins Browser-Fenster ziehen.
- Wir installieren die InVision-App «Craft», welche auch weitere spannende Möglichkeiten bereit hält und können so die Artboards aus Sketch synchronisieren.
In diesem Beispiel haben wir das Plugin bereits installiert und verwenden dieses. Es bietet auch die Möglichkeit, einen Screen jederzeit zu bearbeiten und erneut zu synchronisieren.
Artboards von Sketch zu InVision synchronisieren
Zurück in Sketch, mit unserem gewünschten Projekt geöffnet, klicken wir in der Craft-Sidebar auf das oberste Icon und erhalten ein Fenster. Hier wählen wir unser InVision-Projekt aus und teilen Craft mit, ob wir alle oder nur die ausgewählten Artboards synchronisieren möchten. Da dies unsere erste Synchronisation ist, wählen wir alle Artboards und beginnen mit der Synchronisation:
Nach einiger Zeit sind alle Artboards synchronisiert und werden sofort bei InVision im Browser angezeigt. Die einzelnen Screens lassen sich nun einfach verschieben und öffnen:
Die einzelnen Artboards verknüpfen
Nun lassen sich die einzelnen Screens in InVision einfach verknüpfen. Zuerst müssen wir dazu in den Bearbeitungs-Modus und dort noch einige Einstellungen vornehmen. Da wir eine Full-Screen-Applikation haben, möchten wir gerne, dass diese sich an die jeweilige Bildschirmgrösse anpasst. Um den seitlichen Scrollbalken wegzukriegen, setzen wir den Hintergrund auf «No image». Nun bestätigen wir, dass diese Änderungen auf alle Screens übernommen werden sollen.
Da wir bereits im Bearbeitungs-Modus sind, können wir nun einfach über den gewünschten klickbaren Bereich ein Feld aufziehen. Wir sagen InVision danach, auf welchen Screen verlinkt werden soll und das wir auf dem neuen Screen auf der gleichen Scroll-Höhe sein möchten, wie bisher. So wirkt der Übergang realistischer, als wenn der Besucher immer wieder neu nach unten scrollen muss.
Nun können die restlichen Screens verlinkt werden. Die geschieht immer nach dem gleichen Prinzip. Wichtig ist dabei, dass wir unsere späteren Tester nicht in eine Sackgasse lenken, von welcher kein Link mehr herausführt.
Zusätzlich zur Verlinkung kann in InVision auch ein fixer Kopf- und Fussbereich definiert werden. Dieser bleibt dann immer sichtbar und scrollt mit:
Ein Prototyp mit InVision freigeben und prüfen lassen
Wir haben unseren Prototypen erstellt, doch dieser kann noch von niemandem bewundert werden. Wenn wir wieder zurück in die Übersicht gehen, können wir dort den Prototypen freigeben. In diesem Fall möchten wir ein Link generieren, welchen wir unserem Kunden zukommen lassen können. Wie in der Vorschau zu sehen, müssen die Bilder manchmal noch geladen werden und erscheinen erst beim erneuten ansteuern sofort. Ansonsten funktioniert unser Prototyp aber tadellos.
Möchte der Kunde nun im Prototyp noch einige Punkte anmerken, kann er dies mit Kommentaren direkt auf dem Screen tun. Wir bekommen dann eine Benachrichtigung per Mail und können darauf Antworten. Ausserdem lässt sich der Kommentar auch als «Erledigt» kennzeichnen.
Sollte nun wirklich die Schrift oder ein anderes Detail angepasst werden, so währe dies mit InVision ohne Weiteres möglich. Dazu gehe ich ins Sketch, bearbeite die Schrift wie gewünscht und synchronisiere nur den betroffenen Screen mit InVision. Dieser wird ab sofort beim Prototypen ersetzt.
Fazit zu InVision
Es gibt noch weitere Prototyping-Tools für Sketch und Co. Jedes hat seine eigenen Schwerpunkte. Mit InVision hatte ich bisher aber sehr gute Erfahrungen gemacht, da es intuitiv und schnell zu bedienen ist. Hier wurden auch bei weitem nicht alle Möglichkeiten von InVision aufgezeigt. Bei mobilen Prototypen z.B., können auch die Übergänge der Screens definiert werden. Des weiteren ist die Möglichkeit, mit dem Kunden über einzelne Punkte direkt zu «diskutieren» sehr angenehm und zielgerichteter als per Mail.
Falls ihr Fragen, Anmerkungen oder eigene Erfahrungen mit InVision habt, würde ich mich über Kommentare sehr freuen.
3 Antworten
Wo kann man Umgang mit InVIsion lernen?
Besten Dank für den interessanten Bericht!
Zurzeit arbeite ich gerade mit Adobe XD an Clickdummys. Dabei habe ich festgestellt, dass dort die Möglichkeit fehlt, einen fixen Kopf- und Fussbereich zu erstellen. Da hat InVision mehr zu bieten. Hoffe, dass Adobe dies bald wie versprochen liefert.
Beste Grüsse
Patrick
Hallo Patrick, ja das stimmt, Adobe XD ist beim Prototyping schnell und intuitiv, jedoch fehlen auch hier wichtige Möglichkeiten. Da sich die Software aber noch im Beta-Stadium befindet, werden solche Rückstände von Adobe sicherlich noch aufgeholt. Bis es soweit ist, wird man mit Sketch und InVision besser bedient sein.