Framer, Origami – Prototyping mobile applications with the best UX design tool

For website and even more for mobile, the purpose of all the application’s creation is to create a compelling user experience but this is wishful thinking ! The true difficulty remains to build a better UI prototyping workflow. Making Wireframe is OK but especially for mobile application, the ideal will be to bring Wireframe to life like a kind of doctor “wireframestein”, to flesh them out and iterate on them like it is wisely advise by the agile method.

Making a prototype enable to reach a common comprehension before you go down the path of writing code.

In mobile application, the area of prototyping is in between motion design and visual programming.

A prototype allows you to change dynamically all the characteristics of the UI/UX and allows you to iterate quickly and to narrow in on fields that you are targeting.

One good advice when you are creating prototype is to focus on specific interaction not designing the all project. Designing the all project is to yield to the temptation of being exhaustive, you fall into the trap of rebuilding the entire application and at least nobody will understand what is the purpose of everything. Just focus on animation that are a kind of unique and set aside all the traditional animations, focus on what is going to be new in your application.

Few examples made with Framer

Here is some screen captures from the websites and a little POC without using the editor provided by Framer.
It is all made in JavaScript without using the coffeescript that is the native language used by the Framer editor

You can find the file on GitHub @ https://github.com/bflaven/BlogArticlesExamples

Example writer-slideshow.framer from http://projects.framerjs.com/

Example superhero-material.framer from http://www.prototypingwithframer.com/material-design-with-framer/

Example example_home_made.framer

The framer editor, edition of the writer-slideshow.framer project

Conclusion : To fully leverage on Framer, you have to intensively learn the framework and the learning curb is important unless you know already javascript or coffeescript. The advantage of using the framework directly without the help of the framer’s is not so obvious.

Few examples made with Origami

First of all, the software is free and made by FaceBook so there is great deal of chance that Origami will not disappeared in the coming weeks. Always good to know that before you make the effort of learning, the soft is backed by a prosperous company that will remain alive in the coming years.

By the way, Flash from adobe is officially dead today, but some of us has a made a leaving for 20 years with this software, maybe Origami can give you some fat-cow years

The origami philosophy has taken many concepts from a tool name Quartz Composer. In Quartz Composer, you are wiring patches, you do this kind of things in Origami, in very intuitive manner. The purpose is to bring up a prototype that we can tweak and iterate on.

There are many implicit principles that are built-in for instance in Origami such as built-in skin for iPhone, Android and Windows. Automatically any of your creation will output to the correct phone dimensions for Android, iOS or even Window phone

Build a prototype with Origami