Wireframing is a term well recognised amongst website and UX designers alike. This is one of the first stages in website design and you could argue - one of the most important stages in the process. Wireframes were traditionally sketched (and sometimes still are!), however nowadays, they are often created using software such as Adobe XD.
![]()
What are wireframes exactly?
Think of a website designer creating a website with out wireframes, the same as you would an architect building a house without blue prints. The wireframes are the key to everything. Wireframes are basic concepts of web pages, that map out where all the content areas, interactions and call to actions should display. Having these mapped out, enables you to assess how one or multiple pages come together, and then effectively step through the user journey to ensure that they are seeing the right content, at the right time. Effectively, wireframes are the plan to making sure your website works, before it looks great. If the wireframe is weak, then no matter how the strong the designed, visual elements are that sit on top, the website will always have that element of weakness to it.
Things to remember when creating wireframes:
- Keep distractions to a minimum. The purpose is to focus on the structure and layout of content, not the aesthetics of the page - design will come later. So avoid using colour, branded fonts and imagery, and instead use shades of grey, Helvetica font and placeholders. It's important to know which sections will have reversed colour etc, as this will impact hierarchy and the flow of the page - just don't go in to distracting detail.
- Use as much accurate content as possible. This will enable you to weigh up if you need more or less content on a page. Be careful though - accurate content can sometimes be another form of distraction (especially if people are spell checking as they go through). Whilst accurate content is a good thing as this stage - if you find it's becoming a distraction, use placeholder text to gauge content volume on a page. Then ensure your headings and call to actions are accurate, so you can still visualise key words throughout the page.
- Though you're not designing or thinking about heading styles at this point, it's still good to have a heading hierarchy in place. So know what your H1s, H2s, H3s and H4s are. This will also help with the hierarchy of your content - which has a big impact on usability.
- Always consider what happens before AND after a user interacts with something. Is there an alternative state to an element? Knowing these now, can answer many questions later down the line.
![]()
Why create wireframes?
- First and foremost, so you can step through the user journey. Checking along the way that the right content is being presented at the right time. Can the user get to a conversion point quickly?
- So you can see elements that work on a page and those that don't. It's important to constantly look at the bigger picture (i.e. the full page or website) rather than just a section. Wireframes allow you to see clearly the space you have available to you, but also the hierarchy that the content needs to follow. Does the layout of content and elements make sense, or cause confusion?
- Wireframes allow you to iron out and catch any issues or possible problems early on. This saves time and the need for revisions later on in the process, especially when it comes to the handover to your developer.
- They give you an idea for content volume, and the sooner you understand this, the better. Many people under-estimate the task of content creation for a new site. Wireframes set this expectation early on.
![]()
Good vs bad examples:
Header:
A key area for usability, and often one of the main starting points of a user journey. This isn't something that should be figured out along the way, so the content should be as accurate as possible here.
![]()
Form:
A key interaction, and often the most popular type of 'call to action' for converting a user. Think about the information you want to collect from the user. Factor in not only what you need, but what will the user be willing to fill out? The form should be as short and appealing as possible - this is where layout and positioning can make a big difference to a user.
![]()
Content:
Having an idea of accurate content for the website you are designing is often under-estimated. If you don't have word for word content yet, use placeholder, so you can still determine volume. Don't focus on the design elements and colours at this stage as this can often be distracting.
![]()
A final word...
Wireframes are super, super important. It's where lots of the thinking happens, where a lot of the questions are asked and hopefully - where a lot of the questions are answered too! Until these questions are answered, the project shouldn't really be progressing into design or development. Having said that, it is acceptable for the wireframes to need amending later on down the line. Sometimes it can't be avoided and that's ok. Just make sure that when you make a change, you're aware of the potential wider impact it may be having.
Need help with your website?
We know what we're talking about when it comes to websites. Head over to web design page to see what we can do. If you already have a website - we offer website support too!
