A site prototype is a model of a future website, namely the location of navigation blocks, application forms and other functional and information blocks. The prototype is the basis of a web project that makes it possible to build a complete and effective system of user interaction with the site.
The purpose of the prototype is to understand what the website will look like and work as soon as possible to avoid design errors at later stages.
Now we’ll tell you what web projects need the prototype most, how it helps to evaluate the site, how detailed it should be and how to create a perfect one!
Do you need a reliable way to create a prototype for your business website? Use the free online Draftium website prototyping tool, Mockplus RP, the app prototyping tool, recognized by the famous ProductHunt aggregator as the “Design Tool of the Year”!
-
How does a prototype help to evaluate a site and for what projects need it the most?
Any type of website needs a prototype.
How to know the way the website with its multiple interactive elements will work? Taking into account the work of all members of a project team? The prototype solves this problem by providing a clear visual form of the future website!
You can create a prototype very quickly, so you can work out different behaviors on the prototype and choose the one that will be acceptable to the entire project team as soon as possible.
Creating a prototype allows to accurately assess the development of the entire web project. Its accuracy is approximately 60-70%. To increase the percentage of accuracy to 85-90%, it is necessary to evaluate it according to the finished design. You should do this because there always may appear some new requirements that can seriously change the layout assessment and the entire front-end and sometimes affect the server side.
Of course, you can create the design simply by “painting” the prototype, but, this way, it is impossible to get the perfect results.
By the time when the design is created and agreed upon, usually up to 40% of the budget for the site is already spent (the proportion is true for corporate sites and simple online stores, for SaaS the share of prototype and design is certainly less).
Therefore, it is better to carry out the assessment several times. First, you can make the approximate assessment using mockups, and then, you get more precise data with the help of a prototype.
-
The optimal level of prototype detail
The site prototype can be of different levels of detail:
- creating a prototype of business sites and small online stores, you can draw a detailed prototype of only 3-5 key pages, the rest should be done at the level of simple structural sketches (mockups);
- huge web portals, online services, SaaS and web startups need to be modeled on a detailed prototype, with all of the existing pages.
It’s better to create both mockup and a site prototype right away, using professional tools. Although most of them are paid and require having special knowledge, they allow you to flexibly control the level of detail and, if necessary, implement even more complex dynamics, which simpler tools do not allow.
The difference between the prototype and the mockup is that the mockup is a simple static structural sketch, just a picture that can be created using special tools, or simply by hand.
A prototype is a detailed diagram that responds to mouse clicks, where you can «surf», just like on a regular website.
-
How to create a website prototype?
The process of creation involves standard steps. However, depending on the complexity of the site, there may be some variations:
- Competitor analytics, determination of target audience and persons. The analysis helps us understand the intricacies of a niche so that you can propose improvements at the level of an idea.
By clarifying the target audience, you make the basis of a website for the persons. «Persons» is a personalized description of each type of user and their specific goals. This stage is important because it helps to further understand what key indicators of the project you need to track after launch;
- Designing the interface using the mockup. It usually takes 8-10 iterations of prototyping for projects with an initial stage of developing a business idea, when there is nothing similar to your project on the web at all or there are very few analogs.
At the initial iterations, you work with rough sketches, and closer to 5-8th iterations you cut off everything you don’t need: you discuss which logical modules you should leave, and which ones should be removed, check-in with the goals and objectives that the team had approved with the customer;
- Detailed prototyping of key sections and pages. The difference is that at the stage of mockups you prepare a static picture, and here you will revive it.
When you submit the form, you see “Thank you” messages, when you log in, the controls in the header change, and when you use filters, the search results in product catalog change. This helps you to understand how the site dynamics should look like;
- Front-end architecture design. Based on the number and type of animation, forms, the complexity of the data transfer incorporated in the prototype, you determine which technologies you will use, where you store data for the front-end);
- Specification and description of functionality. This is a description of the behavior of all key blocks and dynamics on all pages.
For example, even the form on the Contacts page is clearly described: “by clicking “Submit”, the visitor won’t see the popup, but he will see an animated “Thank you ” message right over the button.