Wireframes and Mockups are an integral part of the web design process, they both help to facilitate communication between designers and clients. These two terms are often used interchangeably, however they are not the same, they’re both focused on different goals and often look very different from each other. With this post I am going to attempt to explain what sets them apart and how they are used in the web design process.
Wireframes can look like meaningless sets of grey boxes, but they are in fact the backbone of a design. They help to communicate information regarding the organisation of the different elements of a page and the functionality of those elements.
Wireframes often lack aesthetic detail because they are only ever concerned with elements and functionality. You can think of them like blueprints for a website which will contain a representation of every important piece of the final product.
“A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various templates.”
A mockup is a realistic representation of what a website will look like when it’s finished, it can look almost exactly like final product.
They are usually created using graphic design applications like Photoshop and are much quicker to create than a working prototype, this makes them perfect for communicating a designer’s intention to a client for approval and sign off.
Wireframes may give you an overall feel for the structure and functionality of a website, but mockups will more or less give you a peak at the final appearance of the website itself, including visual details such as logos, colours, images etc.