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