Create a quick prototype of a mobile application.
At Habré already present a number of articles on the process of prototyping in software development. There are enough 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 - in the form of a single article in 2010 , and a couple of words in the article Developing mobile applications: where to start .
I would like to correct this situation and offer you a large overview of the available tools for prototyping mobile applications.
Prototyping is the creation of a model, model of the 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 an application is being developed for a third-party order, the client can also be shown a prototype so that he can control and make adjustments to his application.
The prototype has a wonderful property to eliminate misunderstandings between different specialists (manager, manager, designer, programmer, client) involved in the project, structure thoughts and prevent mistakes and doing extra work in the early stages of development. You can test a future application using a focus group, this will help you get useful information from future users.
')
In the rhythm of today's life with a rather 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 first and most favorite design tool is paper and any writing instrument (pencil, pen, markers). It allows you to distribute the structure of the application and make the first sketches of the interface as quickly as possible.
You can draw on the board, wall, paper. However, this method has several disadvantages:
Of course, you can take a picture of all the pieces of paper and send them, for example, by mail or Skype, but you can hardly manage without explanations anyway.
This is a notebook lined with layouts of phones of different platforms. It has a dot grid on the "screen".
You can print an analogue of the sketchpad yourself from templates: habrahabr.ru/post/152075
this is the same sketchpad, only without reference to the platform. On it you can draw absolutely any application.
It must be a convenient thing, but it was not possible to find them in Russia.
www.uistencils.com/collections/frontpage/products/iphone-stencil-kit
In the Russian stores are also absent, but you can order from the company for the manufacture of seals, or make yourself out of a piece of rubber, if your hands are straight enough. Unfortunately, ink is a pretty brand thing, so it's better not to try to save money and buy or print a sketchpad.
www.cultofmac.com/224355/iphone-stamp-for-ui-sketching
On this with an overview of the "paper" tools we finish, and move on to the most interesting:
Keynotopia
keynotopia.com
Allows you to quickly create layouts using the template database, add links to buttons, comment and share with colleagues to test the results of prototyping. The application is paid, the cost depends on your requests.
Pop
popapp.in
A tool for those who like to draw with hands. Draw, download an application on iPhone, take pictures, create a storyboard, test and share with colleagues. Everything is very simple.
Ratchet
maker.imtqy.com/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 you can’t do without HTML, CSS and JS skills.
Proto.io
proto.io
SaaS prototyping solution. We liked the service very much, but the free package includes a very meager set of functions, so it is practically useless. For really working tool will have to pay at least $ 24.
Codiqa
codiqa.com
Another cloud solution. The same monetization model as in proto.io. Someone this service may seem more convenient.
Mockingbird
gomockingbird.com
The situation is the opposite of Invision: there is a constructor, but it’s not very convenient to demonstrate. Yes, and for mobile development fits poorly.
Lumzy
www.lumzy.com
Last century. Under smartphones, too, can not create anything.
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 the 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 the iPhone and iPad.
Appgyver
www.appgyver.com
You can choose from Android, iPhone and iPad templates. Test here you can only application logic without design, since the work is done with ready-made sketches of applications. In the free status, you can test the service with 3 screenshots. An application can be installed on a mobile device, with the help of 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 is not as elegant as the others, but it allows you to independently assemble a prototype in the constructor, fill in ready-made layouts, add links between application pages, send the resulting layout to your friends and colleagues, and test it on your 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 is even boring.
Mockingbot
www.mockingbot.com
Another very good tool that contains all the necessary functions, but, unfortunately, only supports the iPhone.
Prototypr
prototypr.com
Software exclusively for owners of apple devices. It is very easy to use - just drag the necessary elements onto the layout and with one keystroke we look at the result on the phone.
Balsamiq Mockups for Desktop
www.balsamiq.com
You can create as a simple schematic prototype, and very detailed up to pixel. Drawing style makes a serious tool fun toy.
iMockups for iPad
www.endloop.ca/imockups
Draw prototypes right on your iPad? Easy! For himself and the iPhone, of course. We download the application and get pleasure from 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 the design on the device without programming
Justinmind prototyper
www.justinmind.com
A tool to create interactive prototypes of websites and applications for the iPhone, Android and iPad. It supports many features, including work with gestures (in prototypes you can implement Drag & Drop, etc.). Unfortunately, the free version is limited only to relinking 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. Supported linking between screens, viewing prototypes on the iPhone. Actually, you can only create prototypes for the iPhone, the site only works in Chrome or Safari. Also promise in the future support for the iPad.
Thanks for the tip 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.
More details:
Prototyping in Expression Blend + SketchFlow. Part 1. A bit of history
Prototyping in Expression Blend + SketchFlow. Part 2. Basics
Thanks for the tip Ivnika
App cooker
www.appcooker.com
It offers to create an icon, a simple prototype of the application and, as a killer feature, it offers a built- in pricing assistance tool.
Thanks for the tip Glebcha
Mockabilly
www.mockabilly.com
Ready-made layouts are poured onto the iPhone (only this platform is supported) and tested 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, you should like it, since there are no other restrictions. The fee is charged only for increasing the number of projects.
Liveview
zambetti.com/projects/liveview
An application for remote viewing on the iPhone and iPad of a prototype developed and launched on a Mac.
Tools for creating prototyping a huge amount, here are just some of them. For ourselves, we settled on the following set: a sketchpad for initial prototyping, and a 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 he thanks a lot
I would like to correct this situation and offer you a large overview of the available tools for prototyping mobile applications.
Prototyping is the creation of a model, model of the 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 an application is being developed for a third-party order, the client can also be shown a prototype so that he can control and make adjustments to his application.
The prototype has a wonderful property to eliminate misunderstandings between different specialists (manager, manager, designer, programmer, client) involved in the project, structure thoughts and prevent mistakes and doing extra work in the early stages of development. You can test a future application using a focus group, this will help you get useful information from future users.
')
In the rhythm of today's life with a rather 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 tool for creating fast prototypes.
The first and most favorite design tool is paper and any writing instrument (pencil, pen, markers). It allows you to distribute the structure of the application and make the first sketches of the interface as quickly as possible.
You can draw on the board, wall, paper. However, this method has several disadvantages:
- the handwriting must be legible, so that the whole working group understands it, and in order not to decrypt its own records
- when working remotely, it is inconvenient to demonstrate such a prototype
Of course, you can take a picture of all the pieces of paper and send them, for example, by mail or Skype, but you can hardly manage without explanations anyway.
How to speed up and simplify paper prototyping
Sketchpad (SketchPad, sketchbook, sketchbook)
This is a notebook lined with layouts of phones of different platforms. It has a dot grid on the "screen".
You can print an analogue of the sketchpad yourself from templates: habrahabr.ru/post/152075
UI - notebook
this is the same sketchpad, only without reference to the platform. On it you can draw absolutely any application.
Lekala.
It must be a convenient thing, but it was not possible to find them in Russia.
www.uistencils.com/collections/frontpage/products/iphone-stencil-kit
Stamps
In the Russian stores are also absent, but you can order from the company for the manufacture of seals, or make yourself out of a piece of rubber, if your hands are straight enough. Unfortunately, ink is a pretty brand thing, so it's better not to try to save money and buy or print a sketchpad.
www.cultofmac.com/224355/iphone-stamp-for-ui-sketching
On this with an overview of the "paper" tools we finish, and move on to the most interesting:
Rapid Prototyping Software Solutions
Keynotopia
keynotopia.com
Allows you to quickly create layouts using the template database, add links to buttons, comment and share with colleagues to test the results of prototyping. The application is paid, the cost depends on your requests.
Pop
popapp.in
A tool for those who like to draw with hands. Draw, download an application on iPhone, take pictures, create a storyboard, test and share with colleagues. Everything is very simple.
Ratchet
maker.imtqy.com/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 you can’t do without HTML, CSS and JS skills.
Proto.io
proto.io
SaaS prototyping solution. We liked the service very much, but the free package includes a very meager set of functions, so it is practically useless. For really working tool will have to pay at least $ 24.
Codiqa
codiqa.com
Another cloud solution. The same monetization model as in proto.io. Someone this service may seem more convenient.
Mockingbird
gomockingbird.com
The situation is the opposite of Invision: there is a constructor, but it’s not very convenient to demonstrate. Yes, and for mobile development fits poorly.
Lumzy
www.lumzy.com
Last century. Under smartphones, too, can not create anything.
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 the 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 the iPhone and iPad.
Appgyver
www.appgyver.com
You can choose from Android, iPhone and iPad templates. Test here you can only application logic without design, since the work is done with ready-made sketches of applications. In the free status, you can test the service with 3 screenshots. An application can be installed on a mobile device, with the help of 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 is not as elegant as the others, but it allows you to independently assemble a prototype in the constructor, fill in ready-made layouts, add links between application pages, send the resulting layout to your friends and colleagues, and test it on your 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 is even boring.
Mockingbot
www.mockingbot.com
Another very good tool that contains all the necessary functions, but, unfortunately, only supports the iPhone.
Prototypr
prototypr.com
Software exclusively for owners of apple devices. It is very easy to use - just drag the necessary elements onto the layout and with one keystroke we look at the result on the phone.
Balsamiq Mockups for Desktop
www.balsamiq.com
You can create as a simple schematic prototype, and very detailed up to pixel. Drawing style makes a serious tool fun toy.
iMockups for iPad
www.endloop.ca/imockups
Draw prototypes right on your iPad? Easy! For himself and the iPhone, of course. We download the application and get pleasure from 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 the design on the device without programming
Justinmind prototyper
www.justinmind.com
A tool to create interactive prototypes of websites and applications for the iPhone, Android and iPad. It supports many features, including work with gestures (in prototypes you can implement Drag & Drop, etc.). Unfortunately, the free version is limited only to relinking 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. Supported linking between screens, viewing prototypes on the iPhone. Actually, you can only create prototypes for the iPhone, the site only works in Chrome or Safari. Also promise in the future support for the iPad.
Thanks for the tip 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.
More details:
Prototyping in Expression Blend + SketchFlow. Part 1. A bit of history
Prototyping in Expression Blend + SketchFlow. Part 2. Basics
Thanks for the tip Ivnika
App cooker
www.appcooker.com
It offers to create an icon, a simple prototype of the application and, as a killer feature, it offers a built- in pricing assistance tool.
Thanks for the tip Glebcha
Separate small review deserve the tools that do not allow to make a prototype, but give the opportunity to demonstrate the drawn design on a real device.
Mockabilly
www.mockabilly.com
Ready-made layouts are poured onto the iPhone (only this platform is supported) and tested 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, you should like it, since there are no other restrictions. The fee is charged only for increasing the number of projects.
Liveview
zambetti.com/projects/liveview
An application for remote viewing on the iPhone and iPad of a prototype developed and launched on a Mac.
Conclusion
Tools for creating prototyping a huge amount, here are just some of them. For ourselves, we settled on the following set: a sketchpad for initial prototyping, and a 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 he thanks a lot
Source: https://habr.com/ru/post/189524/
All Articles