Mockups vs Wireframes vs Prototypes

The design process is overflowing with a vast array of tools with varying capabilities and price tags. It can often be overwhelming with so much choice and it can be confusing when some tools claim to do various overlapping sections of the design process.

Would it not be good if each of the key stages of the design process were defined once and for all? Well here it is…


In the beginning of a design project, after you have received your client brief, the first thing you want to do is take a pencil out and sketch out a rough design on paper. This drawing highlights the key content areas of the website such as navigation, images, text areas, buttons and so on.

A wireframe is usually low fidelity as it requires the viewer to use their imagination in terms of visualising the final solution. A wireframe is the bare bones of a piece of work and provides a platform to build on for the project going forward. A well-designed wireframe allows the main content architecture to be laid out before a client. It offers an opportunity for scrutiny early doors, as it is always better to make a layout change in the beginning before the design becomes more complex and harder to alter.

At this point, we only care about defining what content will appear on the page and in what order. You may wish to digitalise your sketches using wireframing tools such as Balsamiq, Wireframe.CC and Mockflow. In general, wireframing tools are cheaper than their mockup and prototype counterparts. There are even some free tools that are more than capable of doing the job.

To view the full article, please check it out over at The Digital Den.

Image credit: Balsamiq Mockups