What are wireframes?

If you are unfamiliar with how digital designers work, wireframes might just look like a series of grey boxes with some random text dotted around. They can sometimes be as simple as a hand-drawn sketch on a piece of paper, or a drawing on a whiteboard, but you’re most likely to see them as low fidelity (simple) or high fidelity (more designed) digital designs. 

They are in fact a super important ingredient when designing a successful user experience for a digital product and they act as a kind of skeleton structure for your site. We use wireframes to plan out what type of content will sit where on a page, based on how important each piece of information is. The content and functionality is mapped out, taking into account all the work we’ve done to define our users’ needs and the journeys we need to create for them. Think of letting a builder and an interior designer loose in your new house to knock down a few walls and start painting without first thinking about how the space needs to work for you with an architect and having plans drawn up. You wouldn’t expect the end result to be good, or to work for you and you’d probably just want to start again. 

What’s good about wireframes?

Because wireframes provide a map of how each page will be structured they allow us to look at the site structure with clients, and test journeys with users, changing things based on feedback, long before that becomes really costly. It’s much quicker and cheaper to change wireframes than it is to start messing with high fidelity designs or fully built products!

What’s tricky about wireframes?

We often find that for people who don’t regularly work with wireframes it can be difficult to remember that they aren’t showing you how the final page will actually look. They’re showing you the layout, mapping out content and functionality, page by page. It can be difficult to get sign-off on the page structure without getting distracted and talking about the visual design. Testing with users can also be tricky for the same reasons so it only gets you so far. There will be things the visual design and the words will do that will help users find what they’re looking for that won’t be added until the next phase. It’s sometimes hard to find your way around a prototype that’s made up of only grey boxes.

Why we use wireframes?

We use wireframes early in projects to make sure we’ve planned out how we’ll meet all the users’ needs and the business’ needs that we identified in the discovery phase. If we can get things right at the wireframe stage it saves time and money later on in the project because we don’t have to change things when it’s harder to make changes. It’s also really helpful for the development team to have this to refer to as the project goes along – a map of the core structure and functionality of the site. Everyone needs a map to get where they’re going after all.

If you’d like to talk to us about how we design websites, apps, prototypes or anything else just get in touch.