Skip to main content

Wireframe vs Mockup vs Prototype & Selection of Prototyping Tools

Wireframes, mockups, and prototypes are terms that are often used synonymously, and they are indeed quite confusing. This article explains what is hidden behind each term and provide helpful prototyping tools.

What are differences between wireframes, mockups and prototypes?

In a post on Designmodo, Marcin Treder writes:
"Confusing wireframes with prototypes is like assuming an architectural blueprint and a display house, are the same thing."

design flow

Wireframes, mockups and prototypes actually represent the different stages of design flow.

Wireframe, a low-fidelity way to present a product, can efficiently outline structures and layouts. Wireframe is the basic and visual representation of the design. Your wireframe design doesn’t need to focus too much on minutiae, but must express design ideas and should not miss any important parts.A wireframe is like a channel that helps team member understand their projects better.

Mockup, a kind of high-fidelity static design diagram, should demonstrate information frames and statically present content and functions. Unlike a wireframe,a mockup looks more like a finished product or prototype, but it is not interactive and not clickable. It is rather a graphic representation. This can be helpful, for example, to provide investors with a picture of how a finished product can be,and help team members review their project visually.

Prototype is already very close to the finished product. Here, processes can be simulated and user interaction can be tested. A prototype looks very similar to the finished product. Early prototyping can save a lot of development costs and time so that the work of back-end product architecture will not be in vain because of unreasonable user interface design. A prototype is an excellent tool to obtain user feedback and to test the product.

How can you choose a tool?

When you try new tools, you are always confronted with these questions:
• Is it worthy of spending your time learning it?

• How long do you need to adapt a new tool?

• How fast can you actually develop a prototype by using this tool?

Before deciding on a new tool, you'd better consider the following question:
• Is the tool used for creating prototypes for website, desktop or mobile apps?

• Do you want to develop wireframes, mockups or prototypes and what are your requirements for a tool?

• What are the functions you need when working with other developers or designers?

• How expensive is the tool and is it worthy?

In the following, I would like to present you some prototyping tools.

What tools are available for wireframes, mockups and prototypes?

Mockplus, Balsamiq Mockup for wireframes and prototypes


Mockplus

With Mockplus you can easily create mockups for mobile and desktop apps. Without any programming knowledge, you can also master this easy-to-use tool. By simple drops & drags you can create interactions. Its pre-designed elements, like pop-up menus, sliding drawers and picture carousels, are also worthy to be highlighted here. In addition, Mockplus supports team collaboration.

Mockplus allows you to quickly and easily create mockups

If you just need to make a wireframe, you can use Balsamiq Mockup. Its interface operation is simple, and wireframes made by it have a unique hand-painted style and simple lines. This tool provides various commonly used components, which allows designers to focus more on design, rather than on visual effects. However, when it comes to interaction design, Balasmiq is utterly useless.

Sketch, Photoshop and Illustrator for mockup


Sketch

Sketch is a lightweight, easy-to-use vector design tool that is very effective for designing mockup. Its disadvantages are: it don’t have dynamic or interactive functions, which is not conducive to perform product features and associated logic; it only supports Mac. Its features are that the hierarchical structure is in line with the prototype file; commonly used functions are complete, shortcut keys are reasonable and convenient; a variety of component libraries and templates are very rich; plug-in is easy to install and plug-in library develops rapidly.

Some designers majoring in visual design can use Photoshop and Illustrator to design prototype because of their habits and also make Photoshop wireframe. However, to operate the two is relatively difficult, for they are easy to draw mockups and flow charts but not conducive to make interactive design and not good at text caption and annotations.

Conclusion

These tools have their own pros and cons. Which tool is better depends on whether you want to design wireframes, mockups or prototypes. I mainly use Mockplus to design prototypes, for it’s easy to use and affordable. I hope this post and the prototyping tools presented here can help you.

Read more:

Comments

Popular posts from this blog

5 Secrets To Design An Excellent UX Designer Resume and Get Hired

The Bureau of Labor Statistics  ( BLS ) reports that there are three related industry positions that show exceptional promise - Software Development and IT, User Experience Design, Product Management and Project Management.  UX designer  becomes one of the hottest creative industry careers nowadays with a  total job amount of 3,426,000,  and the job growth is 22.1% in 10 years.  CNN  shares some researchers about UX designer’s salary: Median  Pay is $95,000 and the top pay is up to $150,000. More information about  UI/UX Designer Salary Around the World . Quite appealing, right? Would you like to be one of the trends? How to get hired? What skills should you master? If you are a UX designer already, pass this part. If you are a newcomer, check  Beginner’s Guide: What Is An UX Designer  to quickly get a basic understanding of it. Well. Now we assume you are all set to get a UX designer job. What do you need? Usually, the process you get a UX job including 5 steps: Step 1: Pre

UI/UX Designer Skills Valued by Facebook

My friend Cynthia wasn’t a fan of social networking. It’s hard to find her in any online circle, except for Facebook, where she occasionally kills her time. However, yesterday she told me that she’d fallen in love with FB. On the 2 anniversary of her registration, she just logged in the community and found a video clip customized for her. In that video, her avatar was printed on a badge, picked up by a hand with dark skin and was put on table in the middle of many badges printed with the avatars of her friends, accompanied by another badge, on which there is a line, "Thank you for your accompany and not forgetting" Cynthia was deeply moved and played the video back over and over again. Facebook, a community with over 1.4 billion users, totally won her affection by its focus on users. It’s no wonder that so many designers dream of becoming a member of the social network giant. Facebook never made its process of selecting a UI/UX designer public, but if you are conce

What are & How to Create Personas: Step-by-Step Guidelines of Everything

Before starting a product design, it is very important to know clearly the demands of users. Taking into account the needs of users can help determine how the product will fit the conventional requirements of users of different fields and ages and with unequal contexts, meanwhile to help the function design. Creating Personas is a good way to achieve this goal. Software development pioneer Alan Cooper had created the first Persona with his colleagues in the 80's. In this article, we'll talk about how to create Personas through 7 sections. 1. What is a Persona? The Persona definition is that one or several fictional characters that can represent the majority of the potential users of product with conventional user demands and they are created through a great amount of quantitative and qualitative research. Persona answers the question "Who do we design for?" It is a powerful tool based on research findings in helping product function creation by optimizing the U