YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Homepage Design UXUI Design Product Design Udacity

Get Embed Code
14 Languages

Showing Revision 2 created 05/25/2016 by Udacity Robot.

  1. The home screen of a website or
  2. the loading screen of your mobile app,
    will be the first impression for users.
  3. And you want to make sure
    that you get this right.
  4. Here's Udacity's homepage
    as of April 2015.
  5. A clear goal headlines the page, and
    there's plenty of white space around
  6. the headlines, and
    the tagline to draw users into them.
  7. Homepages like this one should
    answer these questions.
  8. What is this?
  9. What is being offered?
  10. What can I do here?
  11. And how do I start?
  12. In Udacity's case, the how can I get
    started comes just below the fold
  13. with a description of
    the Nanodegree program.
  14. You want all of this
    information to be present, but
  15. you should also be careful
    not to overwhelm your users.
  16. You want users to have a clear
    understanding of what you offer, and
  17. then you can link to other pages for
  18. users to learn more about
    your product or services.
  19. Many companies put those
    links in the footer.
  20. Going back up to the top of
    the homepage, we can see that from here,
  21. I could sign up for an account, or
    I could sign in if I'm an existing user.
  22. To learn more about how
    nanodegrees work in particular
  23. I could click on one of these.
  24. Homepages are tricky in
    that they need to do a lot.
  25. But you want to be careful about
    adding more and more to that page so
  26. sometimes you might have a landing page,
    like this one.
  27. Landing pages are for specific products
    that you want to show to your users.
  28. They allow you to focus on
    one particular product.
  29. Notice that here,
    there's a clear call to action.
  30. I can get a sense about what this
    product is from the copy on the page and
  31. also from this background image.
  32. Scrolling down, I can even get
    more details about the program.
  33. To learn more about
    designing homepages and
  34. landing pages, check out the articles
    that are linked in the Instructor Notes.
  35. At the very least, you need to
    strive for an informative page, and
  36. at the best,
    your homepage should be memorable.
  37. It's important to keep in mind that
    your homepage doesn't have to be static.
  38. It should be a work in progress.
  39. Here's another version
    of the Udacity homepage.
  40. And notice that it's changed slightly.
  41. We have different copy and these
    images have been condensed together.
  42. Your homepage might also be dynamic in
    that you might be AB testing certain
  43. features of it to see what
    drives users actions.
  44. You might also just be trying to refine
    your value proposition for your users.
  45. And even before that homepage,
  46. this is what Udacity's homepage
    looked like once upon a time.
  47. As you can see,
    it's not as informative or
  48. clear at answering the questions,
    what is this and what can I do here?
  49. At the end of the day, you want to
    make a fantastic first impression.
  50. It's really up to you
    to delight users so
  51. that way they come to know who you
    are and what you have to offer.
  52. Now it's your turn to do a little
    investigation of your own.
  53. I'd like you to find three homepages for
    relatively new companies and
  54. analyze them.
  55. You want to get a feel for
    what type of information and
  56. elements live on their homepages.
  57. For each of the homepages you
    should ask yourself: what
  58. elements comprise the homepage, what are
    the main calls to action, what does that
  59. homepage say about the company,
    its users and the value proposition?
  60. And what are the most likely flows
  61. from the homepage to
    other places on the site?
  62. In other words,
    what could you do from the homepage?
  63. Finally, what are some
    of the similarities and
  64. differences you see across
    the homepages you looked at?
  65. Write a post that answers
    these questions and
  66. share it on the discussions.
  67. Once you're ready,
    check this box to continue