Wireframing, Prototyping, Mock-Uping, Sketching – What’s the Difference?

By Roman Berezhnoi September 21, 2018 2.96K views

Wireframing, Prototyping, Mock-Uping, Sketching – What’s the Difference?

You may have come across folks who talk about one thing when they actually mean another totally different thing. I recently sat with friends who used the term wireframe, prototype, sketch and mockup synonymously when talking about the sketch that represents an idea during web design process.

To some this may seem like a small forgivable mistake and that we shouldn’t even waste time trying to resolve it. However, confusing these terms can be likened to confusing between a house blueprint and a display house. To get high quality web design, to be satisfied a cooperation with a web agency you need to avoid confusion in respect of terms.

Wireframes, prototypes, and mockups are different, serve different purposes and communicate different things.

So, what is the difference between them?

Wireframe

What Is It?

After determining the architecture of a website, you need a foundation upon which your creative design work will rest. Wireframes are this foundation. They are simple visual layouts that define a site’s hierarchy and demonstrate its main elements.

Wireframes do not give many details about the website. They are devoid of color (usually grey or black and white boxes) and serve as low-fidelity design representations that guide the project. They, however, are the backbone of the entire project and thus contain every important aspect of your project.

When and How Are They Used?

Wireframes document a project. They are in no way testing material. They are merely sketches used by the project team for communication and planning. Wireframes set a path for the project. They’re vastly simplified and almost comparable to a map for the team to follow when working on the project. A wireframe should be created quickly. The most important part of creating a wireframe is a research of website users. However, since it’s static and fixed, short notes or some other form of written word should accompany each wireframe to explain what the various components represent.
We use wireframes as a part of UX design services

Wireframing process

Prototype

What Is It?

A prototype is a simulation used to test the components and interactions of the final products. The primary focus of a prototype is to simulate user interface interactions. It has a lot of resemblance to the final product; thus, it most certainly isn’t as sketchy as a wireframe.

Although most of the mechanisms connecting the backend to the interface may be omitted at this level, the interactions must be well-researched and orchestrated. It’s important for modelling an interactive user experience similar to what will be in the final product.

When and How Are They Used?

Prototypes are mostly called to use during the user testing stage of web development. In addition to assessing the usability of the interface, prototyping gives various stakeholders a chance to review how well a solution works before committing money and time to its development. As such, the prototype ensures that the user interface design will work and therefore guarantees that all the backend architecture and programming done will not be in vain. The prototype is additionally an excellent tool to gather user feedback about the product before starting development.
We use prototypes for website design and mobile applications design.

Mockup

What Is It?

Mockups are a visual draft of the design and at times can be the actual visual design. Though a mockup is just as static as a wireframe, it has more visual elements and is used to convey the brand. It, on the other hand, lacks the interactivity of a prototype. Mockups show the corporate identity through a particular visual style that includes both color and typography. They thus can be wireframes that were turned into the final look of a product. A mockup is often vital in showing stakeholders the expected product dimensions. Most stakeholders will understand mockups better than wireframes which tend to be more abstract.

When and How to Use Mockups

Mockups are easier and cheaper to create than prototypes. They are also more visual than wireframes. This makes them ideal when one is seeking early buy-in from stakeholders. They are also excellent feedback gatherers and also form good documentation for a project.

Sketch

What Is It?

Sketches are the simple drafts made with a pencil or pen on a piece of paper. The sketch is useful in order to remember and not lose the idea. You can outline some details of the interface, draw individual elements or emphasize some features of the future project there. You don’t need to focus on details, only the basic idea is important.

Not all customers will be able to understand what you have depicted in the sketch. So, you can only show it in exceptional cases, for example, to regular customers, who you have been working with for a long time.

When and How to Use Sketches

When it comes to individual elements of a future project, it is much easier to draw a sketch with a pencil than to explain your idea with words, especially to a person who is not familiar with specific terminology.

How to Choose Between Wireframes, Prototypes, and Mockups

There is no such rule that you need to use all the listed tools at once to get the successful project. On the contrary, it’s worth using one or two of them to save resources.

When choosing what deliverable best suits for your project, you must consider what works best for your product as well as what is best for your team. You also should think about your target group and the problem that you want to solve. On top of that, think about whether your project will work best with sketches or formalized documentation. Finally, your choice will be highly influenced by the amount of time and money available.

It seems obvious, but if you invest money in a business site, there is the best way is to contact web specialists who specializes in web development.

Contact us:

Thank you for your message. It has been sent.

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.