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.
Download Sketch And Drawing Mockup Template #1 Graphic Templates by MockupZone. Subscribe to Envato Elements for unlimited Graphic Templates downloads for a.
- 2 days ago The current version of the Instagram #mockup 2020. It contains all the necessary pages for a successful presentation. All the pages are well-organized for comfortable work. #UIUX vrsions for: #PSD, #Sketch or #Figma available for #Download Instagram Mockup 2020.
- Sketchbook Mockup includes 1 PSD file within Smart-Object to edit/place your design, photo filter and light/shadow correction. Made from a photograph, this mockup has very detailed definition. Also, the photograph has depth field blur so to create more realism the smart-object has also this effect.
- INCLUDED MOCKUPS IN THIS VOLUME ARE. Two sketch papers mockup placed on each other. Slanted view of sketch paper mockup with customizable shadows. Slanted view of the 2 papers mockup placed on each other. Sketch paper mockup with editable shadows and effects.
- The largest collection of free and premium Sketch resources for mobile, web, UI, and UX designers working with Sketch by Bohemian Coding. All.sketch files and.svg files are editable and easy to use.
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 stackholders.
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:
1. 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
2. Sketch a wireframe with professional wireframing tools
(1) 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.
(2) 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.
Sketch Mockup Free
So, it is a good option for you to create a wireframe with basic frameworks.
(3) 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 :
1. 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.
2. 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.
Sketch Mockup Templates Template
3. 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.
4. 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:
(1) Sketch/Photoshop – common 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.
2)MockFlow and Mockplus RP - Mockup/prototyping tool
There are also many mockup or prototyping tools that can help you build a mockup, such as the widely used Mockplus RP and MockFlow.
Both of them provide powerful UI libraries. If you are a website/app design newbie, Mockplus RP would be a good choice for you to get started quickly.
Best free website/app mockups resources
If you still don't understand what mockups are, here are 5 of the best free website/app mockup templates for you to have a better understanding:
1.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.
2.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.
3.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.
4.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 stackholders.
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
2. Sketch a wireframe with professional wireframing tools
(1) 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.
(2) 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.
Sketch Mockup Free
So, it is a good option for you to create a wireframe with basic frameworks.
(3) 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 :
1. 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.
2. 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.
Sketch Mockup Templates Template
3. 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.
4. 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:
(1) Sketch/Photoshop – common 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.
2)MockFlow and Mockplus RP - Mockup/prototyping tool
There are also many mockup or prototyping tools that can help you build a mockup, such as the widely used Mockplus RP and MockFlow.
Both of them provide powerful UI libraries. If you are a website/app design newbie, Mockplus RP would be a good choice for you to get started quickly.
Best free website/app mockups resources
If you still don't understand what mockups are, here are 5 of the best free website/app mockup templates for you to have a better understanding:
1.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.
2.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.
3.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.
4.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 stackholders.
5.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.
Related article: 42 Best iPhone X, iPhone XS(Max) Mockups for Free Download [PSD+Sketch+PNG]
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:
1. 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.
2. 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.
3. 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.
4. 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 stackholders.
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.
Related article: High-Fidelity & Low-Fidelity Prototyping: What, How and Why?
How to make a prototype?
1.Mockplus
Mockplus is a powerful digital product design platform. It allows you to create website/app wireframes, mockups and prototypes quickly from scratch with powerful UI, icon, component and component style libraries. Everything can be done with simple clicks or drag-and-drop.
With effective team collaboration and management features, you can freely collaborate, test and share a design, comment and get feedback, and manage your teams and projects effortlessly.
It also offers useful features for your team to handoff designs and manage design systems online.
2.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.
3.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.
Sketch is a popular program that can be used to create beautiful mobile UIs and wireframes that's rising in popularity. Thanks to its rise in popularity, you can now find tons of resources that cater to Sketch and speed up your design process. Screen grab shortcut.
In this collection, we've rounded up the best free mobile UIs and wireframe kits for Sketch.app that you can use as a starting point for your designs or as an inspiration.
You might also like our collections of Free Plugins for Sketch App, Free iOS & Android Mobile UI Kits or Free Adobe XD UI Kits.
H1 Free Mobile UI Kit (Free)
The H1 Free Mobile UI Kit comes with an impressive number of elements that are sure to get your creative juices flowing. You'll find 470 different elements spread out over 130 templates. You can use this kit for both Android and iOS devices.
Fusion Free UI Kit for Sketch(Free)
The next kit on the list is a perfect choice if you're designing a shopping app. This template comes with 13 screens with layered and neatly organized elements that are easy to edit. Photoshop and Sketch formats are available.
Liberty Mobile Wireframe Kit (Envato Elements)
The Liberty Mobile Wireframe Kit is a multipurpose kit that can be used for any type of mobile app wireframing. It comes with 125 screens and a wide range of elements to get you started.
Free Mobile eCommerce UI Kit for Sketch (Free)
Try this Mobile eCommerce UI kit if you need an elegant design for a shopping app or a mobile store. You'll find 8 different app pages and a web page to accompany the mobile app design.
Momento Free Mobile Sketch UI Kit (Free)
If you're in need of a kit for a social media app, look no further than this template. It contains a number of different screens with all the elements you'll need to create a powerful social media app.
Profile Mobile UI Collection (Envato Elements)
The Profile Mobile UI Collection is a set of 15 mobile screens that are fully customizable, well-organized, and designed with iOS devices in mind. The standout feature of this template collection is the flat design style.
Free Sketch Elements Mobile UI Kit (Free)
This template collection comes from the creators of Sketch themselves. You'll find 35 screens, 45 icons, and 175 different elements to help you get started with your designs.
Free UI Kits for Sketch (Free)
This Free UI Kits collection was inspired by iOS design and features over a 100 different elements. You'll also find more than 50 icons and complimentary UI elements for wireframing.
Rodman Mobile UI Kit (Envato Elements)
Rodman is a gorgeous mobile UI Kit with clean and light design. It comes with 80+ layouts in 7 categories and can be used to design any type of app.
Free Material UI Kit for Sketch (Free)
If you love the material design, don't miss this Material UI kit. Packed with various screens and icons, you'll be able to knock out a mobile app design in no time with this kit.
Mobile Wireframe Kit (Envato Elements)
Try this Mobile Wireframe Kit for your next design. Packed with 90+ mobile screens, a collection of 16 categories, and hundreds of elements, this kit works with both Sketch and Illustrator. It also includes a handy collection of tools and flowchart templates.
Free iOS 11 iPhone GUI (Free)
If you need an iPhone 11 GUI mockup, check out this free Sketch kit. The kit was designed by Facebook's design team and includes all the elements you need to create a stunning mobile app.
Free Mockup Templates
Vera Block for Sketch (Free)
Vera Block is an impressive collection of mobile screens and components with trendy design. You can use them in a variety of projects and the kit comes in Sketch and Photoshop format.
Zoomie – Social Media Mobile App for Sketch (Envato Elements)
The Zoomie kit is another great choice if you're working a social media app design. This kit contains a grand total of 15 screens and features a modern design.
Sketchbook Mockup
Bizwatcher Free Sketch UI Kit (Free)
Tabs battle royale ps4. The Bizwatcher kit is a perfect choice if you're designing an app for a small business, startup, or an online store. The kit features a number of different screens, icons, and elements that will help you speed up the design process.
Music Mobile App Kit (Envato Elements)
This kit is the perfect starting point for mobile music-related apps. It comes with 30+ carefully designed mobile screens that will help you to prototype, design and build any music related app.
Relate – Clean & Simple UI Kit for Mobile (Free)
The Relate kit features a modern and minimal design with 45 unique templates, 19 categories, and more than 99 various elements. The template follows the material design best practices so don't miss it if you love material design.
Chameleon UI Kit (Envato Elements)
This fresh and stylish mobile UI kit includes more 120 unique screens. The kit can be used with both Photoshop and Sketch and also comes with 15 unique themes, 70 icons and hundreds of neatly organized components.
Crypto Wallet Mobile App Concept Template (Free)
Consider this Crypto Wallet Mobile App template if you need to design a mobile wallet app. The template contains neatly organized files for the dashboard, the trading screen, and the currency trend.
Messagly Free UI Kit for Sketch (Free)
This UI kit is a perfect choice for a social messaging app. The template comes with 13 screens and dozens of unique elements to help you get started with your design.
Harmony Free UI Kit for Sketch (Free)
This UI kit was designed with a hiking app in mind. It features a clean and fresh design with over 10 iOS ready core screens designed in vector and based on symbols.
Material Design Wireframe Kit v_02 for Sketch (Free)
This collection is perfect for any lover of the material design. It contains an impressive number of more than 40 screens and the designers keep adding to it so don't miss this one.
iPhone Wireframe Template for Sketch (Free)
If you need to design an iPhone app, this wireframe template is an excellent choice. The kit comes with everything you need for an app design, including screens, buttons, headers, alerts, input fields, and more.
Conclusion
With so many cool and modern Sketch UI kits and wireframes, you can prototype and design any type of app quickly. Use the kits in this roundup as your starting point or simply as an inspiration for your next design project.