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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up