Today I'm in a bit of a different set-up from my usual, because I want to take you through
the first stage of the web design process which is wireframing.
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 worrying about
things like the fonts and the colours and making everything pixel perfect.
With wireframing you allow yourself to work really quickly and generate lots of ideas
and my web design skills have definitely improved a lot since I started following a proper wireframing
process, so today I want to teach you how I do it.
I always start my wireframing using just a pen and a piece of paper.
you could start on the computer and a lot of people do, doing just grey boxes and using
the default font but the second you find yourself trying to align things properly or get a box
to be the exact right size, that's when you're focussed on those little details and you lose
the flow and you're not just generating quick ideas.
So sticking with just a pen and paper I can let myself be really messy and get my ideas
out.
Before you start you need to know what content is going on the page you're designing, I can't
stress that enough.
Your job is to design the information so you need to know what information is going on
the page that you need to get across before you can start designing.
That doesn't mean you need to have the exact copy finalised, you just need to have a rough
idea of what information is going on the page, what it's about and how much of it there is.
Now for this video I'm going to use the example of a blog design because I want to redesign
the homepage of my blog.
So i know that on it I am going to have a header, bio info, a footer, photos and titles
for each post, maybe a blurb to go along with that maybe not, social media links, a search
bar and a newsletter signup and I think also a popular posts section.
I like to write a list like this to start just so I have a reminder of whats going on
my page out in front of me and I'm not forgetting anything.
If I'm working on a marketing design site then I'll generally have a Google doc open
on my computer next to me with the rough copy on it from the copywriter.
To start generating ideas I use a technique that an old workmate taught me which he called
'crazy 8's' where you fold a piece of paper into 8 different sections and then do 8 different
ideas for a wireframe as quickly as possible.
You can draw as big or as small as you want, whatever works best for you.
Sometimes i might do four on this side and then four on this side if it's a particularly
long page.
This works as a warm up technique for your brain, and I always find it fascinating because
I start off thinking there is just one obvious way I want to arrange everything, but when
you're forcing yourself to think of more and more concepts you'll be surprised at all the
ideas you had just hiding in your mind.
And you shouldn't limit yourself to just 8 as well.
If you get going and find that you've got more and more ideas coming, keep drawing and
get them all out.
As you can see when I'm drawing I'm really messy, and that doesn't matter one bit.
Drawing nicely is not the point.
The more you do this, the more you'll sort of develop a little key for yourself, like
for me, a straight line like this one here means a headline and then squiggly ones mean
body copy.
A box with a cross through it means a picture and little circles mean icons.
It really doesn't matter if it looks like a child drew it to anyone else, the point
is that you've got your ideas out, you know what it means and you've got a place to get
started with your design.
After this phase I will look at my 8 concepts and put a little star next to the bits that
I think might be worth exploring more.
Sometimes I will then go and 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 they're going to have to be
able to understand it as well.
I like to use a program called Sketch to mock up my wireframes.
I have done a whole video actually about what design software I use for what purpose so
I'll like to that down below.
even though I have some idea now of how I want t arrange the information on my page,
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 the 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 don't just make one wireframe in Sketch, I'll make as many as I feel I have ideas for
after combing 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're 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.
So that is my wireframing process and that is how all of my web design projects start.
Let me know down in the comments if you've got any questions for me on it.
and please make sure you give this video a thumbs up if you found it useful.
I'm absolutely loving making design videos like this at the moment, so if you like them
as well and you haven't already, please hit subscribe and I will see you next time.
bye.