The creation of a website usually begins with a prototype – a draft version of the final project. There are different ways to make it: on paper, in a graphic editor, or in a web program. Each method has its subtleties, so let’s understand why you need a prototype site and what its features are.

What Is a Prototype?

A prototype is a rough implementation of a future product. At this stage of the prototype, designers do a layout of the content structure on the page. It helps to understand how headings, subheadings, lists and other elements will be arranged, regardless of the site type, be it a marketplace or a live casino online. The result of prototyping is an understanding of the proportionality of all the elements and a finished prototype of the future full-fledged design. 

Variants of sketches of the future site are different. This can be a simple sketch on paper or clickable multi page structure. The latter is true when the project is complex and it’s easy to get confused. Even if you make a site for yourself, it’s better to make an outline. That way it will be clearer what the result of the work will be.

Stages of Prototyping

Site sketch. A small sketch on a sheet of paper helps to structure the arrangement of objects. 

Digitalization of the sketch. The site has many internal pages and transitions, and before proceeding to the grid, the prototype must reflect all of these transitions and possible user scenarios. 

Style development. Once the layouts have been agreed upon, the concept development phase moves on. This is where the brand values and philosophy, as well as the brand identity guidelines help. Based on these elements, the designer works in more detail on the appearance of the site and approves it with the customer.

What Customers Need a Prototype Site for

Simply put, to build a house, you need to draw a blueprint and calculate an estimate. It’s the same with the website: you need a prototype to understand what it will look like and how much it will cost.

Let’s say you need an online store to sell children’s toys. There are many ideas for the site, but you need to come to a common vision. Designers and developers could create several different sites, but it’s expensive and time-consuming, so they use a prototype. It helps to: 

• Work through all the user scenarios, transitions, internal pages that open when a particular button is clicked.
• Make sure that all requirements and wishes are taken into account;
• Approve the exact timing and budget for the preparation of the final site.

How to Make a Prototype Site

There are different types of prototypes – one-page and multi-page, cheap and expensive, simple and complex. You can draw each of them in different ways; let’s look at three basic ones.

On Paper or on a Marker Board

It’s always good to work with your hands first, which is why even professionals use these simple tools. A sketch on paper or a whiteboard helps you understand the big picture: what the main sections of the site will be and how they relate to each other. 

Cons of this method: 

• You can’t draw a complex site hierarchy (if it has many transitions, levels, pages).
• You cannot create an interactive prototype of the site. That is, you can not see how the functions and buttons respond to external influences.
• The paper version cannot be edited: if you need to correct an error in the outline, you will have to redraw it. 

With Professional Programs

This option is suitable when you want to create an interactive and dynamic prototype. Popular desktop programs include Sketch, Adobe XD, Adobe Photoshop, and Axure Pro. The pros of this method are many: clickable features, font and color elaboration, clear shapes, and the ability to edit the prototype. 

Using Online Prototyping Tools

In terms of functionality, web services are no different from desktop programs: here, too, complex prototypes are created. The advantages that make online tools easy to use are:

• They have a clear interface – even a person with no experience can make edits.
• You can use collaborative mode – this speeds up the process of prototype development.
• All files can be saved in the cloud and won’t be lost.

Prototyping Tools 

Marvel 

There’s a lot of functionality here: you can create sketches for any interface, even programs for the Apple Watch. The tool itself is adapted for computer and phone browsers, so you can work from any device. 

There is a free version, but in this case you can create only one project. The cost of paid plans from $12 to $48 per month. The price depends on the number of users who have access to the account and other premium features. 

Justinmind

In this program, you can “draw” prototypes for any device: tablets, smartphones, computers. Site sketches can be of any format: from small schematic drawings to interactive prototypes with clickable elements. Designers can use templates within the service itself as well as transfer elements from Photoshop or Illustrator. 

The program can be used by a single professional or by an entire team. The subscription price does not depend on the number of users. The cost of the standard version is $9. There is also free access: it isn’t limited to the number of projects, but there may be watermarks on them when using some templates. 

Wireframe

This online tool resembles a sheet of paper. There are no templates, icons, or interactive elements like the previous versions. So, it takes a few minutes to get to grips with the tool’s functionality. The service is focused on minimalism: you can draw simple forms, choose colors and fonts. 

The program is free, but there is a premium subscription. Its advantage is that you can create clickable and multi-page prototypes. The monthly cost is $16 for a single user and $39 for a team of three.

See our other trending articles.