The development of a web prototype is now part of any website, application or software creation. But what are the advantages of a prototype in relation to the creation of a basic concept? And how to manage the passage from the prototype to the final product? In today's article, you will find everything you need to know about web prototyping.
What is a website prototype?
A prototype is a general model of website (or application) which visualizes the layout of all the elements and functionalities. A prototype illustrates all the concepts in a concrete way and to make adjustments with a minimum of costs and efforts. Whether it is a sketch on paper or an interactive structure of several pages, all prototypes have one goal: synchronize the vision of the customer and the developer on what the result must look like.
Why does the customer need a website prototype?
Here is a non-exhaustive list of tasks and problems that a prototype solves:
- Visualization of the aspect and conviviality of a future website from the start of the project life cycle.
- The possibility of modifying and finalizing the vision of the project at a minimum cost.
- The possibility of evaluating more precisely the deadlines and expenses linked to the extent of the task.
- Understand the subsequent development and the website prospects, as well as discuss the starting hypotheses.
At the initial stage, it is not uncommon for a customer to have a clear vision of their future website. In addition, it happens that a team does not reach a consensus, each member with their own opinion and vision of things. Prototyping allows you to visualize all ideas and find a compromise while avoiding having to rebuild the already finished website.
Thanks to prototyping, you can simulate different features sets to choose the ones you really need. In this way, you will be able to consider the site's development budget more precisely.
Tasks to do before launching a prototype
Search on users
Prototyping is never done in isolation – it is always intended for someone else – the user. Research users to find out who they are and what their pain is essential, not only for a successful prototype, but also for a successful final product. Carrying out a study on users will not only help you define the design and functionality of your product, but also to determine if there is a real need on the market.
Collect opinions / requirements
The needs collection stage is to define the management that the product will take, as well as its main characteristics. In general, this implies spending time with the customer and listening carefully to his ideas/remarks, after having presented him with the data of your search on users.
Create a wireframe
A Wireframe is a direct representation of the design of an element. They are invaluable at the beginning of any design process, because they allow you to quickly conceptualize ideas. The wireframes designed by UX designers are generally focused on central issues such as the spacing of the elements, their positioning, the general layout of the screen and user flows. They help designers focus on the most practical part of design before moving on to advanced design and interaction.
The creation of a prototype, step by step
1. Start with a Lo-Fi prototype
After discussing the customer, carrying out research on users and defining the requirements of your product, you are ready to create a LO-FI prototype.
You can now start to develop your screen arrangements, as well as the dimensioning and positioning of the user interface elements. In addition, this is where you will implement a basic navigation flow and create a user interface design. It is not necessary to go into details at this stage. It is essentially a question of developing a basic diagram of the screens of your product which allows customers, stakeholders and users to click and test.
2. Design of interactions
More extensive interactions
When you go to a high-fidelity design, your prototype should start to present more in-depth features. For example, you can create a search bar that recovers the data stored in the prototype according to the user's inputs, accordion menus, drop -down lists and other similar elements.
Another aspect that distinguishes the hi-fi prototypes from the bottom of the spectrum is that they often store digital and textual data, as well as certain parameters entered by the user. These parameters can be stored and affect other elements of the prototype, either on the same screen or on different screens.
Micro-interactions
Micro-interactions are a crucial aspect when it comes to refining the design of the Hi-Fi prototyping stage. A micro-interaction generally consists of a trigger initiated by the user or the system, followed by a sort of return of information.
For example, the addition of mouse overflight effects to modify the condition of various elements such as pimples, links and images to show that they are clickable. A menu that is displayed when pressing the hamburger is also a micro-interaction.
Transitions
Remember to add transitions when it comes to loading new screens or showing/disappearing from the elements. Interactions not only add “spice” to the user interface, but the split delay that they cause helps the user's eyes to readjust.
3. Advanced design of the user interface
The colors
When you arrive at the Hi-Fi stadium, most prototypes have an advanced design of the user interface. At this point, you must implement the color palette that you have chosen according to the brand's guidelines.
Make sure the color combinations you use offer good accessibility and good conviviality. That is to say an adequate contrast to visually impaired users while systematically reserving red and green for error and success messages.
Typography
It is important to choose the right font to be used in your prototype, as they will be a reflection of the end result. Typo is a crucial element for UX and conviviality. If users cannot easily read your font, you will be less likely to hold them.
Refined spacing and positioning
Finally, at the Hi-Fi stadium, you must obtain a perfect representation of the final product to the nearest pixel. This means, in particular, to refine the spacing and positioning of all the elements of the user interface. Defining this type of information at the prototyping stage will facilitate product development.
4. Prototyping of forms
Finally, the design and design of the forms is a crucial element of the UX of a website. Unnecessarily long, too complicated, difficult to understand or presenting faults, can encourage users to abandon your site and never come back. This is why the prototypes are very useful for validating and testing the forms.
