What’s the difference between a wireframe, mockup and prototype?
How good is your understanding of digital design terminology? Wireframe vs mockup vs prototype?
A good website design project involves some key milestones and you might hear the design and development team talk about deliverables such as mockups, wireframes and prototypes. While these are similar, they are certainly not interchangeable and it will help the whole project run smoothly if everyone understands the terminology that’s being used.
What’s the difference?
Wireframe
Wireframing is all about functionality. A wireframe has a very specific purpose and is used not only to communicate the structure of information and main groups of content, but to give all the website stakeholders an overview of absolutely everything the website will contain.
Think of a wireframe as the architectural plans for your site, covering the navigation and the placing of all the elements your website will contain. Wireframes are constructed quickly and are generally just black and white. Wireframes can go through several reiterations as all the stakeholders work through what the website needs to do.
Mockup
This is often the pre-production design element that generates the greatest amount of debate because it’s often the first time you’ll see the visual design elements of the website come together using colour, typography and your brand’s visual identity.
A website mockup should give you an overall visual impression of what your website is going to look like. A mockup can either be done using design software like Photoshop, or in HTML and CSS.
Prototype
Prototyping involves creating a sample version of your site. A prototype won’t do everything that your website aims to do but an effective prototype should be able to show what is going to work – or not, from a UX design perspective. If your website project is going to include a user testing phase – you will need a prototype.
Do you need to use all of them?
This very much depends on the type of digital design work you are doing. And, it raises a key factor in a good client/agency relationship: agree on the key deliverables at the outset of the project.
If you’re expecting to see a wireframe before anything else, within 24 hours of your project brief, make sure you tell the design agency. Likewise, if an agency decides to skip the mockup phase and go straight from an approved wireframe to a prototype – inform the client that they should not expect to see one. All parties, from the client and project manager to the designer and developer need to have a very clear understanding of what to expect and what is being expected of you. These millstones and expectations should be mentioned in your web design contract.
What’s the best?
They’re all important for different stages of the digital design journey. Depending on the size, scope, timeframe and budget of your project, you may see all three of these items.
Clients need to be aware that mockups and prototypes take time to create. While it might be nice to see what the website will look like using a few different colour/style variations, be aware that these changes take time and that’s time that could be spent progressing your web design project further down the production pipeline and adding additional budget to your quote and project.
At iFactory, we use a combination of all three depending on your project – wireframes, prototypes and mockups – as part of our web site design and development process. It shows our clients that we’re listening and responding to their business needs – from the first initial meeting, throughout the design phase and at project handover. At every stage, our aim is to deliver reliable, best-practice digital solutions. For more information about our award-winning digital design work, contact us today.
