Wireframes, prototypes and mockups are common terms in UI/UX design.
This article explains about wireframes, prototypes and mockups and when they are used in a design cycle.
What is a wireframe?
A wireframe is a rough sketch about how a website/app will look like. It is usually presented with lines, boxes, colours and placeholders and is similar to the blueprint of a building. So, it is perfect to be used at the brainstorming or very early design stage.
Briefly, a wireframe is a skeletal framework of a website or app which has 2 simple goals:
Outline the page structure and layout
Display basic website/app elements
Why is wireframing important?
Wireframe helps the team to focus and visualize the design inclinations of the product at a brainstorming or a very early design stage.
It helps simplify the design process with many benefits:
Easy to communicate. A wireframe is a good way to communicate. It can reduce the communication barriers between the team members. Sometimes, it is also a good way to demonstrate your design ideas to customers.
Fast to build. You can easily express your ideas by drawing a wireframe with paper and pens. For better and faster communication, you need not pay much attention to details. It's OK to use placeholders and simple texts to showcase everything.
Low cost. The cost of creating a wireframe with paper and pen can be zero. Even when you use a free wireframe tool, the cost is very low.
What is a mockup?
A mockup can be said as the coloured in and fully visualised wireframe. If a wireframe is viewed as the blueprint of a building then a mockup is comparable to a real-life building model. It gives viewers a more realistic impression of how the final website/app will look like.
Unlike wireframes with grey lines, boxes and placeholders, mockups are built with more visual details of the final web/app:
Rich colours, styles, graphics and typography
Actual buttons and texts
Content layouts and component spacing
Navigation graphics
Why is mockup important?
Mockups have a high quality of UI and visual details, it brings many benefits to the team members
Showcase rich project details for better communication
Mockups showcase detailed project specs. It is easy for team members to communicate and discuss a specific feature.
Easy to understand for clients and stakeholders
A wireframe may require viewers to use their imagination. However, with a better visual appearance, a mockup makes it easy for anyone, including the clients and stakeholders, to understand and know more about the actual product well.
Easy to Preview, test and iterate
Unlike skeletal wireframes, mockups are much closer to the final product.
They are good models for you and your team to preview, test, find errors and iterate them early on.
What is a prototype?
A prototype is a fully interactive, functional mockup with high-fidelity UIs, rich interactions and animations. It works and acts just like the final website/app product, So, it is ideal to be used to test for potential app problems before moving into the development stage.
Basically, a prototype is a high-fidelity presentation of your product.
Why a prototype is so important?
Here are simple, but important things you can do with a prototype:
Check whether it meets users' needs
With rich interactions and animations, it allows us to easily interact with the prototype and check whether it meets the users' needs perfectly. If the initial user flow or interaction flow is not very good, there is still time to improve it.
Find new design ideas
A realistic and fully functional prototype also creates a ground for new design ideas. Who knows? Perhaps, during clicking and testing the website/app prototype around, there might be a better solution or new idea to meet the users’ needs.
Attract more clients and stakeholders
Also, while demonstrating the ideas to clients and stakeholders, a prototype that they can personally experience everything is much more effective than a wireframe or mockup, right?
Comments