• Apps
Andreas Hecht 27. Februar 2015

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

Kein Beitragsbild

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

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.

Klicke auf den unteren Button, um den Inhalt von Vimeo nachzuladen.
Inhalt laden

PGlmcmFtZSBzcmM9Imh0dHBzOi8vcGxheWVyLnZpbWVvLmNvbS92aWRlby8xMjA0NTIyNzgiIHdpZHRoPSI1MDAiIGhlaWdodD0iMzEzIiBmcmFtZWJvcmRlcj0iMCIgdGl0bGU9IlNrZXRjaCArIE9yaWdhbWkiIHdlYmtpdGFsbG93ZnVsbHNjcmVlbiBtb3phbGxvd2Z1bGxzY3JlZW4gYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==

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

Klicke auf den unteren Button, um den Inhalt von Vimeo nachzuladen.
Inhalt laden

PGlmcmFtZSBzcmM9Imh0dHBzOi8vcGxheWVyLnZpbWVvLmNvbS92aWRlby8xMjAzNDkxNDciIHdpZHRoPSI1MDAiIGhlaWdodD0iMzEzIiBmcmFtZWJvcmRlcj0iMCIgdGl0bGU9IkludHJvZHVjdGlvbiB0byBPcmlnYW1pIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW4gbW96YWxsb3dmdWxsc2NyZWVuIGFsbG93ZnVsbHNjcmVlbj48L2lmcmFtZT4=

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

Klicke auf den unteren Button, um den Inhalt von Vimeo nachzuladen.
Inhalt laden

PGlmcmFtZSBzcmM9Imh0dHBzOi8vcGxheWVyLnZpbWVvLmNvbS92aWRlby8xMjAzNTQ1MzYiIHdpZHRoPSI1MDAiIGhlaWdodD0iMzEzIiBmcmFtZWJvcmRlcj0iMCIgdGl0bGU9IlJvb21zIFBhcnQgMTogQ29sbGFwc2libGUgTmF2aWdhdGlvbiBCYXIiIHdlYmtpdGFsbG93ZnVsbHNjcmVlbiBtb3phbGxvd2Z1bGxzY3JlZW4gYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==

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

Klicke auf den unteren Button, um den Inhalt von Vimeo nachzuladen.
Inhalt laden

PGlmcmFtZSBzcmM9Imh0dHBzOi8vcGxheWVyLnZpbWVvLmNvbS92aWRlby8xMjA0NDA0MzAiIHdpZHRoPSI1MDAiIGhlaWdodD0iMzEzIiBmcmFtZWJvcmRlcj0iMCIgdGl0bGU9IlJvb21zIFBhcnQgMjogU3dpcGUtYXdheSBOYXZpZ2F0aW9uIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW4gbW96YWxsb3dmdWxsc2NyZWVuIGFsbG93ZnVsbHNjcmVlbj48L2lmcmFtZT4=

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

Klicke auf den unteren Button, um den Inhalt von Vimeo nachzuladen.
Inhalt laden

PGlmcmFtZSBzcmM9Imh0dHBzOi8vcGxheWVyLnZpbWVvLmNvbS92aWRlby8xMjA0NTMzMDUiIHdpZHRoPSI1MDAiIGhlaWdodD0iMzEzIiBmcmFtZWJvcmRlcj0iMCIgdGl0bGU9IlJvb21zIFBhcnQgMzogQ3JlYXRpbmcgYSBOZXcgUG9zdCIgd2Via2l0YWxsb3dmdWxsc2NyZWVuIG1vemFsbG93ZnVsbHNjcmVlbiBhbGxvd2Z1bGxzY3JlZW4+PC9pZnJhbWU+

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

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück