Wireframes, prototypes and mockups are very common terms in UI/UX design. But, people often confuse them and are not aware about how they can be used to create a better design.
This article explains the differences between them in details and help you understand when a wireframe, prototype and mockup should be used in the design process. Some relevant terms, design tools, design examples and free resources are provided for your convenience.
What is a wireframe?
A wireframe is a rough sketch about how a website/app will look like. It is usually presented with gray lines, boxes, colors and placeholders. It is similar to the blueprint of a building the blueprint of a building which involves a lot of work from many participants to be converted into, 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 3 simple goals:
- Present the main page contents
- Outline the page structure and layout
- Display basic website/app UIs
Why a wireframe is so important?
As we’ve described above, a wireframe is a simple blueprint to map out how a website/app will be designed in the future. It allows your entire product team to focus solely on the macro decisions of your project before you dive into the details.
It helps simplify your design process with many benefits:
Easy to communicate. A wireframe is a good way to communicate. It can reduce the communication barriers between you and your team members. Sometimes, it is also a good way to demonstrate your design ideas to customers and other stockholder’s.
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.
So, a wireframe is definitely a perfect choice for you and your team to visualize the macro aspects and decide on the design directions of a web/app project at the brainstorming or very early design stage.
Low-fidelity wireframe vs high-fidelity wireframe
While designing a website/app, you may also have heard about “low-fidelity wireframes” and “high-fidelity wireframes”. Do you know the differences between them? Here we go:
Low-fi wireframes refer to paper wireframes
At the brainstorming stage, many designers love to draw out their web/app interfaces directly on paper, creating a paper wireframe for discussion and interaction.
Since these sketches usually showcase a part or major parts of a website/app roughly, without many UI details, they are considered to be low-fidelity wireframes.
Low-fi wireframes refer to static wireframes made by wireframing tools
The next type of low-fidelity wireframes are the wireframes created with design tools or wireframe tools. They mainly include the basic contents and visuals of a website/app. Most importantly, they are static and do not include any interactions or animations.
High-fi wireframes refer to wireframes with more details and simple interactions
To convey the design ideas clearly, many designers add more UI details and simple interactions to their low-fidelity wireframes with a professional wireframe tool, creating high-fidelity wireframes.
High-fidelity wireframes are usually clickable and simulate a simple interaction of a website/app section.
For example, many designers use high-fidelity wireframes to quickly visualize the simple interaction flows of the logging-in, checking-out or navigating process.
This high-fidelity wireframe is created to showcase the navigation bar and its simple interaction flow.
How to make a wireframe?
A low-fidelity or high-fidelity wireframe is often used to visualize the big picture of a website/app roughly, and do not require a lot of professional skills. There are many ways you can follow to create a wireframe:
01. Create a wireframe with paper and pens
When you get a brilliant design idea in your mind, but do not have any laptop around, you can follow the old way to visualize your ideas with paper and pen. Sketching everything directly on paper is really effective to present your ideas visually.
Such paper wireframes are really good to express your ideas at the brainstorming stage quickly. However, they may not be a perfect choice to share and discuss with your entire product team because they lack details.
Use paper and pens to sketch out your wireframe
02. Sketch a wireframe with professional wireframing tools
01. Balsamiq
Balsamiq is a simple low-fidelity wireframing tool that enables you to sketch everything on a whiteboard with your computer. It offers hundreds of simple icons and components for you to create wireframes quickly with drag-and-drop, share and collaborate online.
So, if you love to sketch everything out just like on a paper, and collaborate with others online, Balsamiq is perfect.
02. Pencil
Pencil is a free and open-source wireframing tool that allows you to make simple diagrams and website/app wireframes. It provides rich shapes and diagrams for you to roughly present your design ideas.
So, it is a good option for you to create a wireframe with basic frameworks.
03. Wireframe CC
Wireframe CC is a simple online wireframing tool that enables you to create a wireframe with simple elements, such as boxes circles, images and lists, etc. You can also export any projects to PDF/PNG files for further discussion and iteration.
As an online tool, it allows you to access wireframes anytime and anywhere.
Then, let’s learn about mockups:
What is a mockup?
A mockup is a static wireframe with much more UI and visual details. If a wireframe is considered as the blueprint of a building, a mockup is similar to a real-life building model. It gives viewers a more realistic impression of how the final website/app will look like, So, it is good for communicating, discussing, collaborating and iterating projects with your team members at a later design stage.
Briefly, unlike wireframes with gray lines, boxes and placeholders, mockups are built with more visual details of the final web/app:
- Rich colors, styles, graphics and typography
- Actual buttons and texts
- Content layouts and component spacing
- Navigation graphics
Why a mockup is so important?
After explaining your design ideas roughly with a wireframe, to further discuss and iterate it quickly, you need to upgrade your wireframe into a mockup. With a higher quality of UI and visual details, it brings many benefits to you and your team :
01. Showcase rich project details for better communication
Mockups showcase rich project details. It is easy for you and your team to communicate and discuss about a specific detail.
02. 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 your clients and stakeholders, to understand and know more about the actual product well.
03. 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.
04. Easy to create
With a good mockup tool, it is easy to create a realistic mockup.
So, a mockup is absolutely good to be used when you need to communicate, discuss, collaborate and iterate projects with your team members.
How to make a mockup?
Since mockups have included many visual details, you need professional tools to create your desired website/app mockups:
01. Sketch/Photoshop – Popular Design Tools
Both Sketch and Photoshop are well-known design tools. They provide a wide range of tools for you to create a mockup with rich colors, texts, layouts, graphics and other visual elements.
And if you are a Mac user, you can easily choose Sketch. But, if you are a Windows users, Photoshop will be good.
Best free website/app mockups resources
If you still don’t understand what mockups are, here are 05 of the best free website/app mockup templates for you to have a better understanding:
01. Free One Plus 6 Mockups
Free One Plus 6 Mockups includes a couple of flat mockups created for the popular One Plus 6 mobile. It is available in multiple formats, such as the Sketch, PSD, AI and XD formats. You can freely download to check its details and create your desired mobile mockups or prototypes quickly based on it.
02. Free Mobile App Screen Mockup
Free Mobile App Screen Mockup includes several mobile app screen mockups in PSD file format. You can easily add your desired images and screens to the smart-object layers, showcasing your design ideas clearly. It is about 42MB and free for personal use.
03. Free Minimalist Mobile App Screen Mockups
Free Minimalist Mobile App Screen Mockups is a multiple-screen mobile app mockup bundle. You can easily drag and drop desired images and other objects to create an app mockup quickly. It can be edited directly in Photoshop. It has a size of 2MB. It is free for personal and commercial use.
04. Isometric Website Mockup
Isometric Website Mockup is a beautiful and modern website mockup bundle that allows you to visualize your design ideas in 6 different isometric perspective modes. You can also use its professional showcases to present your design works easily while communicating with other team members or demonstrating your ideas to stockholder’s.
05. Perspective Web Mockup 12
Perspective Web Mockup 12 is another super amazing website mockup bundle with a perspective view. With smart object and wonderfully illustrated images, you can paste your website designs with ease. With this mockup template, you can create a clean and professional website mockup quickly.
We hope these free templates can help you know more about website/app mockups.
What is a prototype?
To some extent, a prototype is a fully interactive, functional mockup with high-fidelity UIs, rich interactions and animations. It behaves 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.
Briefly, a prototype is a high-fidelity presentation of your product.
Why a prototype is so important?
Since a prototype presents your product more realistically, to save time and money, you can easily use it to do a usability test and find potential errors before moving to the development stage.
Here are simple, but important things you can do with a prototype:
01. Check whether it meets users’ needs
With rich interactions and animations, you can easily interact with your prototype and check whether it meets users’ needs perfectly. If the initial user flow or interaction flow is not very good, you still have time to improve it.
02. Test and find potential problems
With more UI details, you can also explore the UIs more deeply and find the potential problems for a better UX. Moreover, you are also suggested to pay much attention to the usability and functionality test.
03. Find new design ideas
A realistic and fully functional prototype also creates a ground for new design ideas. Who knows? Perhaps, when you are clicking and testing your website/app prototype around, you may find a better solution or new idea to meet users’ needs.
04. Attract more clients and stackholders
Also, while demonstrating your ideas to clients and stakeholders, a prototype that they can personally experience everything is much more effective than a wireframe or mockup, right?
Overall, a prototype is perfect for you to test your designs and attract far more users, clients and other stockholder’s.
Low-fidelity prototype vs high-fidelity prototype
While learning about prototypes, you will surely read about two terms “Low-fidelity prototype” and “high-fidelity prototype”. In fact, these two terms are only used to describe the different levels of creating a prototype:
Low-fidelity prototypes refer to paper prototypes with simple screens and interactions
These days, many designers think the wireframes and mockups are not necessary. For them, to discuss and iterate design ideas smoothly, they often do a paper prototyping to test their design ideas at the early design stage.
They often draw out the key screens and interactions directly on paper for better communication and testing.
Create simple user interfaces and interactions directly on paper for quick prototyping and testing
In comparison with paper wireframes, paper prototypes have more colors, elements and interactions to visualize your design ideas.
Low-fi prototypes refer to digital prototypes with rich details and interactions
To translate design ideas into a fully functional prototype quickly, a low-fidelity prototype with rich details and interactions can help you a lot. Without paying much attention to adding high-quality images and complex elements, you can focus solely on visualizing your ideas.
You only need a good prototyping tool to build a low-fidelity prototype quickly.
In comparison with low-fidelity wireframes, low-fidelity prototypes are built with more realistic buttons, hyperlinks, interactions and components.
High-fi prototypes refer to digital prototypes with high-quality visuals, contents and interactions
High-fidelity prototypes are usually created with high-quality visuals, contents and interactions. You can easily click and test it as you would in a real app. It acts like a real app that has not been coded yet.
In short, we hope this helps you know better about the differences between low-fidelity wireframes/prototypes and high-fidelity wireframes/prototypes.
How to make a prototype?
01. InVision
InVision is a web-based prototyping tool that allows you to create interactive prototypes, collaborate and iterate it online with your team. It provides many collaboration features for your team to work on the same project.
However, it focuses more on interaction and collaboration features. You are not allowed to directly create a prototype from scratch. You should create the basic and static mockups in PS or sketch, and then, upload them to InVision for further editing.
02. Justinmind
Justinmind is a simple prototyping tool for you to create interactive prototypes from scratch. With many mobile component libraries, like the great iOS components, it is a good choice for you to create mobile app prototypes with ease.
There is a learning curve for a design newbie to learn how to prototype.
In short, these three prototyping tools can help you create best website/app prototypes effectively.
