2 Tools for Prototyping Mobile Apps

Share this article

“There is an app for that”

Is the quote you’re likely to hear when asking someone for help these days. There is an app for almost anything.

But what about the developers and designers amongst us? Is there an app for that app?

That’s a different story…

Historically, prototyping apps have been a pain for developers and designers. Creating app interfaces with mobile responsive technologies is not efficient and often demands thousands of lines of JavaScript code. Visually depicting touch gestures with wireframe annotations is chaotic and not intuitive. You will end up pitching your app in front of an audience with statements like “imagine if the tool bar swooshes in from the top” while waving your hands like a helicopter, desperately trying to imitate the touch gestures.

I remember having undertaken such presentations in High School, which were great fun, however you probably want to aim a bit higher.

The future is now

Luckily, there are more and more tools which allow you prototyping mobile apps. Below we will have a look at some of them, what their features are, and if it’s the right tool for you to use.

Proto.io

Proto.io has been developing prototyping solutions for several years and recently introduced a new feature which aims to set it apart from similar tools. This feature is the ability to view prototypes for native iOS and Android applications in a realistic way.

You can test your app prototypes on the Proto.io player app for Android and iOS. It’s a handy tool and if it’s used right can improve your pitch when presenting an app.

For normal users this means they can quickly make edits to your prototype and view it as an (almost) proper mobile application. Other prototyping tools would only allow this on a mobile browser, however that User Experience is flawed, due to the browser’s interface getting in the way.

Another thing that makes Proto.io great is the ease of its tools. You don’t have to be a die-hard Photoshop designer to create great prototypes with it. You drag-and-drop different elements onto the screen, add text, images or buttons and link to other screens.

If this sounds too simple to you and want to have full control over the design, you are free to fully customize your prototype. For example, there are tools that allow you to use custom animations for your elements. You start with a blank project or template and build up your way to the final prototype.

Proto.io

If you are new to the service, you will be guided through the creation of your app prototype. Proto.io offers assets from various systems and sets and you can even create animated banners.

Set

The interface is intuitive, and I personally believe it’s a service you learn better by fiddling around, rather than follow any tutorial. Take some time for yourself to explore the interface, and the rest will only be limited by your creativity.

Proto.io has free and a paid premium plans, you can enjoy latter for 15 days when you join and decide if you find the service worthwhile or not. These plans are flexible and they offer a “parking” plan to only host your projects when you don’t need the premium features anymore, or are just taking a break.

Fluid UI

Another alternative for mobile app prototyping is Fluid UI. Like Proto.io it offers support for dynamic mobile app prototypes for Android and iOS. With clients like Google, Samsung, NASA and eBay it offers features which the company hopes will differentiate the service from other competitors.

As of now, the editor offers straightforward workflows and processes, with a very intuitive user experience, letting you drag and drop different elements and mix them up to your likings. It really has a more “unfinished” feel than Proto.io, but this is not a bad thing, as most apps won’t need overdone features at the prototyping stage.

With Fluid UI you can get stuck into creating your screens straight away. You should find it’s tools comfortable pretty quickly as Fluid UI probably has more drag ‘n’ drop than any other prototyping tools.

As with Proto.io there are many different interface elements available for Android, iOS, W8 and many others.

FluidUIPreview
PageSettings

Fluid UI offers various price plans depending on your needs and you can try Fluid UI for free with apps limited to 10 screens amongst other limitations.

Bonus: Ratchet

Aside from these solutions, Syed Fazle Rahman wrote a detailed article about one other alternative you may not have considered, Ratchet.

I won’t go into detail here, butread his article on prototyping in Ratchet if you are interested.

Prototyping the right way yet?

Both Proto.io and Fluid UI use two different approaches in their services, most noticeably in the UX. I personally can’t say that one is better than the other, as both of them use different philosophies and approaches.

Give both of them a try and let me know your thoughts and experiences, as well as any other services you think suit the topic.

Elio QoshiElio Qoshi
View Author

Elio is a open source designer and founder of Ura Design. He coordinates community initiatives at SitePoint as well. Further, as a board member at Open Labs Hackerspace, he promotes free software and open source locally and regionally. Elio founded the Open Design team at Mozilla and is a Creative Lead at Glucosio and Visual Designer at The Tor Project. He co-organizes OSCAL and gives talks as a Mozilla Tech Speaker at various conferences. When he doesn’t write for SitePoint, he scribbles his musings on his personal blog.

app designchriswprototyping
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week