Why Wireframe a Website

Leah ClarkeWeb Design

Do you need a website wireframe, mock-up or prototype?

So you’re looking to build a new website and developers are talking about wireframes, mock-ups and prototypes. But what exactly are they and which type do you need, if any?

When it comes to building a website best practice denotes that us designers should test the usability of a site before we get into the nitty gritty of coding. Marrying the backend of a website to its user interface can take time and expertise. So it makes sense to design the front end or user interface first and test to see if it meets the expectations and needs of its users. That’s where wireframing, mock ups and prototypes come into play. Basically there all ways of staging a website before production, but they’re all a little different. Which means they give different results and suit different clients and budgets. So let’s take a look at each to get an idea of what might suit you.

Wireframe

A wireframe is a low-cost way of showing a design. It provides a basic visualisation of high-level design concepts, with the purpose testing functionality rather than visual appearance. So basically it’s a map-like representation of a website or app that shows the essential elements and layout. It’s a little like the blueprint of a building. It helps you visualise the concept and see if it works before investing too much time and money.

Putting together a wireframe design can be as simple as taking pen to paper and drawing the key functionality of a website. For small business websites this often enough and it’s a great way to keep costs down. As an organisation grows however it usually becomes more complex which translates to a more complex website. So it follows that for medium to large businesses, quality web design should always be proceeded with wireframe designs at a minimum.

At The Web Composer we use dedicated software to draw website outlines and communicate the basic layout structure of a website. It allows clients to visualise their users’ experience before they invest in the full site. No matter how sensational a website looks, if it’s not intuitive and easy to navigate it can turn would-be clients away. Time wasting websites just don’t cut it!

So a wireframe is like a skeleton, you won’t see all the design elements such as colour, balance, pattern and so on, but you’re not meant to. These can distract you from the underlying essential: functionality. Form must never come at the cost of function.

Mock-Ups

A mock-up of a website goes one step further than a wireframe. Like a wireframe, it gives you a map of functionality, but it goes a little further by introducing design elements such as colour, typography and style. What a mock up doesn’t do is enable you click through to different pages. It will show you how a website will look like but you won’t be able to explore it by clicking links and there is no functionality. Mock-ups give you the opportunity to experiment with different looks for your website without spending time and money on coding. Mock-ups will always be created using design software and are usually more time consuming for designers to create than wireframes. So it follows that highly cost conscious clients may prefer a wireframe visualisation of their website to ascertain user experience.

Prototypes

A prototype is a higher level representation of a final digital product. It is more than a mock-up in that it simulates user interaction on the site or app. That means that the links on a prototype are clickable and allow the tester to experience the journey through the interface in the same way an end user would. Essentially, a prototype is a lot like the final product only it is not meshed to the backend. For example, it won’t collect data or carry out different functions. Its intention is to reduce development costs until the user interface has been approved by all stakeholders. Usually this type of staging is employed by larger or more complex organisations where multiple stakeholders are responsible for approving the development of a site or app.

So how you test the user experience of website or app design can depend on your organisation’s size, budget, number of stakeholders and even time constraints. Remember it can be as simple as a sketch mapping out key design elements or as complex as a prototype which is not far off the final product.