Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Create the mobile wireframe. You will become familiar with shape tools, stroke, fill and the align and distribute panel.
It's time to start a wire frame.
0:00
A wire frame is a simple sketch.
0:02
It's about placement and
arrangement of elements.
0:04
We're gonna start small with
the mobile art board on the left.
0:07
So I'm gonna, kinda zoom in here so
we can get closer.
0:11
Our website is going to be divided
into four main sections or containers.
0:17
A header, navigation, content, and footer.
0:22
We will draw boxes to
represent these areas first,
0:25
create some image placeholders, and
start to build out the UI elements.
0:29
Working the wire frame phase,
I prefer to work in grayscale.
0:35
And a nice way to work in grayscale
is if you put a window and swatches.
0:39
You can see we have our
grayscale palette right here.
0:51
And I like to just use this for reference
while I'm laying out my wire frame.
0:55
And also, in general,
using a grayscale is less distracting.
1:00
It's gonna allow for me and
1:05
the client to focus on arrangement first
and not worry too much about color.
1:08
The first thing we'll draw is the header.
1:13
So I'm going to draw a rectangle,
which we've already done before.
1:17
And instead of using green,
I want to change this, of course,
1:21
to a different color.
1:24
Let's try a lighter gray, okay.
1:27
So if I click up at the top and drag.
1:32
And let's try that.
1:39
So that's about 135.
1:42
And now that we have
our header really easy,
1:45
we're just gonna click and
hold and drag down.
1:50
This'll be our footer,
down here at the bottom.
1:52
One thing you'll notice, actually,
is I'm drawing my wire frame but
1:57
it's on top of my guide, this green boxes.
2:01
The guides are staying on top but
let's change our layer order so
2:06
that our guides are going to be on top and
that what we are drawing is underneath.
2:10
To do that I'm going to unclick that lock
I made earlier and just highlight it and
2:16
click and hold and drag so it's on top.
2:21
That's what I want.
2:23
I'll hit lock again.
2:25
Okay.
2:27
So our footer I think I'm going to make it
just a little narrower than the header.
2:29
Next we're going to add
the navigation bar.
2:36
And the navigation bar I want
it to be a little darker.
2:39
So I think this one's darker.
2:45
And when you're designing for any touch
device, you want to make sure that
2:48
the width or height is not any smaller
than 50 pixels in any direction.
2:52
Because with touch devices,
they need to be big enough for
2:58
the finger to sort of activate it and
touch it.
3:01
If it's too small it's not worthwhile.
3:03
So just make sure of that
when you're doing it.
3:06
I don't want it to be so
much bigger than my header.
3:10
I'm gonna change this.
3:14
Let's make it 85, Okay.
3:17
And I'll go back to my
selection tool by hitting v.
3:24
And I'm just gonna click and drag.
3:28
Okay.
3:33
So we have our header.
3:34
Our navigation space.
3:35
And this may change.
3:37
These are just, this is like placeholders
for where these things are gonna be.
3:38
And then this area in here,
this is our content window.
3:43
This is where the event feed
is going to be happening.
3:48
So I'm gonna draw some lighter squares.
3:52
Three that will represent three
events that will be loading.
3:56
Choose a lighter color.
4:02
Go back to my rectangle and draw.
4:03
I wanna have three so
they need to all fit in this space.
4:09
See how big that is.
4:12
Let's make it 325.
4:16
I often like to make things divisible
by 5, but it doesn't actually matter.
4:18
Sort of just, with order.
4:24
I wanna align this up to the top.
4:28
Okay.
4:30
And I'm gonna hold down Option and
click and drag down until it aligns there.
4:32
Perfect.
4:39
And do it one more time.
4:40
I feel like this space is a little
bigger than I want it to be.
4:47
So I'm gonna change this to 350.
4:50
Okay.
5:08
This is gonna be better.
5:08
So, I'm just sorta lining that up.
5:13
I don't want it.
5:16
You need to sign up for Treehouse in order to download course files.
Sign up