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
Using those same UI elements we used in the mobile design, we’ll create a new larger layout for desktop and utilize symbols.
Now it's time for the desktop Wireframe.
0:00
This one is a bit easier because we've
already created some elements to use.
0:03
We're also gonna be creating
a couple more UI elements.
0:07
So first,
let's just drag our header over here.
0:11
So I'm going to click on the header,
of my selection,
0:19
tool hold down option click and drag.
0:23
And then expand this
out to the full width.
0:26
Instead of 135,
I'm going to bump it up and going 150 and
0:29
then I want to make sure that is
aligning to the top, very good.
0:35
Of course we need our logo.
0:41
And what's nice is I'm like, okay, I want
my logo to be on the left hand side.
0:44
And I can just pop it right in line
with this hundred pixel padding,
0:50
which is great.
0:55
For the navigation because we
have more room in our header,
0:59
I am going to put it
inside of our header here.
1:04
I think that will be nicer.
1:13
Now click once.
1:16
Hold down option and drag down.
1:18
So, now that is our footer.
1:21
You can see as I am drawing these things,
these smart guides are so fabulous.
1:25
They sort of tell me where things
intersect and what's going on.
1:29
That's great.
1:33
Instead of having the events just
sort of feed down, because we´re in
1:34
a bigger space we can have more of
a hero image, like a call out on top.
1:39
Which is what I wanna go for just to sort
of make the design more interesting.
1:44
So option click drag over.
1:49
It does´t need to line up to the top.
1:51
In fact, I don't want it to line up to
the side now that I'm thinking about it.
1:57
I'm gonna line it up with
my 50 pixel side here.
1:59
So there is a little room.
2:04
And then I will drag out
until we hit the other side.
2:05
So I know I have 50 pixels
of padding on either side.
2:12
For my navigation, I just realized,
2:17
it's lined up with the 100 marker, I want
to move that over so it's lined up here.
2:19
And by using these, you can see, it really
does help to organize the content so
2:27
it's more pleasing to look at.
2:32
I'm gonna move this over too.
2:36
You know,
all of this needs to be kinda lined up.
2:41
Let's see.
Yep, that's what I want.
2:44
So it's definitely lined up in the center,
so I went to, I selected both,
2:50
and then I selected this back one.
2:55
This is going to be our target, so
I'll click on it one more time.
2:58
Then align, and
I went to vertical distribute center.
3:02
You need to sign up for Treehouse in order to download course files.
Sign up