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.