The Importance of Wireframes in Web Design
Designing a website or application is a daunting prospect. So much can go wrong along the way, which is why it is often a surprise that websites are built without any consideration to very fundamental aspects of the design and layout.
Read on, and I will try to convince you why building a set of wireframes is a solid investment.
Why design a wireframe?
Personally, and I can’t speak for everyone here, but I would be pretty worried if I hired builders to build me a house without any sort of plan, or even foundations. I’d end up with windows and plumbing supplies all over the shop.
It sounds a bit preachy, but that’s pretty much the same as building a website without considering the foundations first – you end up with a poorly designed mess that never suits purpose.
Clients may be worried at first that there is an extra cost that appears to be going to building a page with a bunch of grey boxes on it. I completely understand. I’d be worried too, but don’t be – grab a cup of tea, read on, and I’ll try to ease your fears.
Types of Wireframes
There are 3 types of wireframes, ‘Low-fidelity’, ‘Mid-fidelity’ and
‘High-fidelity’.
Low-Fidelity Wireframes
This type of wireframe provides the most basic view of what the final
website will look like, whilst taking into consideration text areas, image
areas, and ensures a good user experience from
the start.
- Very basic, mainly grey blocks
- Basic layout
- Image locations
- Text areas
- Leaves a lot of details to the imagination
Mid-Fidelity Wireframes
This wireframe takes a low-fidelity wireframe to the next stage, we start to include more details, maybe information such as social media links, or adding in the navigation. This stage should only happen once the low-fidelity wireframe is approved across the board, from the client, designers and developers.
- More detail, still leaves colours and aesthetic to the imagination.
- Additions of user interface patterns, such as log in forms or tabbed
navigation.
High-Fidelity Wireframes
This is it, all that hard work designing low and mid wireframes has led to this. I’ll start by saying that most designers won’t bother with a high-fidelity wireframe as you may as well start building the website at this stage – however I will include it for completeness. I’m nice like that.
- High details
- Many colours are included
- All copy is included
- Very similar to the finished product.
Designer Tools
There are many tools designers use to build wireframes, online tools such as Balsamiq, Mockingbird and InVision. However, at Canvas Digital, we use
a combination of Photoshop, Illustrator and Sketch (ask Adam about Sketch, he loves it).
Right. Got it? So it’s a bunch of grey blocks?
Well to an extent, but it’s also layout, content, user experience, mobile experience and interface.
Vitally, and this really cannot be stressed enough – changing any elements at this stage is quick and cheap. Jump straight to design and any changes are going to be time consuming and costly.
In short, those grey blocks are going to save you so much time in the long run. Why not give us a ring if you’ve got any more questions, we’re more than happy to chat.
