We at Usersnap are always looking for new ways and workflows in order to be more productive.
This week our UI / UX designer Benedikt worked on some new design drafts. Instead of using a traditional approach of prototyping we ended up using Facebook Origami.
In this post we are going to share some key takeaways and lessons learned for getting started with Facebook Origami. Check out our Facebook Origami review.
What is Origami?
So you might ask: Origami, what?
Origami is a free design prototyping tool developed by Facebook. Yes. Facebook. Some mighty developers have created this prototyping tool and published it for free & open source.
Origami let you create design workflows on the basis of your design drafts. You can run those prototypes even on your iPhone or iPad.
Why should you use Origami?
You might wonder whether to use Origami or not. Well, there’s no clear answer to that question. But our first trial runs convinced us to integrated it deeper into our workflows.
Because Origami already helped us build better user flows and therefore a better user experience.
With Facebook Origami, you can build sophisticated user interfaces without any development skills needed. And the great thing about it is that you can export code snippets which help your developers work faster and be more efficient when they build the actual application.
Easy to get started.
Learning Origami is easy. Our UI / UX designer Benedikt, who started working with it in the morning, was already able to sketch out some great user workflows for some new product improvements by the end of the work day.
How he got started. There are some great tutorials available.
Better user stories, prototypes and workflows
There are a lot of reasons to start using – yet another – prototyping tool. Especially when working on complex websites or web application, you should design & present in style.
Origami offers a powerful set of tools in order to display user flows.
Scroll, Swipe or tap gestures which are commonly used on mobile devices can easily be set up with Origami.
Making communication between designers & developers easy
We’ve all been there. Designers gonna design and developers gonna code.
Transforming design drafts into interactive websites or apps isn’t that easy. Especially since you have to bridge the world between Photoshop and your developer’s programming editor. This leaves a lot of room for misunderstandings.
Interactive design drafts
If you’ve ever created some first prototypes or design drafts, you’d probably know the situation and how hard it is to express and display interactions and animations.
The real user experiences comes with that interactive prototype. Especially when presenting drafts and prototypes to clients and people who are not so tech savvy, Origami is a true winner. You cannot get a better understanding of the end result with any other traditional design workflow than what you can with Origami.
UX testing while prototyping
Because you’re constantly working on your interactive prototype with the Quartz composer, chances of a better UX understanding are much higher.
You can also instantly look at the user flow and check if it is still the best user experience.
From prototyping to production at no time.
Since Facebook Origami lets you export code snippets, your project steps from prototyping to development will be way more efficient.
Your prototype’s code can go directly into production.
Using Facebook Origami for the first time was quite a joy. It’s easy to learn and projects can be set up super fast. The interface is intuitive and self-explanatory.
With its already published Version 2, Facebook Origami has made a great leap forward and we’re excited to see how our designers and developers will make use of it in the future.
PS: For further reads on Origami, I recommend that you check out this sitepoint article in detail.
This article was brought to you by Usersnap – a visual bug tracking and screenshot tool for every web project.
9 creative ways to ask your website visitors for feedback
You’ve finished some design drafts for a new website. You’ve even shipped those new designs to your website. And now you wonder what people – your website visitors – think about those new changes. In this post, I’m going to show you 9 creative ways to ask your website visitors for feedback which will help you…
How to use Trello for bug tracking & user feedback!
Trello is a great tool for managing all your project-related tasks and staying in sync with colleagues and clients. We at Usersnap are avid fans of Trello. And we even built a Usersnap integration for Trello. So we thought it would be fun to share some of our best tips on how to collect bug…
How emojis are used in bug reports (backed by data)
If you take a look at different web projects or software products, you probably experience bug tracking as the least fun part of every projects. Right? (If not, please let us know in the comments how you get fun out of the bug tracking process) We think that bug tracking should be fun. And because…
6 mistakes to avoid when collecting design feedback
There are several lists on web design mistakes out there. Most of them focus on the web design itself but forget about other components such as how a good design becomes a great design through the right way of collecting feedback. There’s always a feedback stage in the web design process which requires intensive interaction…