We discovered that the majority of outsourcing software development providers, as well as non-designer customers, use certain terms interchangeably to describe design deliverables. Mockup is confused with wireframe, prototype with MVP, and sketch with wireframe.

The problem is that a misunderstanding in communication may lead to suspension of a business partnership, wasted time and lost money, damaged reputations and other unwanted consequences for both clients and service companies.

Let’s discuss design terminology to clear up the differences.

Sketch

A sketch is a simple drawing made by hand on paper. This type of design representation has the lowest fidelity (lo-fi).

Wireframe

A wireframe is also a lo-fi representation of a design made using a special computer program or online editors. According to a CreativeBLOQ review published in January 2016, the three best wireframe tools are Balsamiq Mockups, Axure and Pidoco.

A website wireframe is a visual guide that represents the framework, or skeleton, of a website – usually in black/gray/white tones.

Wireframes are typically used as the documentation of the project and are aimed at answering the following questions:
What? – Main blocks of content
Where? – Placement of the content blocks
How? – Description and basic visualization of the user–interface interaction

Wireframes allow the team to focus solely on the “big picture” before diving into the details. A well-created wireframe communicates design in a crystal clear way and sets a path for the whole team.

Flowchart (Use flow)

A flowchart, or use flow, is a visual representation of the sequence of user steps needed to perform a process and reach a website goal. For example, the aim of an ecommerce website is to sell a product, so the flowchart for that website should show the ways in which a visitor can buy the product. Moreover, a flowchart demonstrates connections between pages. Creation of a flowchart is a very useful practice in UX projecting and the cost of doing so is affordable.

Prototype

A page prototype is often confused with a wireframe, underestimating its abilities and with MVP overestimating them. A prototype is a middle fidelity, black/gray/white representation of the final product aimed at testing the main interactions in a way similar to the final product.

Be aware that prototyping is a rather expensive and time-consuming form of design communication.

Mockup

Mockups are often confused with wireframes, due to how some software companies are named, especially in the CIS market. A mockup is a high fidelity, static, full color design representation. It demonstrates, in a static form, the visual side of the project according to the structure of information and the basic functionalities.

Summary

A sketch is the roughest representation of a design, typically done by hand. Wireframes, flowcharts, prototypes and mockups require special software and the relevant knowledge and skills. When talking about costs and time required to complete, these aspects increase as you go from a sketch to a full mockup.
Think which deliverable will be most appropriate for you. What will work best for you at this stage? Formal documentation? Or quick informal sketches and face-to-face discussions?

Sincerely,

Itera Research team