A lot of people think Wireframe, Mockup and Prototype mean the same thing but they do not. I used to be one of the people who thought that but it all makes sense now. They are all different stages in the process of designing a product and this article will explain how and why they are different.
Wireframe is the first step when creating a product. It is basically the rough and simple representation of an idea you have like a sketch or an outline of products such as websites or applications. It focusses on the user experience like content and features rather than the look also known as user interface. It shows the main elements of the contents and layout of the product. It is said to provide a low-fidelity representation which means it contains the basic concepts but is a sketch and is incomplete.
Mockup is typically the next step after the wireframe has been created. Mockup is the part of the process where you pick the logo, colour scheme, typography and fonts e.t.c. It gives you the opportunity to bring everything together and see if it works or not. It is said to provide a medium-fidelity representation which means it has more details than the wireframe but is not clickable and the user cannot experience it fully.
Prototype is the last step before the final product. The prototype has the ability for users to click and experience the look (user interface) and how easy it is to navigate through the product (user experience). This step is very important as you can show customers, investors or colleagues, so they fully get the image of the final product and you can get feedback before the final product is made. It is said to provide a high-fidelity representation which means the user has the ability to interact with it to feel the experience and interface.
A similarity they all share is at the end of every step it is important to get feedback from the customers or colleagues as it makes it easier and saves a lot of time to change before you get too far.
It all makes sense now right? Leave a comment below and let me know what you think!
