- Hey designers, today I wanna talk to you about
a really important part of my Web design process,
and that is, wireframing.
Wireframing is the first step in my design process.
And it's a time when you're figuring out what the structure
of the page is gonna be
and how you're gonna organize the content.
In the wireframing stage,
we don't worry about things being perfect,
we don't worry about them even being the right color
or shape or anything like that.
It's all about the organization of the information,
and figuring out what the basic flow
for a page is going to be.
There's two stages to my wireframing process.
First, I like to sketch by hand,
quite rapidly, very messily, as you'll see,
to get my ideas out.
And then I move on to the computer and will mock-up a design
with gray boxes to signify different things.
So I'm gonna show you a little overview
of both steps in that process.
I really do like starting out with sketching though,
and I do always tend to do that
before I open up a new Figma File,
when I'm starting a new Web design project.
I just find that when you can sketch your ideas,
you can get ideas out more rapidly,
and encourage yourself to think about
new and innovative ways to arrange things.
It's because it is so much quicker to quickly sketch
an idea, than it is to be mopping it up on a computer.
So I used to use a pen and paper
for this step in the process.
These days, I use my iPad Pro, Apple Pencil
and an app called Concepts,
which I use basically because it has an unlimited canvas.
So I'm not confined to the edges of a page,
be it physical or digital.
I can just keep sketching and just always move
the page along to get more ideas out
and there's nothing that interrupts that flow.
I also just really like that I can come on my iPad
and look back at all my old wireframes too.
And I'm not having to keep paper organized everywhere.
So let's get into it,
and let me show you how I wireframe a website.
(upbeat music)
So this is concepts as you can see,
I have like a lot of my past wireframes in here,
which is handy for me to refer back to,
but I'm just gonna click this plus icon
and start a new file.
Really what I'm doing with this app
is mimicking the pen and paper that I used to use,
but just in digital form 'cause it's more convenient.
So there's a lot of fancy functions
and like I don't know different cool colors
and things you can have in Concepts.
But I just use a plain black marker on a white background,
and that's how I get things done.
So you can just draw the Apple Pencil and double tap
to remove something, which is very handy.
That's a quick flight concepts overview,
but let's get into the wireframe.
So something that I always wanna have in mind
when I'm wireframing,
is the content that needs to go on the page.
I've talked about this before that you don't need
copy before you start designing web.
So you don't need to know exactly what it's gonna say.
But you do need to know what types of information
you're trying to communicate.
Right now I'm gonna do a wireframe for a sales page
that I'll designing to sell my font,
which is coming up very soon.
May even be out already by the time this video comes out.
So I'll leave the link to more information
about that in the description.
So on this page, I know I need to have images of the font,
I know need to have a description,
I like a little background information.
Like how I spell today for some reason.
There's gonna be two different versions of the font,
to purchase, so there's like, purchase info.
Bonus info, because in one of the packets,
I'm gonna be giving away some vectors as well.
Yeah, it's a pretty basic page.
But the buy now,
is the most important co-direction for the page.
So as you might already be able to tell from the fact
that you can't read my handwriting right here,
the goal with wireframing is not to be neat.
I'm just rapidly gonna be getting ideas out.
So I'm just warning you,
you're about to see some absolutely terrible drawing.
I always start by just drawing a box.
And then I'm thinking I'm looking down this list here,
and I'm thinking about how I'll put these on the page.
And I don't wanna overthink at this stage with wireframing.
You just wanna go with your gut.
Like how do you think you'd arrange this information,
for the first one anyway.
So let me just quickly put this in.
(upbeat music)
There we have my first wireframe.
So this was what my gut said
as the main way to arrange this information.
And this might not make sense to you.
And that's okay because your wireframe
is about you figuring out your ideas.
But, if you want a quick rundown of what these pieces are,
before we move into the next stage,
this is my navigation here.
That's what that means to me anyway.
This is like a title with a description underneath.
This is the images, the example images,
and I've decided that maybe that'd be a carousel.
This is two blocks for the purchasing
the standard and pro version of my font.
And there's a little bit more text,
and ending with an image of the bonus.
But I never just wanna go blindly with my first idea.
The wireframing process is there to help you break through,
the perhaps cliches and obvious ways to arrange things,
and try and come up with some new and interesting
ways to do things.
So now I'm just going to quickly, as quick as I can
get out five different versions
of how I could arrange this information on the page.
Let's go.
(upbeat music)
I don't think it's important that you understand
exactly what these things are,
but to give you some pointers
for what I was thinking about as I was going through them.
So my original, my gut said,
just to have like a carousel with the images.
So for the next one, I thought,
what if we make a big feature and like the headline
uses the font itself, and it's really large.
One thing that I've kept consistent
throughout these wireframes is this little notch here
being my navigation,
'cause I want that to be the same sitewide.
Then I thought maybe this is like a thing taking over
the full height of the header,
like much more impactful than having
this small image over on the side.
Then we'd have some information and one image and then some,
like other images sort of as a divider
in the page very next to each other,
'cause I've got these sort of mock-ups of my font.
And then the two pricing blocks is very similar
to what you saw in the first one.
But with the key difference being maybe the pro version
will extend a bit lower.
Was my idea that I had here and I was trying to get across.
This next version showed the side, the right hand side
being just image after image as you scroll down the page,
and with all information being over here on the left
with the standard and in the pro underneath.
Then in this version,
I had the idea of having just lots of big images.
So image at the header,
which is kind of similar to what I did over here as well.
But then we'd have another big image with a block on top
for some copy another big image with block on top
to point out different live features of the font.
Then the two things at the bottom,
And then I noticed as I was going through this,
that I wasn't really forcing myself to think outside the box
for these two blocks,
I was just gonna have like standard,
and then pro with a buy now button.
And so I was like,
okay, I need to be coming up with a different idea for that.
'Cause I don't want it to settle on the same thing.
The point of wireframing is to come up with different ways
to arrange the information and different like,
ways that information could look
and hold the space on the page.
So here, I've gone back to a carousel,
but kind of got a cutting a divider on the page,
which matches what I have on my home page.
And then for the standard and pro boxes and serving boxes,
they could be just columns on the page with check marks,
pointing out different features
and highlighting the differences between
the standard version and the pro version.
And then in this last version here,
I thought instead of having a clear divider of the header
that I've done on most of these things,
it could all just be one block color on the page.
And instead we're gonna have an image within pointing out
a feature of the font that that image displays.
So this is the way that I talk about
instead of having a big block of copy for the description,
I'm having smaller pieces, but they like,
have a visual accompanying me talking
about each particular point.
And then it's another way to innovate on these two blocks,
I thought perhaps, is just even a drop down
where you select standard or pro,
and I'm not going to the details on this page
of the difference between them, that could be an option.
So there I have it.
I just spent a couple of minutes
and got out a bunch of different ideas
for how I could design the sales page for my font.
If I just gone with my gut,
I would have just had this first version.
But I think there's a lot of things in these other versions
that I quickly came up with
that are worth exploring further.
And this is how we can push us off as designers,
and how we can get better at what we do,
and create more innovative ideas.
What I like to do after I'm done with a wireframing session,
usually honestly I would keep going for longer than this,
but for the sake of the video,
I won't make you sit through that.
Now I wanna put a little mark next to which ideas
I feel like I wanna take from here
and move on to the computer.
What do I want to move further with?
I really like this idea of having a big header space.
So I'm gonna put a star there.
I also like the idea of having the pro block come down
further than the standard one.
I like these check marks idea too.
I think I also like this header,
because it kinda matches with my homepage.
And I like this idea, this whole page.
Actually, I'm gonna put the star at the top
of pointing out different pieces of the font.
So there's a lot of parts that I like about this.
And what I'll do next is sort of take my favorite things
from the design, maybe even this block here too,
with where the description is actually, on top of an image.
Yeah, I'll take these ideas and move them
on to mocking them up on the computer.
If I hadn't done this process sketching though,
and I had just gone straight onto the computer,
I don't think some of these ideas would have come out.
Because it would have been taking me a lot longer
to do each individual version,
that you can't act on an idea you have.
Kind of as you're drawing one,
it gives you an idea of how you could do it differently
in the next frame.
So it's important to act on that right quickly.
And that is why wireframing by hand
is a really important first step of the process for me.
Let me just give you a quick overview
of what the next step in the process does look like
though of being on the computer,
because obviously, you might be concerned that these designs
here you're seeing are very messy and not understandable
without a lot of explanation that I just gave you.
When I put it on the computer,
these are the versions
that I'm gonna then share with my team for feedback.
But this wireframe by hand is purely an exercise
for me to start getting my ideas out.
Over here in Figma, I have an example of a set of wireframes
that I created for our video training page.
And actually I'll just quickly insert.
This is an image of what the sketches looked like before.
And so you can see kind of like I just showed you
for this one that is stars next to ideas that I said
I wanted to take further.
Sometimes it can end up being quite a few ideas
that I end up taking further.
In this case, I think was kind of these three
came from my wireframing.
So when I'm wireframing,
I purposefully keep things very gray
and not looking like completed designs.
So the only reason even that these buttons are green,
is because I have a design system over here in Figma
to easily pull from and put pieces into a page,
which does make mocking-up things
and figuring a whole lot quicker.
But I purposely made things look like
they're not quite finished,
because I want you to focus on the structure of the page,
and not on exactly what it looks like.
So the first thing I do is copy my sketch,
bring it over and make it into a digital version
with headings and things like that, with example copy.
I like to put in little placeholder text like this
rather than Lorem Ipsum,
because it gives you more context
about what kind of content is going in there.
And that's really important when someone's giving feedback
on a page that they understand
what I've mentioned is going to be talked about here.
So yeah, I use gray boxes,
I use our design system when needed,
but this can just as easily be a plain gray box
to signify a footer.
It doesn't need to have the actual thing in there.
And I find once a mock-up my favorite few versions
of the sketches, that gives me some more ideas
of how we could push this design into things I could do.
So here, for example, in my sketches,
I had a filter topic drop down
as the way that we're gonna sort
through these different workshops.
But when I started putting it on the computer,
I thought, oh, maybe these could be tags
that are sort of laid out at the top of the page.
And they like little buttons
instead of being hidden in a drop down.
So you get more ideas like that, too.
And that's really what wireframe is there to do,
is to help you bring your ideas out,
to help bring out that creativity,
and the different ideas you have for structuring the page.
So usually, I will sketch until I absolutely
can't think of any more ideas,
and then I'll usually try and push myself
to do one or two more.
And then I'll come over to the computer
to mock-up the favorite pieces.
But I won't stop there.
I'll keep going until I feel like
I have a personal favorite that I think is the best way
to arrange the page,
which in the case of this project
was this one on the end here.
That was kind of a mixture of some ideas
that it had the sketch,
and some ideas that I got when I put things
onto the computer.
I hope it was helpful for you to see an overview
of my wireframing process,
and what I do to kickoff a Web design project
on a really good note.
And help me get more creative with my ideas for the page.
There'll be links to the apps that I talked about using
in the description.
So please check that out.
And if you're a designer yourself,
I'd love to hear about how wireframing
or like project kickoff processes might differ.
So tell me about that down below in the comments,
I'd love to hear from you.
If you're not yet subscribed to my channel,
then please go ahead and click that red button
'cause I make new videos about design every single week.
And I would love to have you back here for the next one.
Thanks for watching, happy designing
and I will see you in the next video.
Bye.
(upbeat music)