• Apps

Origami: Freies Design-Prototyping für iOS, Android und das Web

Kein Beitragsbild

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er...

Prototyping ist eine wichtige Sache im Entwicklungsprozess einer App. Animationen und Verlinkung aller Ebenen müssen stimmen und ausprobiert werden, bevor der eigentliche Entwicklungsprozess abgewickelt werden kann und die fertige App letztlich in den App-Store hochgeladen wird. Mit Origami ist ein von Facebook entwickeltes Design-Framework am Start, welches das Prototyping von iPhone- und iPad-Apps erleichtern möchte. Origami legt dabei besonderen Wert auf die Integration von Interaktionen und Animationen.

origami-teaser

[Image of iMac by Placeit]

Was ist Origami

Origami ist ein kostenloses Tool für die Gestaltung moderner Benutzerschnittstellen. Es wurde für die schnelle Erstellung von Design-Prototypen mit Animationen und Interaktionen entwickelt, die dann auf dem iPhone oder dem iPad ausgeführt werden können. Die Export-Funktion erlaubt es, den generierten Code zu exportieren und dem Entwickler als Snippet zur Verfügung zu stellen. Origami ist ein Open-Source Animations-Framework, welches Sie die benötigten Animationen der Benutzeroberfläche leichter und zielführender erstellen lassen soll. Das Framework ist eine Entwicklung von Facebook, erblickte erstmalig am 20. Dezember 2013 das Licht und wurde bis heute stetig weiter entwickelt.

Wichtig zu wissen ist, dass Origami nur mit dem Quartz Composer eingesetzt werden kann, also ausschließlich für Mac OS X zur Verfügung steht. Zudem muss man als Apple Developer registriert sein, um es nutzen zu können. Auch wenn Origami letztlich Code für iOS, Android und das Web exportieren kann, ist das Framework nur für Apple-Verwender nutzbar. Will man seine Prototypen ausprobieren, so ist das komfortabel nur mit iOS möglich, denn ausschließlich für diese Plattform steht eine dedizierte App namens Origami Live for iOS zum kostenlosen Download über den iTunes App Store bereit.

origami framework

Gehen wir nun gemeinsam durch einige Funktionen und schauen, was Origami für Sie leisten kann. Weil es immer besser ist, sich anzuschauen, was ein Tool kann, anstatt es nur zu lesen, habe ich am Ende des Beitrags einige Videos zu Origami verlinkt.

Die Homepage: Origami – Design Prototyping Tool

Gestensteuerung

origami-gesten

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €

E-Book Bundle von Andreas Hecht

Origami bietet nach eigenen Angaben die fortschrittlichsten und am einfachsten zu benutzenden Gesten-Bauteile. Es unterstützt Scroll-, Swipe- und Tap-Gesten. Alle Komponenten sollen hierbei sehr leicht zu nutzen und zu integrieren sein.

Die Scroll-Komponente unterstützt freies Scrollen, seitenweises Scrollen oder “Wheel of Fortune”-Scrolling und bietet fortgeschrittene Funktionen zur Erstellung eines Scroll-Bereichs einer App. Der Swipe-Bereich macht es möglich, dass der derzeitige Bildschirm sich mittels Animation nach unten bewegt, um einen neuen Bildschirm; zum Beispiel für Einstellungen; freizugeben. Die dritte Komponente sorgt für “Taps”. Taps meint das Tippen auf den Bildschirm und die damit verbundenen Aktionen. Sie können relativ einfach festlegen, was mit einem Tipp auf den Bildschirm passiert, welche Funktion ein doppelter Tipp auf dem Bildschirm auslöst und was bei einem längeren Pressen eines Fingers auf dem Bildschirm passieren soll.

Die Code-Export Funktion

Origami beherrscht den Code-Export der von Ihnen erstellten Design-Komponenten mit nur einem Klick. Der Code Ihrer erstellten Animationen kann daher einfach als Snippet exportiert werden, damit die Coder sie per Copy und Paste in das Projekt übernehmen können. Origami will hierbei für denselben “Look and Feel” auf allen Plattformen sorgen, das heisst, dass sich die fertige App auf allen Plattformen gleich anfühlen und auch aussehen soll.

Export Code Funktion von Origami

Exportiert werden kann der Code für iOS, Android und das Web. Damit Sie sich über die Qualität des exportierten Codes klar werden können, existiert jeweils ein beispielhafter Code.

Codebeispiele für:  iOS .m | Android .java | Web .js

Sketch und Origami

Origami arbeitet sehr gut mit dem neuen und immer beliebter werden Werkzeug Sketch zusammen, was das Prototyping noch weiter vereinfacht.

Mit Origami können Sie Links zwischen den einzelnen Ebenen im Prototypen und einer Sketch-Datei erstellen. Sobald die einzelnen Ebenen verlinkt sind, reicht eine einfache Tastaturkombination aus, um den Prototypen ohne Unterbrechung zu aktualisieren. Falls Sie ein Photoshop oder Affintity Photo Nutzer sind, so wird es Sie freuen zu hören, dass die Origami-Ebenen auch mit PSD-Dateien verknüpft werden können.

Sketch und Origami: Ein kurzes Video-Tutorial

Dieses kleine Video-Tutorial zeigt Ihnen, wie Sie Ihre Sketch-Datei mit Ihrem Origami-Prototypen verbinden. Nach kurzem Setup sind Sie in der Lage, alle Ebenen mit nur einer Tastaturkombination zu aktualisieren.

Prototyping für Desktop-Anwendungen

website-prototyping-mit-origami

Mit Origami lassen sich nicht nur Prototypen für iPhone- und iPad-Anwendungen erstellen, sondern auch Websites und Web-Anwendungen. Es können Features wie Text-Input, benutzerdefinierte Cursors, FaceTime Kamera und OS X Drag und Drop genutzt und entwickelt werden, die dann jeweils in einem in der Größe anpassbaren Browser-Frame kontrolliert werden können. So ist es Ihnen möglich, responsive Anwendungen für das Web als Prototyp zu erstellen.

Aus Beispielen lernen

Downloadbare Beispiele von Origami Code

Viele andere Design-Frameworks für das App-Prototyping sind ebenfalls hervorragend dokumentiert. Origami jedoch bietet Ihnen nicht nur eine Dokumentation zum Erlernen an, sondern auch noch vier Beispiele von Interaktionen und sieben Beispiele von Interfaces. Diese 11 Beispiele können jeweils als QTZ-Datei heruntergeladen und in das Projekt importiert werden. So können Sie genau sehen, was für eine bestimmte Animation oder einen bestimmten Bereich Ihres Prototyps vonnöten ist. Unter Umständen fällt Ihnen auf diese Art und Weise der Einstieg und das Erlernen des Prototypings mit dem Origami-Framework leichter.

Die Download-Seite mit den Origami Code-Beispielen

Die Origami Tutorials

Diese Videos führen Sie Schritt für Schritt durch die Erstellung von Prototypen mit dem Origami-Design-Framework. Zu jedem Video kann der Beispiel-Code heruntergeladen werden.

Eine Einführung in Origami

Dieses Video vermittelt Ihnen alles, was Sie zum Einstieg in das Prototyping mit Origami benötigen. Am Ende des Videos ist eine Interaktion erstellt worden, mit der Sie mit einem Fingertipp ein Foto heran- und herauszoomen können.

Download des Beispielcodes

Eine faltbare Navigationsleiste erstellen

Es wird eine Interaktion erstellt, bei der sich während des Scrollens die Navigationsleiste ansprechend zusammenfaltet und wieder entfaltet. Sie lernen, wie man eine Ebene scrollbar macht und auf Basis der Scroll-Position animiert.

Beispielcode für die Erstellung einer faltbaren Navigation

Eine Swipe-Away Navigation erstellen

In diesem Video geht es um die Erstellung einer sogenannten “Swipe-Away” Navigation. Mit einem Fingertipp auf ein Element im Feed gleitet von rechts eine vollständige Ansicht des einzelnen Elements herein und kann mit einem Wisch nach rechts wieder aus dem Sichtbereich befördert werden. Besonders News-Apps arbeiten gerne mit diesem Effekt. Sie lernen in diesem Video, wie man Ebenen wischbar macht.

Beispielcode für die Erstellung einer “Swipe-Away” Navigation

Einen neuen Beitrag erstellen

In diesem Video wird der Prototyp komplettiert. Mit dem “Plus-Button” soll sich ein neuer Bereich öffnen, mit dem ein neuer Post dem Feed hinzugefügt werden kann. Sie lernen den Umgang mit dem “Wireless-Patch” und wie man eine konditionelle Logik aufbaut. Auch die Erstellung einer mehrstufigen Animation wird im Video behandelt.

Beispielcode für die Erstellung eines neuen Beitrags

Fazit

Origami ist ein sehr gut dokumentiertes Open-Source-Framework zur Erstellung von Design-Prototypen. Dem Einsteiger in die Materie wird gleich mehrfach unter die Arme gegriffen – mit Code-Beispielen, guten Video-Tutorials und einer umfassenden Dokumentation. Wenn das noch nicht ausreicht, empfiehlt sich ein Beitritt zur entsprechenden Facebook-Community. Die Community kann man dann für Feature-Vorschläge oder Support-Anfragen nutzen.

Links zum Beitrag

(dpe)

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog veröffentlicht er unter anderem nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] ist natürlich auch das Prototypingtool Origami, welches wir bereits im Frühjahr ausführlich vorstellten. Origami ist ein sehr gut dokumentiertes Open-Source-Framework zur Erstellung von […]

wpDiscuz