YOUTUBE LIVE SEARCH RESULTS DESIGN SYSTEM

2020

STUDY

  • The study in question posits to improve Youtube’s seach results usability and is accessible here.

DISCLAIMERS

  • The elements that weren’t changed in order to follow Youtube’s guidelines are as follows:

    • Search bar

    • Search text placeholder

    • Search button

    • Search icon

    • Subscribe nutton

    • Subscribe button abel

    • Official account icon

    • Verified account icon

COLORS

Used in:

  • Video titles

  • Youtubers / Channels names

  • Label “Youtubers / Channels”

TYPOGRAPHY

BLOCKS

  • Width: 281px

  • Height: 152px

  • Aligned to top left

NAVIGATION

Used in:

  • Video titles

  • Video views

  • Youtubers / Channels subscribers

  • Roboto 16px Regular #000000

  • Roboto 16px Regular #9B9B9B

  • Width: 575px

  • Height: 830px

  • Padding: 24px, 24px, 0px, 10px

Used in:

  • Search results stroke

  • Width: 541px

  • Height: 152px

  • Aligned to horizontal-center

  • Width: 541px

  • Height: 43px

  • Aligned to vertical-center left

Used in:

  • Search results background

  • Width: 244px

  • Height: 152px

  • Padding-bottom: 16px

  • Margin-right: 16px

  • Aligned to top center

  • Width: 281px

  • Height: 37px

  • Text aligned to vertical-center left

  • Button aligned to vertical-center right

  • The thumbnail and the channel title link to the correspondent channel page

  • The subscribe button activates the subscription to the correspondent channel

  • The thumbnail and the video title link to the video’s Youtube page

  • The uploader text links to the uploader’s Youtube page