During my early days as a digital designer, the word ‘wireframes’ meant very little to me. I used to wonder what was the purpose of designing something without anything visually stimulating to sell to the client? Why create something that will need to be redone again but with colour and images? How naive I was…
Nearly 10 years on, not a website or app goes by where I don’t start with some sort of wireframe, whether that be low or high-fidelity, or both. So, what is the difference between low and high-fidelity wireframes?
Well, like most things in life, there are numerous definitions and opinions on the matter, but from my personal experience and for the purpose of this article, low-fidelity wireframes refer to quick and cost-effective “sketches” used to define structure and hierarchy, a sort of brain dump in a visual format. While high-fidelity wireframes are more polished versions, generally taking a lot longer to create, potentially containing accurate content or data, while being more visually to scale. High-fidelity wireframes are created in specific software, tailored for creating wireframes.
So, now we got that out the way, I would like to dive into some questions I generally get asked in regards to wireframes.
Should I always do wireframes, even on small sites?
Yes, if you are designing a website, you should always have a base to start with, even if that’s only a low-fidelity wireframe. A quick 5-minute sketch and brain dump will help you work out right away if your ideas will or won’t work, or just need some tweaking. One of the most frustrating things as a designer is spending all this time creating a design, to work out it won’t function or look as you thought it would. So, if a 5-minute sketch can potentially save hours, I think it is well worth it.
Should I show my clients my sketched wireframes?
That is a tricky one… If you have created some quick sketches that are used more to aid yourself and don’t look very slick and professional, I think you are better off keeping them to yourself, as opposed to sending them off to a client. If, however, you are in a meeting with them, I always find it useful to do a few quick sketches and show the client and get some early feedback.
Sometimes I get stuck on my wireframes, any suggestions?
We have all been there… staring at a screen for what feels like hours, struggling to come up with an idea. Sometimes the best thing you can do is just step away and do something else. Generally, I find that when I am stuck, the solution comes to me when I am not thinking about it. Also, always have a pen and pad next to your bed, so many great ideas have come to me in the middle of the night.
What programs should I use?
When first starting out, Adobe Photoshop was the program I used (mainly because I already knew it and thought it would be good enough). However, as time has passed on and my wireframes became more complex, I opted for programs that allowed me to not only wireframe but also to prototype. Currently, there are two programs that I use, Axure RP and Adobe XD.
So back to my original question, are wireframes a waste of time? Well, think of it this way – would you build a house without a floorplan? No, obviously not.
If you want a website or an app that is logically thought-out, abides by correct UX patterns and ultimately functions as it should, not only are wireframes important, but essential for the success of the project.