Mit Sketch von Bohemian Coding lassen sich neben UI oder Web Designs auch wunderbar Prototypen für mobile Apps erstellen. Um seinen Designs Leben einzuhauchen, ist Marvel genau der richtige Ansprechpartner. Die einfache Handhabung der Tools und des übersichtlich gestalteten Nutzerbereichs, verringern den Zeitaufwand enorm.

Zu Beginn entseht das Layout in Sketch. Hierfür bieten sich die verschiedene Artboards für die verschiedenen “Kapitel” der mobilen App.

Ich habe mich dabei für eine fiktive App entschieden, mit der man beliebte touristische Ziele auf und um Rügen entdecken kann. Diese Ziele werden von Nutzern eingetragen und könne von anderen Nutzern wiederum favorisiert und kommentiert werden. Jeder Nutzer hat sein eigenes Profil.

Dank des Export Plugins von Marvel, können die Artboards automatisch und ohne große Export-Orgie zu marvelapp.com importiert werden. Der Vorteil des Plugins liegt auch darin, Änderungen am Design schnell und ohne großen Aufwand zu aktualisieren.

Innerhalb weniger Sekunden (je nach Umfang der Artboards) tauchen die Screens im Marvel-Projektornder auf und der Spaß kann beginnen. Um eine logische Reihenfolge im Storyablauf zu haben, sortiere ich die Screens manuell mittels drag and drop . Anschließend ein Klick auf “Edit” und man kann damit beginnen, dem Prototypen Leben einzuhauchen.

Mittels Hotspots werden die Bereiche festgelegt die klickbar, wischbar oder was auch immer sein sollen. Des weiteren wählt mein den Ziel-Screen sowie die Übergangsanimation und fertig ist die Interaktion. Natürlich gibt es inzwischen auch eine Timerfunktion, fixed Header und Footer etc.

Dank der Layerfunktion kann man auch recht einfach Offcanvas Menus darstellen und animieren.

Und so entsteht in wenigen Minuten ein Prototyp, den man zum Beispiel einem Kunden vorstellen oder mit einem Entwickler durchsprechen kann.