Prototyping

A logical continuation of the Mind map & Proto-proto.

A prototype is a sequential structure with a schematic representation of the main semantic blocks and functional elements. This is a tool that helps avoid a large number of edits, agree on everything upfront, and significantly save time on project development.

Prototypes can vary in the level of visual detail and the number of interactive elements. It can be a simple sketch on paper or a detailed clickable structure of many pages. When prototyping, our main task is to work out the following:

  • The sequence and architecture of blocks on the page;
  • Functionality and connections between elements;
  • Copywriting and placement of semantic accents.
prototype sample

Example of a prototype

Thanks to the prototype, we get:

  • Clarification of requirements. It allows you to accurately define the requirements for the product and avoid edits at the design and development stages. Seeing the prototype, all project participants understand what the final product should be and what it includes.

At this stage, it is important to synchronize with the development team so that everyone is in the same context of the site structure and the functionality being laid down.

  • Saving time and money. Skipping the prototyping stage and starting with design right away, you can drown in alterations, make a bunch of edits from the customer in the spirit of «everything is wrong, I imagined it differently» and get a project that will go into the red.
  • The first feedback on the product. The prototype can be used to test ideas and collect feedback from users, the team, and the customer. This allows you to find weaknesses and improve the product before starting its full development.

Read also:

Mind map & Proto-proto

read

Animations and storyboards

read

Concepting + Animations

read

Checklist for finalizing layouts

read