Wireframing websites made simple
For some time now we have been creating black and white wireframes of web pages to help our clients plan & organise their websites content and features.
This process has helped us to:
- Reduce the number of detailed visual designs we produce, allowing us to really focus on individual components that can be shared across multiple web pages.
- Easily communicate what we're going to deliver
- Spot potential usability issues ahead of development
Whilst we believe creating wireframes is a must, it's not always plain sailing, especially when working with clients who are completely new to this process, and we sometimes encountered challenges.
Common challenges with wireframing
- Though faster than creating full visual designs, wireframing can eat up lots of time, especially if we find issues that take many revisions to fix
- Sometimes it's hard for clients to separate the wireframes and visual designs, leading to confusion when the final design doesn’t match up precisely
- Clients can over focus on wording and detail before user journeys have been defined
- It’s easy to overlook other devices and responsive states
Another problem with traditional site design is that there can be an over-reliance on drop-down navigation, cramming lots of choices into multi-tier menus and overwhelming users. This can make designers lazy when creating wireframes, and can cause them to ignore how users navigate from one piece of content to another.
Personally I prefer to design user interfaces without relying on drop-down menus to find content within the site, as this makes us think about the user's journeys through the website based on scenarios.
Working towards a better solution
The above issues have lead us to re-think the way we wireframe, to make it leaner, more transparent, and more effective. And to let us focus more on the entire user journey.
To date, we have been using "post-it on the wall" group sessions to map out web pages, which we have then turned into wireframes. This process is really constructive, and easy for customers to get involved in, and can help us build traditional wireframes more quickly. But it can still take lots of time, and is still focused on individual pages rather than the full user journey.
The solution is clear
After many attempts to simplify “visual wireframes”, we realised that the problem was the word “visual”.
Overall, what we’re looking for is less clutter, and more clarity. We need to strip back wireframes to their bare essentials, removing anything to do with layout, content, or visual elements. This will allow us and our customers to focus on user journeys throughout the site, not just on a single page.
That led us to come up with the idea of “linear wireframes”. Using these strippped down wireframes has helped us to identify and discuss important user journeys quickly and effectively in a number of recent projects, and we wanted to share our process with you.
Creating your first linear wireframe
For each page on your website add a title and an empty single column table with several empty rows.
Enter the following information in order of priority:
- Name of each content block (one per table row)
- Does the block have an primary call to action?
- Mark with a “>”
- Do any of the blocks have logical groupings?
- Use shading to show if there are any logical grouping in the content, such as items in a hero banner.
Here one we created recently for a website homepage:
|What we do / Hero|
|Partners (MSP/OEM) >|
|About the product >|
|Some case studies >|
|Working with… (logos)|
When you have completed this exercise for each page, print them out and review with the project team, to see if the user journeys within and between the pages work. We have found that it works best when we involve key stakeholders in these review, always being mindful of any personas and user scenarios you have created.
After the review, revise the linear mockups as necessary, and keep repeating until you’re all happy that the user journeys are right. WIth that done, you’re then ready to move onto detailed (traditional) mockups or visuals and the site build.
We’re always looking for better solutions
I’m sure we’ve not found the perfect wireframing solution, but it's fast, easy to grasp, and gives much greater clarity for us and our clients. There will definitely be pages & scenarios where more traditional wireframes also need to be created. But as a way to get started on discovering and analysing your site’s user journeys, linear wireframes can be a great addition to the designer’s toolkit.
We would love to know any thoughts you have on wireframing, and if you think our process might help your next web project, give us a call.