Any creative work begins with a sketch that sets the image of the result you want to get. Website prototyping is the creation of a simple “sketch”, a prototype without any design «chips», which helps to create a clear and understandable structure for a future project, analyze it, identify and eliminate shortcomings and get the full agreement with the client.
It sets a clear framework for website development, eliminates misunderstanding between the contractor and the customer, helps to understand the desires of the client, saves time and money, saving all participants from many organization problems.
Today, using one of the modern online services, you can easily (literally in 3 simple steps) create a prototype without having any special knowledge.
-
What’s the point in website prototyping?
There are at least 4 main reasons for doing that:
- A better understanding of the design intent;
- the prototype is easy to change because it consists of sketchy elements;
- it really saves everybody’s time and money;
- it is your recovery point and a safety net (if you work on the order, then the prototype approved by the client will protect you from redesigning the project).
After the prototype is presented, the customer clearly understands how the result will look like, and the developers, in turn, exactly know what to do.
-
What if you do not create a website prototype?
The prototype helps to see various mistakes at the initial stage of website development. If you have no prototype, all these mistakes go into design, layout, and software. It entails a huge series of problems, the cost of fixing which grows from stage to stage in arithmetic, and sometimes in geometric progression.
-
How the website prototype is made?
At the initial stage, the process of creating a website includes an analysis of what data should be present on the website. Then, the visual part and UX/UI are discussed. The main goal of the prototype is to create a structure that will simplify the interaction with the site for the user.
The structure of the site must exactly match the goals and strategies of the company. For example, an eCommerce website should have certain selling elements: product collections, special offers, shopping cart, various forms, price filters, wishlists and the like.
Then, the team chooses the best method for creating a website prototype. Together with the customer, the developers formulate typical scenarios in which users interact with the site and the corresponding list of available functions.
Methods of website prototyping
Paper prototyping.
This is the very first stage, the most frequently used and accessible method of designing a website prototype. The main goal is to build a competent structure for interacting with the website visitor.
Pros:
- Speed;
- Visibility and better memorization;
- You just need a pencil and a paper – and you can create it everywhere.
Cons:
- To get the electronic copies, you need to scan/take a picture of your prototype;
- The prototype is clear only to those to whom explained;
- Small life cycle (in about a month many details will be forgotten);
- Making changes is quite difficult.
Designing a prototype using special programs.
This is a more efficient way to create a prototype. The most common programs here are Axure Pro, Microsoft Visio, Adobe InDesign, and Adobe Photoshop.
Pros:
- Fast prototyping at any level of development;
- The ability to quickly make changes to entire groups of elements of the same type;
- The ability to publish ready-made prototypes on the Web – you just need to follow the link;
- Ability to implement site navigation;
- A full-fledged ability to add imitation of how the website elements work;
- Ability to add tooltips to explain the logic of work.
Cons:
- The program for prototyping;
- The ability to work in it.
Online tools for website prototyping.
Online tools allow you to create various kinds of prototypes, from simple sketches to fully functional layouts with working links and interface elements. As a result, you get a prototype that is not inferior to the one created using a special prototyping program.
Pros:
- Fast prototype creation;
- Element libraries;
- Advanced user flows;
- Built-in collaboration options;
- Streamlined prototype presentation;
- 24/7 access to the prototype from anywhere.
Cons: not found.
