What are the differences between wireframes, mockups and prototypes?
DAte
19 May 2019
Category
When you do a website or app design, wireframe, mockup and prototype are used synonymously, and people often get confused.
This article is to explain the differences between them.
Wireframe
A wireframe is a low-fidelity way to present a design/product, that can efficiently outline structures and layouts, with the essential visual representation of the design. Your wireframe design does not need to focus on the visual details, but it should at least demonstrate the design idea and contain the essential elements and the content. A wireframe is like a communication channel that helps team member understand their project better, gather things together and see the big picture.
One of the advantages of creating a wireframe is that it is not only an inexpensive and quick way to move forward but also to get community feedback. You can show it to potential users or team to ask for feedback which allows them to pay more attention to the user experience and functionality rather than the aesthetics.
I often start with a sketch in a notebook to draw some basic ideas or concepts first and then transfer it into a wireframe tool like Axure, OmniGraffle, Balsamiq Mockups, etc. but my choice of weapon for wireframing is Sketch.
Mockup
In general, mockup refers to high-fidelity mockup that is a visual way of representing what the final design is, and shows how the product is going to look like. It should include the final decisions of the colour schemes, visual style and typography. Again, you can ask feedback from your potential users or team members and make the necessary changes.
There are plenty of design tools like Figma, Adobe XD, Adobe Photoshop, Sketch, etc.
My choice of weapon for design is Sketch, but I also started using Figma. The primary reason for me to start using Figma is that it is better for team collaboration and more effective.
Prototype
A prototype typically created with a mockup that simulates user interaction. It is clickable and allows users to experience content and communications in the user interface.
It is meant to be a representation of the final product and used to get user feedback early and iterate through the design quickly. Once you have done enough testing and iterations with the prototype, then you can move to the next phase - development.
Many design tools like Adobe XD, Sketch or Figma allows you to prototype these days but below is the leading prototyping tools currently in the industry.
My choice of weapon for prototyping is Marvel and also planning to try Framer in 2019!
This graph shows that the time is proportional to fidelity. For example, the hand drawing sketches can be done in a short time but low-fidelity.
