Create a quick prototype mobile application

At the Habré there are already a number of articles on the prototyping process in software development. There are quite fundamental articles with reviews of standards and calculations, there are articles about device prototyping , there is a cycle of two articles about the process of choosing a tool for prototyping . Unfortunately, the process of creating prototypes of mobile applications is covered very poorly - as a single article in 2010 , and a few words in the article Mobile Application Development: where to start .

I would like to correct this situation, and offer you a great overview of the available tools for prototyping mobile applications.

Prototyping is the creation of a layout, a model of a future application, in order to determine the correctness of the structure of the application, its functionality and, in general, the concept of the application. If the application is developed by a third-party order, a prototype may also be shown to the client so that he can control and make adjustments to his application.

The prototype has the wonderful ability to eliminate misunderstandings between various specialists (manager, manager, designer, programmer, client) involved in the project, structure thoughts and prevent mistakes and perform unnecessary work in the early stages of development. You can test the future application using a focus group, this will help to obtain useful information from future users.

In the rhythm of today's life at a fairly high price of man-hours, it is very important to work quickly and, preferably, without loss of quality. For this, the concept of “rapid prototyping” was introduced. What will help us move from a simple prototype to a fast one? These are developing technologies, the presence of a huge number of services and, of course, their own brains.

The most popular rapid prototype tool.

The first and most favorite tool of designers is paper and any writing instrument (pencil, pen, markers). It allows you to overlay the structure of the application and make the first outline of the interface as quickly as possible.

You can draw on the blackboard, wall, paper. However, this method has several disadvantages:

• handwriting should be legible so that the whole working group understands it, and so that you don’t decrypt your own notes yourself
• when working remotely, it is inconvenient to demonstrate such a prototype

Of course, you can photograph all the pieces of paper and send them, for example, by mail or skype, but it’s unlikely that you can do without explanations.

How to speed up and simplify paper prototyping

Sketchpad (SketchPad, Sketchbook, sketchbook)

This is a notebook lined with models of phones of different platforms. Has a dot grid on the "screen".
You can print the sketchpad analog yourself according to the templates: habrahabr.ru/post/152075

UI - Notepad

this is the same sketchpad, only without being tied to the platform. On it you can draw absolutely any application

Patterns.

It should be a convenient thing, but in Russia they could not be found for sale.
www.uistencils.com/collections/frontpage/products/iphone-stencil-kit

Stamps

In Russian stores, too, are absent, but can be ordered from a stamping company, or made from a piece of rubber yourself, if the hands are straight enough. Unfortunately, ink is a rather easily soiled thing, so it’s better not to try to save and buy or print a sketchpad.
www.cultofmac.com/224355/iphone-stamp-for-ui-sketching



We’ll finish this with an overview of “paper” tools and move on to the most interesting:

Rapid Prototype Software Solutions

Keynotopia
keynotopia.com
Allows you to quickly create layouts using the template base, add button links, comment and share with colleagues to test prototyping results. The application is paid, the cost depends on your requests.

POP
popapp.in
A tool for lovers of hand-drawing. Draw, download the application on the iPhone, take a picture, create a storyboard, test and share with colleagues. Everything is very simple.

RATCHET
maker.github.io/ratchet
habrahabr.ru/post/157819
A prototype is created, as close as possible to the real application. It can be downloaded to a computer or phone, but HTML, CSS and JS skills are indispensable.

Proto.io
proto.io
SaaS prototyping solution. We really liked the service, but the free package includes a very meager set of functions, so it is practically useless. For a really working tool you have to pay at least $ 24.

Codiqa
codiqa.com
Another cloud solution. The same monetization model as in proto.io. This service may seem more convenient to some.

Mockingbird
gomockingbird.com
The situation is the opposite of Invision: there is a constructor, but demonstration is not very convenient. Yes, and for mobile development fits poorly.

Lumzy
www.lumzy.com The
Last Century. Under smartphones, you can’t create anything either.

iPhone Mockup Web App
iphonemockup.lkmc.ch
A distinctive feature is the imitation of the drawing of the application and the phone itself by hand, but this does not justify the lack of the ability to create connections between layouts.

Axure RP
www.axure.com
habrahabr.ru/post/101938
The program is quite functional, it is considered one of the leaders in the market. Suitable for prototyping sites and applications for iPhone and iPad.

AppGyver
www.appgyver.com
You can choose from Android, iPhone, and iPad templates. Here you can only test the application logic without design, since the work is done with ready-made outline applications. In the free status you can test the service with 3 screenshots. It will be possible to install an application on a mobile device with which it is possible to evaluate the result of work.

Fluid Ui
www.fluidui.com
Surprisingly, this service has all the necessary functions. Maybe it’s not as elegant as the others, but it allows you to assemble the prototype in the designer yourself, fill in the ready-made layouts, put down the links between the pages of the application, send the resulting layout for viewing to friends and colleagues and test it on the phone. The service also supports Windows Phone!

MockFlow
www.mockflow.com
It has a desktop application and an online service, which is undoubtedly an advantage, but so simple that it’s even boring.

Mockingbot
www.mockingbot.com
Another very good tool that contains all the necessary functions, but, unfortunately, supports only the iPhone.

Prototypr
prototypr.com
Software exclusively for owners of apple devices. It is very easy to use - just drag and drop the necessary elements onto the layout and with one click of a button we look at the result on the phone.

Balsamiq Mockups for Desktop
www.balsamiq.com
You can create both a simple sketchy prototype and a very detailed one with pixel accuracy. Drawn styling makes a serious instrument a fun toy.

iMockups for iPad
www.endloop.ca/imockups
Draw prototypes directly on the iPad? Easy! For himself and the iPhone, of course. Download the application and enjoy the simplicity and a good result.

Interface 2
interface2.lesscode.co.nz
Creating dynamic prototypes for the iPhone and iPad directly on the devices themselves for only $ 10 each.
Demonstration of design on a device without programming

Justinmind Prototyper
www.justinmind.com
A tool that allows you to create interactive prototypes of sites and applications for iPhone, Android and iPad. It supports many features, including working with gestures (in prototypes you can implement Drag & Drop, etc.). Unfortunately, the free version is limited only by linking between templates and 10 MB of space in the cloud. But there is a trial for 30 days.

Thanks for the tip. Glebcha

Mockko
www.mockko.com
Free on-line prototyping tool. It supports linking between screens, viewing prototypes on the iPhone. Actually, you can only create prototypes for the iPhone, the site works only in Chrome or Safari. They also promise iPad support in the future.

Thanks for the hint n0_quarter

Microsoft Expression Blend
msdn.microsoft.com/en-us/library/windows/apps/jj129478.aspx
Using Blend + SketchFlow, you can create interactive prototypes of applications for any platform.
Read more:
Prototyping in Expression Blend + SketchFlow. Part 1. A little history
Prototyping in Expression Blend + SketchFlow. Part 2. Basics

Thanks for the tip Ivnika

App Cooker
www.appcooker.com
Offers to create an icon, a simple prototype application and, like a killer feature, it offers a built-in tool for helping with pricing .

Thanks for the tip, Glebcha

A separate small review deserves tools that do not allow you to make a prototype at all, but make it possible to demonstrate the drawn design on a real device.

Mockabilly www.mockabilly.com
Pour the
ready-made mock-ups onto the iPhone (only this platform is supported) and test directly on the device itself.

Invision
www.invisionapp.com
Only one project is available for free, but if there is no need to demonstrate more than one project at the same time, then you should like it, because there are no other restrictions. The fee is charged only for an increase in the number of projects.

LiveView
zambetti.com/projects/liveview
An application for remote viewing on the iPhone and iPad prototype developed and launched on Mac.

Conclusion

There are a lot of tools for creating prototyping, only some of them are described here. For ourselves, we settled on the following set: a sketchpad for initial prototyping, and Proto.IO/Fluid UI for creating interactive prototypes.

What do you use?

Most of the article was written by my colleague Alexander Kochevanov ( aimh ), for which many thanks to him