You may have heard the term ‘wireframe’ be bounced a bit when talking to your web designer/developer, but all you can picture is chicken coop wire. You nod your head in agreement and go ‘Yup, sure! That seems good. Let’s just jump straight to the pretty stuff!”
Now let’s stop time for a moment and take a deep breath before we go on any further. *exhales*
So what is a wireframe?
A wireframe, is the barebones and skeleton of a website (or app), drawn with basic shapes and lines with very limited colour and styling. Wireframes are heavily used in prototyping by User Experience and User Interface designers, and is a quick and easy way to sketch out a design to see how it will function before filling in the gaps with all the pretty stuff. It’s pretty common for designers who conduct the wireframing process to do this with pen/pencil on paper during client meetings; when discussing ideas for the website, you can instantly see the structure of the website.
Here’s an example of a basic wireframe that I’d done for a client. The client wanted to introduce a ‘Resources’ section to their existing website, but wasn’t sure how it was supposed to appear on the website.
* Think of a wireframe like the blueprint design of your house. You can’t really build a house without a plan and decorate it with wallpaper without knowing how many rooms you have or how big each room will be.
** This wireframe example is also supeerrrr basic which I drew it up in 2 minutes. Obviously there can be more detail, but the client already knew where the menu navigation was and what was already in the footer, so we skipped that part because it wasn’t the primary focus.
Okayyy, I know what a wireframe looks like now. But what’s the point of it?
Good question. Us humans are very visual people and of course, we like to see pretty (shiny) things, because first impressions matter right? Almost.
As I briefly mentioned before, wireframes are used to see the proposed structure of the website and to understand how the site will function. This of course ties in with the purpose of the site, such as if your site is going to be used to increase traffic and conversions or if your site is purely going to be used for brand exposure. Wireframes have the ability to give you the clarity that you need.
It’s easy to get distracted with how something works by the aesthetics that’s layered on top, so by stripping away the pretty stuff, you can then solely focus on the functionality and usability of the site. This also helps one realise what is or isn’t necessary with the design, so that the overall site can aid with your desired goal.
If there are any issues or concerns that come up along the way during this stage, it’s also much easier and cost-effective to rectify them, rather than later one when your site is in development.
Right. Gotcha. So why do I need to sit through this again? Can’t I just trust my designer/developer?
It’s a good idea to sit through this process so that you are able to have a deeper understanding on how your website will work for you and your business. A pretty site is obviously nice, but if the website doesn’t function the way it is intended to, then it not going to do its job, no matter how pretty it is.