Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Layout for Desktop

3:09 with Ashley Burke

Using those same UI elements we used in the mobile design, we’ll create a new larger layout for desktop and utilize symbols.

Helpful Links

  • 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