Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Designing Layouts

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Headers and Labels

4:24 with Nick Pettit

The visual design of an interface can only communicate so much. At some point, designers and users must rely on text, and how that text is written can greatly influence the quality of a user experience.

Notice:

Please note that the instructor in this video is utilizing Adobe XD for the demonstration. However, feel free to use any design software you're comfortable with, such as Figma, UXPin, etc., to follow along and apply the design principles being taught.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Fixing spelling and grammar is helpful but we can improve this design further by 0:00
    rewriting some of the copy and by writing some new material. 0:04
    In the top left, there is a link that says Review and 0:10
    I'll zoom in on it so you can see it a little bit better here. 0:15
    Now, because this is singular, Review, it sounds like it's supposed to be 0:19
    a verb as in the user should click this if they wish to write a review. 0:25
    So why don't we just say that instead? 0:30
    Type write a review, which is much more clear. 0:36
    And notice how the first letter is capitalized and 0:43
    the word Review, which is now a noun, is also capitalized so 0:47
    that we're staying consistent with title casing. 0:52
    So I'll zoom back out here and down at the bottom these two titles, 0:58
    New and The Blog are a bit bothersome to me. 1:03
    First is this one that just says New. 1:08
    It's already a little difficult to tell that it's actually labeling 1:11
    these two restaurants cards, we'll fix that later, but 1:16
    it's also hard to decipher the meaning of the word New by itself. 1:20
    There should be a little more descriptive 1:24
    context here, so let's make it say 1:30
    something like, New in Your City. 1:35
    There we go. 1:40
    So let's zoom back out here. 1:43
    Then there is other header that says The Blog which isn't terrible, 1:46
    but it doesn't really describe what we're looking at. 1:51
    This box isn't the blog itself, that's probably on another page. 1:54
    Rather this text is just a snippet from the blog, so 2:00
    let's be more descriptive and say exactly what we mean. 2:05
    So we can double-click that and we'll say From the Blog. 2:09
    So what's go up here and 2:16
    next, this search bar is asking us to find 2:21
    something and they want us to find it near something else. 2:26
    It's not clear what the user should type in here so 2:31
    we should help them with some example text. 2:34
    So let's select this word Find here, and 2:37
    I'm going to copy it and then paste it in place. 2:43
    And then I'll just move it over a bit using the arrow keys and 2:49
    let's change this to some example desserts that the user should be typing in. 2:56
    So I'll say cake, comma, doughnuts, 3:02
    comma, popsicles, and then three dots there. 3:08
    We'll work on fonts and colors later so 3:15
    that it's clear that this is different from the word Find. 3:18
    But for now we'll leave it like that. 3:22
    Now, what does Near mean, near what? 3:25
    Well, in this case, we probably want the user to type in something like a city or 3:28
    a zip code so let's tell them that. 3:34
    Select this word Near, copy it, paste it in place and move it over. 3:37
    Let's make sure the spacing is the same there. 3:44
    So this is, let's see, looked like it was ten. 3:47
    There we go, ten units, And ten units. 3:51
    So we wanna keep the spacing consistent between the label and this example text. 3:59
    And now let's change this to say City or ZIP. 4:03
    When you're done, save your work. 4:11
    This is an improvement but there's still more to do. 4:15
    In the next few videos, we'll work on arranging page elements so 4:18
    that the layout has a clear visual hierarchy. 4:21

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up