Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Adobe Illustrator for Web Design!
You have completed Adobe Illustrator for Web Design!
Preview
Using those same UI elements we used in the mobile design, we’ll create a new larger layout for desktop and utilize symbols.
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
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up