Before creating a masterpiece, a designer or an artist makes sketches. The same happens in the world of modern technology. To understand what a site will look like, a simplified version is created – a prototype.

Site prototyping is a process that creates a simple layout of pages with the main blocks. Such work is especially important when developing online stores and other sites, where the structure should be thought over at the stage of creation and not changed dramatically after launch.

What is a prototype

The very concept implies the creation of something as similar to the original as possible, but without a full package of features or characteristics. For sites it means the development of an online site structure, where it will be presented:

• layout of design elements and blocks
• clear website concept
• shows the navigation and its functionality
• presents possible methods of interaction with users

With this mechanism, you can visualize ideas, see how they will look on a real product and make changes to the prototype first, rather than experimenting directly on a working site that is already indexed by search engines.

Prototyping starts with an understanding of the content to be placed in blocks of the future resource. Interface details have no priority at this stage. It is important to understand the structure and content, usability level for future visitors.

The prototype must meet such requests:

• fast creation
• easy access for all process participants (programmers, designers, managers, customers)
• easy change

If all the points are met, it will be easy to work with this site, and the time spent on grinding the main aspects will be used as productively as possible.

If possible, the interaction with the created “example” they can be divided into:

• dynamic – work with navigation, forms, blocks is available (full work with filling).
• static – the view of individual pages is available, without the possibility of navigating through the navigation mechanisms.

Static option, although it does not give a complete picture, but is a budget option compared to a dynamic companion.

Why do you need a prototype?

Creating a preparatory template makes it possible to solve a number of issues that necessarily arise during the development of online resource. At the same time, correction of weak points at the prototyping stage helps to avoid them after launch on production.

Layouting is just necessary in cases if:

• there is no clear understanding of what the site should look like
• there are complex technical tasks that need to be configured on the resource test version
• need to choose from several design options
• visualization and individual development of blocks is important for the project.

In addition, the test option allows you to decide on such issues:

• what tasks the launch of a new online project solves
• what the potential client needs to communicate and by what mechanisms
• what the client will see by visiting the page and how the information is perceived when placed in the planned blocks

A separate advantage of prototype development is that the technical component is developed on a test resource.

What problems of development are solved by the site prototype

Often, the main problems after launch appear in its technical part and in the work of functional elements. To avoid such sad misunderstandings, you can work everything on the resource layout.

It is recommended to set it up on the test version:

• button operation
• clicking links
• calculator functionality
• work and display of personal cabinet
• order processing
• correctness of data transfer from the site to admin panels, etc.

The list of technical tasks may vary, depending on the specifics of the online platform and its functionality.

Services for prototyping on your own

There are a number of modern online resources that allow you to create a prototype on your platform. They differ in a number of features, set of functions and cost. But most importantly, these programs have gained popularity among users. The most popular of them:

Origami Studio

Free application from Facebook. It has a basic set of functions, which is enough to create prototypes of small projects. The software has a group where like-minded people can share their developments, get advice and help each other.

Vectr
Each model is assigned a separate address (url), by which the development can be shared with the customer or employees. There are both mobile and desktop versions. They are synchronized with each other, which makes it possible to work on the project from any device available at the moment.

Proto.io

There is a possibility to “expand” access for several people. At any stage you can test the created layout on your PC or mobile device.

Axure
Online version is not available, only the ability to install the software on your computer. But it has a wide range of features. It is compatible with both MacOS and Windows.

InVision

The possibility of teamwork on the project is open. User-friendly interface, availability of basic necessary blocks for development.