What is a wireframe?

4 March 2020

Once the sitemap is complete and before embarking on the creative phase of designing a website, it is crucial that proper thought is given to the structure and layout of the individual website pages.

Wireframes are the cornerstone of the UX or User Experience process, as they allow designers to produce a simple mock-up of how the website could look. These low-fidelity layouts, are deliberately sparse in regards to visual detailing and should ideally be presented in simple black & white or light colours. The reasoning behind this minimalist approach, is that all the focus needs to be on navigation (e.g. are the menu tabs in the right order), user journeys (e.g. can someone get from the homepage to service page in as few clicks as possible), the location of 'Calls to Action' (e.g. is it clear how someone could apply for a vacancy) and the overall hierarchy of features (e.g. should the case studies appear above or below the scroll).

Focus on what matters

Because wireframes are not intended to look anything like the finished design, they are incredibly useful when it comes to getting client feedback on specific things. Whereas when looking at a design, the conversation tends to drift towards colours, stying and imagery, with something presented in low-fidelity, the focus remains on what is really important. So a decision on whether the About Us section should include Meet the Team within a long scrolling parent page or instead have its own unique child page, can be discussed without getting sidetracked.

Quick to iterate

The other key advantage that wireframing offers, is the ability for them to be reviewed and iterated quickly based on feedback. So should the position of the logo need to change or a sub navigation need to be added in, this can all be achieved quickly and efficiently. Imagine this having to be done in a more traditional design package such as Adobe Photoshop - it would take so much longer and every back and forth conversation would exacerbate it further.

The best tool

Finally, many agencies like to use tools such as Axure, Balsamiq, Adobe XD and Sketch for creating wireframes, however we very much advocate the use of Webflow, as it perfectly aligns with our workflow. This is because Webflow shows users 'exactly' how something will not only be positioned on the page but also how it will function too - for instance the way that a hamburger menu will open on a mobile rather than being left to the imagination.