What is prototyping | 3 stages on the way to creating visuals

Prototyping is the process of creating a prototype. Before starting work on creating the site, the designer forms the basic concept of the site and plans the layout of elements on the page. The final detailed plan is called the prototype.

How prototyping can help?

1. It is the most important point. The contractor hears the customer and sees his tasks and he understands what, where and why will be located on his functional, beautiful and structured website.

2. Fast (and painless) passage of the stages of coordination.

The clarity and obviousness of specific steps allow going to the next step.

3. Excellent usability indicators.

That is achieved through analysis of user behavioral factors. This also includes a constant focus on target audience and project objectives.

4. Save time.

It will not be necessary to remodel on a large scale if all large-scale things are predefined.

5. Allows the customer to separate the design as an independent part of the work.

The prototyping phase gives the customer a clear understanding of what the design really is. It helps everyone to fully focus on it when all the blocks and structural elements are already thought out. This allows seeing architecture and designing separately and adequately assessing the quality of work for each stage.

Stages of creating the prototyping site

The whole process of prototyping can be divided into 3 stages. It is important to remember that creating a prototype may take 3 days or more.

Stage 1. Company audit and competitor analysis

At this stage, the needs of the company and its features are analyzed, and competitors are analyzed for the visual and textual content of the site. It is also important to think over the unique selling proposition of the company and answer the questions:

- What is the task of the future site?

- What customer needs can it satisfy?

- What tasks can the site solve for the customer?

Stage 2. Site structure development

This stage allows to think through the structure of the site and to make the site navigation convenient for customer. Since a separate layout is created for each page of the site, it is also important to consider the links between sections and navigation methods.

Stage 3. Prototype development

At this stage, the contractor must select the type of new prototype: static or dynamic.

A static prototype is a picture with drawn blocks and text marks.

A dynamic prototype is a complete project that links prototypes of all pages using links.

Next, prototyping begins. Prototype development begins with a profile header, which may contain:

• Company `s logo;
• Contact details;
• Access to personal account and icons for interacting with a specific user – a basket, selected or pending items;
• Site search;
• Menu;
• Feedback form and more.

After the header, it is necessary to design the content part and the sidebar (side column for supporting information).

The content part is the main part of the page. This part may contain:

• Sliders;
• Product cards;
• Block for reviews;
• Banners;
• Articles or promotional blocks for individual pages;
• Text and images;
• Call to action blocks and so on.

The last projected block on the page is the basement of the site. It contains contact information, links to sections and necessary documents, buttons for switching to social networks and more.

If the project consists of several pages, the style should be viewed on each. After making a low prototype, the contractor can begin to design individual elements and the page as a whole.