Why do we wireframe?
Why do we wireframe? What’s the point? Why shouldn’t I just start designing now?
In this page, I will tell you exactly why wireframing is super important and almost critical. Wireframing is not about the drawings themselves, but self-actualization process for what your priorities are. For example, which of your works are most important? What is your site exactly about? What’s the immediate reaction you want from your users? How do you want the pages to connect to each other? What are the best methods for creating wireframes?
Whatever your final wireframes are, I guarantee that it will change once you start actually implementing them. This does not mean the process was futile, and in this page, I will explain why.
This guy just started designing and didn't wireframe
This guy wireframed
1. Filtering your ideas
You have tons of thoughts and ideas swimming through your head, and now they will be tested in the real world! Many are bad ideas, and it's a little shocking to the system when you find out. But also, many will be good, and wireframing is the filtration process that lets you flush them out. Let loose, draw and write all sorts of ideas you have in there. The goal is that by the end of the process, you will know exactly what will work for your site, and what won’t. Leave no stone unturned.
She's wondering whether a large header is a good idea
She knows she wants just a few big photos on her site
2. Get a better picture for your clients
If you are working with clients, a great way to learn more about what they really want is through the wireframe process. Clients always withhold key pieces of information (unconsciously) that they forgot to mention. Most of the time, they need to see the site as a mockup to get them triggered to express the ideas they really wanted. Wireframing allows them to dispense their true desires without you having to actually design anything yet (or getting into intense discussions with them). It will save you a lot of time. For example, the client may really want a big map. But for some reason, never mentioned it to you when describing the site. If you designed the site without knowing this, you’ve got a lot more unnecessary work now.
3. Feeling like they’re part of the process
Usually, clients love feeling like they are part of the process. They usually want to prove that they are creatives too. Some of them even think they know more than you (I had a client say they knew more about art than me because they were Italian!), wireframes give them the illusion of control. It gives them the satisfaction of the process without wasting your time. If you don’t show your clients wireframes, and just show them final mockups, there is a high chance the client will ask you to do drastic changes. And because its a mockup, it will take a lot of time. Also, you haven’t come up with consistent rules, so you are lost when you have to create new pages.
3. Obsessed with visuals
Clients and yes, even you (and me) really love visuals. It’s in our nature. But imagine designing a building that looks really cool without the blueprints. There is a high chance the building will collapse, just like your site. You have to know the boundaries of what you can work with before you start mocking it up.
When it comes to clients, it's a huge benefit to get them to think about the site in a logistical way. The second you show them a picture, or even color text, they won’t think about the logistics of the site. They’ll talk to you for hours about what color the logo should be (this has really happened to me). Wireframes are a great way to dodge all this.
4. Ego Killer
Wireframes are huge ego killers for clients. Some clients have huge egos who think they know more than you. The second they do the wireframe process, they realize they know nothing and hate feeling stupid. It’s a great way to get them to back off and let you do your job.
5. Rules
The most important thing about wireframing is coming up with the rules and guidelines of your site. How big is the text? What are the sizes of the pictures? What are the distances between the elements? etc. It's not just about making one page work, but all the pages work no matter how different the content is on each page. Once you figure this out, you can design the site with a blindfold on (don’t try this).
How to start
1. Know your elements
Lines
Text
Images
Buttons
The elements in of themselves are simple. Organizing them into specific guidelines and rules are a different story.
2. Draw micro wireframes
This is a way to get some ideas flowing. I recommend drawing at least 10 of these mini wireframes of the main pages before getting started with the software. This can be done on a whiteboard, piece of paper, even a napkin.
3. Choose software
There are tons of different options out there. Some prefer Sketch, Figma, Illustrator, Balsamiq. The differences are in usability and skill level. At the end of the day, the principles and directions given in this article will apply to all forms of wireframing tools.
The average user finds Sketch the easiest to use, and it is. Personally, I prefer Illustrator for a variety of reasons. Yes, it is harder, but that is because it has way more creative flexibility. For example, in Sketch, when you design, the software won’t give you 100% freedom with how you move the elements. It gives you the set distances automatically. This actually isn’t good for design because many times in design, the correct distance is not the consistent one.
4. Don't be afraid
The most difficult thing is to just get started. You will draw a few things, see how ugly it is, and throw your hands in the air and go to the beach. The beginning is always ugly and frustrating. Just keep pushing through, you're not worse than anyone else, it's just the process. Don't let it intimidate you, and have fun!