Decide About Tools

In this lesson, I will let you know about few tools that will help you design user interface at multiple levels in a design process. I will cover the following topics.

Wireframes, Mockups, and Prototypes

At early stages of design, wireframes are created that represent different design ideas. They are low-fidelity images that represent the structure and layout of user interface. No visual design elements like color, theme and icons are used in creation of wireframes.

Mockups are next level images that define visual representation of interface including color, theme and graphics.

Prototypes are linked images that can be navigated by using click-able UI elements. They are used to show the layout and flow of design. Prototypes make it easier to get user feedback without writing any code.

Wireframes, mockups and prototypes all are used to get feedback from stakeholders.

Wireframes are the easiest, quickest and cheapest way to get feedback, and Prototypes require high cost as it takes time and effort to update them. Based on user feedback, the images are updated.

User feedback can be collected at any stage of design process. Initial feedback is collected with paper sketches and white board drawings. Then wireframes are created to give the user an idea of the layout and structure of proposed design.

When layout is finalized, then mockups are designed and prototypes are created that give user a very good idea of the real system. Prototypes should be made only when required as it takes time and effort to build them for each new feature.


Below is a list of few good tools that are available to create wireframes, mockups and prototypes.

Wireframing tools

Paper and Pen
Wireframe CC

Mockup tools


Prototyping tools

Adobe XD

How to select a tool?

There are number of factors that help you to select a tool:
What is your objective that you want to achieve using a tool?
How much learning time you can spend on a tool?
How much collaboration is required?
When do you require to test your ideas with client?
Do you need click-able prototypes?
How many team members are there?
What is your budget?
What are the reviews of other people about this tool?

Answer each of these questions and then go for the best suitable tool for you.

Wireframes are needed to describe your ideas to stakeholders. Use wireframes to convey your initial design ideas to someone who has some knowledge of the product or feature you are designing for. Actual color theme and graphics are necessary to use in Mockups to give an idea of end result. 
All mentioned tools are providing similar functionality with little difference. Choose a tool wisely that meet your requirements.

Mary Cheba