An Introduction to Website Wireframing

Good web design begins with sound planning and preparation. Before you build a website, you need to answer the big questions and identify the key pain points. That’s where website wireframing comes in.

Wireframing is a vital step in the web design process. Along with performing competitor research and building customer personas, wireframing gives you the chance to pin down the structure, layout and functionality of your website before the development phase – ensuring that the project goes smoothly and remains within budget.

If you’re unfamiliar with website wireframing, our guide provides a comprehensive introduction to the process. Use the links below to jump ahead or read on for the need-to-knows of wireframing.

Quick links

• What is a website wireframe?
• Why do you need to design a website wireframe?
• What’s the difference between a wireframe and a mock-up?
• How does information architecture affect wireframe design?
• 8 of the best website wireframing tools

What is a website wireframe?

A website wireframe is the blueprint of a site’s structure and functionality. Think of it like the plan for a new house, showing the layout, components and how each room will connect.

Wireframes contain three key elements: information architecture, navigation, and layout. Together, they create a map of how your site will look and function. Explore how these components affect your wireframe below.

• Information architecture – how the content of your site is organised to ensure a positive experience for the user. Defining information architecture is the first step in wireframing, and typically takes the form of a user flow or sitemap. This helps inform the project, making it easier to create effective wireframes.
• Navigation – the structure of your site, defining how users will move from page to page.
• Layout – how each page will look visually, with components and functionality highlighted.

There are two types of website wireframes: low fidelity and high fidelity. This relates to how much information, content and resource you’re able to put into the wireframes, and at which point in the design process you’re up to.

Low-fidelity wireframes present a rough layout of the website structure, with on-page elements staged as content blocks. They’re rarely used at the final stage of the design process, instead being used to gauge effectiveness and compare design variations.

High-fidelity wireframes present a much more refined and polished version of how a website will look and function. They are scaled, accurate and contain content and imagery which will be used in the final design. Close to a working prototype, hi-fi wireframes contain much of the detail required to proceed to the build stage.

Why do you need to design a website wireframe?

Building a wireframe is an essential part of the web design process. It gives a clear view of a website’s core design, structure and functionality, for complete transparency between teams and stakeholders.

There are several reasons why building wireframes is an essential step in the web design process, including:

• Provides a definitive view of content positioning, structure and design.
• Gives developers a clear view of the required functionality.
• Identifies pain points early on, so improvements can be made before launch.
• Gives UX designers an overview of how pages interact to improve and refine the user experience.
• Saves development resource, freeing up time and money for other areas.
• Gives key stakeholders a tangible impression of how a finished site will look, for efficient sign-off and collaboration.
• A cheaper and quicker way to design a website blueprint than creating a working prototype from scratch.

What’s the difference between a wireframe and a mock-up?

Thinking that wireframes sound like mock-ups? There is some crossover but also key differences, as we explain below.

Wireframes are the first step in designing a website. Both low-fidelity and high-fidelity wireframes are a culmination of ideas, structure, and some content; they’re a means of getting feedback and sign-off before further resource is invested in the project.

Mock-ups are different. These come after wireframes, often as the final design before the development stage. They contain content, imagery and typography which represent what the final site will look like – or at least a very close version of it.

It’s true that high-fidelity wireframes can be very close to a mock-up, but even here there are subtle differences. For example, where ‘lorem ipsum dolor sit’ content may be used on a wireframe, mock-ups contain finalised copy that is specifically designed and written within the parameters of a particular page.

High-fidelity wireframes become a final UI design when you apply branding colours, typography, imagery, and content on the wireframe – giving a definitive final look at how a site will look and function before development.

How does information architecture affect wireframe design?

Information architecture is the single biggest consideration at the wireframing stage. It defines every aspect of a website, from the content and page structure to the layout and navigation.

Think of information architecture as the substance of your website. It frames and influences every element of the design, dictating the structure of the site and how it’s organised for the user.

Information architecture affects your website wireframe in multiple ways, including:

• Hierarchy – most important at the top, least important at the bottom; that’s the essence of developing a website hierarchy. Your products and pages define the architecture and structure of the site, with a logical hierarchy to aid the user journey.
• Organisation – how is information displayed and organised on the page? And, how do pages relate to one another? Organisation is fundamental to good information architecture, and an effective wireframe.
• Sequential structure – remember, the purpose of any site is to lead users towards your conversion goal. Sequential structure is the process of defining how pages lead your customers along the conversion funnel, offering them the right information and content at the right time to drive conversions.
• Matrix structure – how do pages, features and products relate to each other? The matrix structure of your site is one of the most important elements, and can be tricky to get right. That’s why developing it at the wireframe stage can be so helpful.
• Navigation – the information you want to convey has the single biggest influence on the navigation of your website. What should you include in your navigation bar? And what influence does button placement have on user experience? All should be considered as part of the wireframing process.

8 of the best website wireframing tools

Wireframing can be difficult to master, and no business wants to spend time and resource on designing wireframes that are redundant, unhelpful or of little value to the project. There are, however, a variety of tools available to help you build effective website wireframes. We take a look at eight of the best below.

Figma

The go-to wireframing tool for Banc’s UX design specialists; Figma marries intuitive functionality with flexible file sharing and cloud-enabled collaboration. The programme is unique in that it runs on any web browser, on any operating system, making it ideal for multi-device teams and for sharing wireframes and mock-ups with third parties. Figma’s strength lies in its host of communication and collaboration options, which include full Slack integration.

Sketch

Considered a simpler alternative to Photoshop and Adobe XD, Sketch has piqued the interest of a lot of designers over the past few years thanks to its ease of use and powerful functionality. Those new to wireframing will pick up the basics with relative ease, with intuitive navigation, vector drawing and file sharing making for a simple introduction.

Miro

While Miro isn’t strictly a design tool, the platform’s combination of user experience research tools and design and ideation functions make it ideal for wireframing. Like Figma, Miro’s greatest assets lie in its host of collaboration features, with in-built brainstorming whiteboards and agile workflows that allow for simplified project management. For in-house teams looking for a basic do-all solution, Miro could be worth your time.

Wireframe.cc

Ideal for creating low-fidelity website wireframes, Wireframe.cc is a simple drawing tool that allows you to easily pin down the structural design of your website. Benefits include a super-minimal interface, drag-and-drop functionality and UI elements, which bring greater context and fluidity to each of your page wireframes. A free version is available with limited functionality, while pricing for a single user starts at $16/month.

Omnigraffle

Omnigraffle’s strength lies in its capacity to create comprehensive and highly visual flowcharts – perfect for mapping the information architecture of your site. It allows you to build multiple diagrams and charts in a single plain, so you can easily keep track of the hierarchical and sequential structure of your wireframes. It’s worth noting that Omnigraffle is designed for Mac and iOS systems only; an equivalent platform for Windows users is Microsoft Visio, which also excels in flowchart design.

Justinmind

Justinmind is unique in that it’s built solely with wireframing in mind. Users will have complete control over how their wireframes look, with advanced features suitable for creating both quick lo-fi designs and high-fidelity frames that bring the pages to life. The tool also provides a range of pre-installed UI widgets and kits, which are great for implementing sequential features and refining the user experience. A free, limited-functionality version is available, while professional tariffs start at $19/month.

Framer X

Speed, functionality and simplicity are at the core of Framer X – one of the best-respected wireframe and prototyping tools available. The best thing about Framer X is it supports interactive wireframe design, allowing you to see exactly how specific functions and components will work ahead of full development. Build realistic high-fidelity wireframes that bring your project closer to production, or develop a broad range of conceptual lo-fi designs which can be tweaked and amended in line with stakeholder requirements.

Adobe XD

The strength of Adobe XD is that it provides full wireframing and prototyping capabilities within Adobe’s accessible and recognisable platform. Easily picked up by those familiar with the Adobe system, it’s the go-to for designers looking to build accurate wireframes that bridge the gap between high-fidelity frames and development-ready mock-ups. Basic wireframes can also be created easily, with drag-and-drop functionality. Prices start at $9.99/month for a single app plan.

At Banc, our professional website design team build wireframes that meet your specifications, with a flexible approach that combines innovative processes and multi-stage development. For more information on how we can help build your perfect website, click here to learn more about our web design and development services or call our team now on 0345 459 0558.