Prototype: what and why is it needed?

full-view-1024x768 (1)

08 Feb Prototype: what and why is it needed?

The process of creating the prototype – one of the most important steps, preceding the appearance of the design project (product). But the majority of developers and customers do not fully understand the importance of prototyping, and often do not know how to work with it. And so it is not surprising, that the term “prototype” from year to year is cluttered with new definitions. In this article we will talk about what is a prototype, in what forms could be presented, as well as the relevance of the use of each of them.

Thus, prototype – this is a test version of the final result of the project, which will involve before the trial run. It can be presented in various forms, from sketches or illustrations pages of websites to interactive visualization of the GUI. Its main task - to verify the project strength” before take its detailed development

For what is it needed?

-is a kind of rating scale GUI site or application;
-defining level of user experience;
-helps to follow all the stages of development of the project and in a timely manner to modify any of them.

Accepted that prototypes are created only on the finishing stages of the work. But this statement is not entirely true. The sooner you prefer preparing prototypes, the better it will affect the future work. Also, do not forget to test different design elements, even if there is no version of the whole project.


Prototype – is not only the final look of your development. It should represent all the options, that need to be tested. And the only way you will see, there will in the future path of the product to the user.

Kinds of prototypes:

There are three basic kinds of prototype: paper, interactive and HTML.

Prototypes on paper


This kind of prototyping was used long before the advent of the internet. The priority of the paper prototype – use of sketches in all stages of design. As such, they may consist of sketches, which are traced all the details of the interface. Designer at any time can change a prototype, based on the opinion of the customer, and in the future users. The main disadvantages of this kind – lack of direct user involvement in the work of usability.

And although paper prototypes can be used constantly, but often they are relevant only at the beginning of the creation of the product, even when there is no clear concept. In further work on the project it will be seen that the differences between the primary and the final version of the cardinal too, that continue to work to use this form of prototype.

Interactive prototyping


This type is used in web design often. It is the most realistic and allows you to check the operation of the key components of graphic interface in action.

In addition, it created much easier than HTML. Most elementary prototypes can be developed in Power Point, to require more detailed knowledge of specific applications.

The following items can be attributed to shortcomings:

-knowledge of additional programs that will be needed to work on the interactive prototype;

-transform of the prototype design into code that can take extra time. Some of the elements of the site will have to be rebuilt;

Interactive prototype looked more detailed, you need to intelligently approach the selection of the program. And will this simplest form of presentation, or where sophisticated version, up to you.


The third kind, and most difficult, is HTML-prototypes. They are suitable designer who own code at a high level. These prototypes have their merits, but to create them important full technical knowledge.


Pros HTML-prototype:

-prototype, developed in HTML, a good foundation for future programming, and to speed up the project creation process;

-provides freedom to choose the operating system and devices that can be tested prototypes. And users do not need additional software to the site earned;

-ability to save money, since checks HTML-prototypes do not need an individual software. If you are limited financially, but you know a programming language, this species is the most affordable.


-development HTML-prototype requires, as we have said, a good knowledge of the code. And if you are not sure you can handle, it is better to work with a different view, or choose the right software;

-work with HTML, you can lose a direct relationship with the usability, that is not to evaluate your product in terms of design as well as visual simplicity and convenience.

Algorithms creation of prototypes

To date, there has not only true set of rules when working on a prototype. But there are some who prefer the rest of the designers.

Here are the three most commonly used method, which would be appropriate in different cases. A interactive prototype of the low level of visualization – a interactive high level of visualization – programming

This is a simple chain, to which many designers are turning. The prototype low visualization in the form of a small sketch is used at the initial stage of the work, and allows you to check and clickable navigation. A interactive prototype with high visualization – direct prerequisite to an already finished product, so helping to test the site thoroughly. This stage of the work helps to identify possible faults before they do the programming.

Paper prototype – a interactive low-visualization – programming

веб дизайн, юзабилити, U,-дизайн, разработка сайта, прототипы

This method is the most efficient, as it allows to reduce the time to perform development. It is ideal if the project is not yet fully formed. A paper prototype can be used as an intermediate version, for example, if you do not have all the data. A interactive prototype with simple detailing elements will help to check their performance. If you have time and money, you can proceed to more complex layout of the prototype, and then go directly to programming.

HTML programming

If you’re confident enough programming language, the methods set forth above will become a subsidiary. Any of the developed prototypes will be the foundation for the product, or it will result in some improvements. The programming does not cost much, but all the same, and it has its drawbacks, chief among them – the lack of opportunities to creatively implement workload.

No Comments

Post A Comment