Wireframing is the first stage of the web design process. If you’ve ever wondered how to wireframe a website, or if you want to know how to design a website and you’ve never heard of wireframing, keep reading because in this guide I want to share some advice and my wireframing process and how all my web design projects start.
The purpose of wireframing is to work in a really minimal way to start organising the information and start figuring out the flow of a page before you start thinking about colours and fonts and other visual things. Using the wireframe process we’ll be able to generate lots of ideas for different ways to arrange your website and be able to decide on the best one from there.
My web design skills improved since I started following a proper wireframing process so I wanted to share how I do it.
Before we start we need to know what content is going on the page you’re designing. Our job is to design the information so we need to know what information is going on the page, and the message we need to get across before we can start designing. That doesn’t mean we need to have the exact copy finalize, we just need to have a rough idea of what information is going on the page, what is about and how much of it is there.
Step one: Write a list
I like to write a list to start just so I have a reminder of what is going in my page and I am not forgetting anything.
I will start by listing what we want to be part of our design.
ex:
Header, bio info, footer, photos, social media links, search bar, a newsletter sign up, etc.
Step Two: Use pen and piece of paper and fold it into 8 sections.
A lot of people start wireframing on the computer, doing just grey boxes and using the default font but the second we find yourself trying to align things properly or get a box to be the exact right size, that’s when we’re focussed on those little details and we lose the flow and we are not just generating quick ideas. So sticking with just a pen and paper we can let ourselves be really messy and get our ideas out.
To start generating ideas I use a technique called “crazy 8’s” where we fold a piece of paper into 8 different sections and then do 8 different ideas for a wireframe as quickly as possible. We can draw as big or as small as we want. This works as a warm-up technique for our brain and it’s super interesting because sometimes we might think it’s only one way to arrange a page but when we’re forcing ourselves to think of more concepts we’ll be surprised at all the ideas we had just hiding in our minds. And we shouldn’t just limit ourselves with just 8, if we get going and find that we’ve more ideas coming, keep drawing. Drawing nicely is not the point. The more we do this, the more we’ll sort of develop a little key for ourselves, for example, a straight line could mean a headline, a box with a cross through it means a picture, etc. The point is that you got your ideas out, you know what it means and you’ve got a place to get started with your design.
Step Three: Analyse your sketches and pick out the best bits from each, or just the pieces you want to explore further.
We can look at our 8 concepts and put a little star next to the bits that we think might be worth exploring more.
Step Four: Put those pieces together in a new wireframe either sketched or on the computer to share for feedback.
We can draw a new mockup of all those bits together but generally, I’ll move onto the computer at this point. Mostly because I find it hard to draw neatly and I know that after this stage I’m going to want to show someone and get feedback on my design, so I like to make sure my designs can be understood by the people who will give me feedback. I like to use a program called Sketch to mockup my wireframes.
When I move on to the computer to lay it out, I’m still just going to use plain grey boxes and the default text, and the reason for this is because I don’t want the person who is critiquing this wireframe to think about anything other than the structure of this site. Using colours or proper icons or anything that remotely looks like it could be part of a finished visual design is just going to confuse everything. I just don’t make one wireframe in a sketch, I’ll make as many as I feel I have ideas for after combining through my favourite parts of this sketching process. After that, it’s a good idea to sleep on it at this point and come back to it the next day before you share for feedback or before you start on the visuals if it’s a personal project. That way you are going to be able to come back to it with a fresh mind and a fresh perspective before you move on to the next stage.
