Building a new website is not something that just happens overnight - it’s a long process that requires a lot of thought and consideration given to things like the user experience for different types of users, the overall aesthetic, conversion rate potential and much more.
One of the most important parts of the website design process, arguably the most important part, is the planning stage.
Creating a wireframe or possibly even an interactive prototype of your new website is one of the best ways to lay out your content areas, think about the user journey from page to page and scope out clear pause or call to action points, all devoid of colour, images and graphics which are notorious distractions or the contentious elements of a build. In the following blog we will define what a website wireframe is, why it is so important, and what you need to consider when “drawing” one up.
What is a website wireframe?
A website wireframe is a schematic design which reduces the core layout and structure of a website into simple lines and shapes. It’s the bone structure of the website before as we like to say ‘the colouring in’ takes place with design choices on fonts, colours and imagery.
It’s purpose is to concentrate decisions on how content will be arranged on a page; how users will navigate from page to page via menus and in-content call to action areas; and what sort of content or functionality may be required (e.g images, videos, carousels, listings, forms etc.)
A wireframe is never concerned with anything to do with the visual style of the site, so as a skeletal design, it provides the necessary structure from which to add the design flair thereafter. Without it, websites become style over substance and in most cases will not achieve performance goals.
Why are wireframes important?
Website wireframes are a very important stage in the web design process for a variety of reasons.
Speed & efficiency
Wireframes allow you to map out the functionality of all your pages in simple line-based drawings which allow you to road test the basics.This means you can catch problems both earlier and more easily - saving valuable time on revisions later and preventing wasted design time. It is a much less arduous task to make changes to a wireframe than it is to a fully worked up design concept. Much in the same way as it would be harder and more costly to make changes to the design of a building when you’re already halfway through the construction.
Focuses on function, purpose and user experience
Wireframes also get you to think more deeply about the functionality of your website, and ensure that these decisions are considered and made much earlier in the design process. Early on it can be easy to get sidetracked and carried away by what you want your website to look like (it’s visual impact, imagery, topography and colour pallete). For many that’s where the magic happens, but a high performing website is more about its function than its visual appeal which is where wireframes make their mark.
A wireframe makes you consider how the website will workIt forces you to think about the different elements of the page (the content blocks), the purpose for their inclusion and how they will interact with each other.
What should I make my wireframes in?
Since wireframes can vary in detail and design, it is quite common for them to simply be hand drawn as a sketch on paper or maybe a whiteboard. As well as this, wireframes are often put together using software like Adobe Illustrator or Photoshop or Balsamiq, to provide an on-screen delivery.
However, if the wireframes are going to be used for a prototype usability test, it is best to use a more sophisticated tool which allows for interactivity and possibly collaboration.. There is some great software out there that allows you to do this easily including Axure RP or, for Mac users, Omnigraffle. We have adopted Figma for it’s real-time collaborative approach and ability to consider responsive designs.
What are the different types of wireframe?
There are three main categories of wireframe that you are likely to see or use in the web design process: low fidelity wireframes, medium fidelity wireframes and high fidelity mock-ups, each with their own pros and cons.
Low fidelity wireframes
Low fidelity wireframes are the ones with the lowest level of detail. They contain very rough layouts of the screens and pages of the website, with little to no detail on the specifics of the layout or the content, and no sense of scale, grid or pixel accuracy. Low fidelity wireframes are most useful in web design projects where you have several potential structural concepts, and want to quickly share all of them with the team, in the earliest stages of planning.
Medium fidelity wireframes
Medium fidelity wireframes are ones with a decent level of detail. They contain more accurate depictions of the layout of the pages, and more detail is given to specific components of the pages, for example, to features, buttons and links, but final images and style choices are still avoided. Medium fidelity wireframes are most useful when your team has already agreed upon the purpose of a page, but the specific components like layout and content still need discussing. They are also most useful when you want to develop and present a more richly defined idea, before getting too caught up in some of the finer details.
High fidelity mock-ups
High fidelity mock-ups are the least pure form of wireframe as they contain the highest level of detail and start to bring in visual design elements. They contain pixel-specific page layouts, often using an accurate grid system, complete with real images, typography styles and colour choices, as well as utilising placeholder text. High fidelity mock-ups and interactive prototypes are the most comprehensive plan of the three, and are best used in the later stages of planning.
To conclude, and summarise... wireframes are a very important part of the website design process, allowing you to map out the basic functionality and layout of your new website’s skeleton before thinking about the aesthetics and overall design.
There are different types of website wireframe with some more suited to different stages of the planning process with each of them having their strengths and weaknesses.
Finally, you can grab a pen and paper and sketch out your wireframe or you can take advantage of some of the many web design tools for UX, wireframing and interactive prototyping that are available. As we’ve already said, our personal fave right now is Figma, go check it out!
