After the dark black theme and other video player updates in October, YouTube Today in detail Why and how I redesigned over 450 system UI icons and theme channel avatars.
System icons are used for navigation and other user interface components. They are designed to be simple, modern and friendly. Each icon is reduced to its minimal form, so that users of different languages and cultures can understand and navigate our products.
Change is already rolling out, with some updates — like the bottom bar — starting in 2020 on some platforms. When redesigning, YouTube considered “how icons relate to user-generated content, their environment, accessibility, internationalization, icons, and file size”.
With our redesign, we wanted to indicate state without relying on color, so we created two origins for each symbol icon. For most icons, the default is a one-pixel outline. Then, when the icon is active or selected, it densifies to two pixels or fills the shape. […] And because we no longer rely on color to indicate status, we’ve been able to dramatically increase the contrast ratio of the icons in all cases to increase legibility.
The company believes it has “drew on a truly unique style balancing sharp and rounded shapes, reflecting the range of serious to playful content that lives on YouTube” with an outline approach.
YouTube also redesigned the theme channel avatar icons (shopping, live, gaming, sports, podcasts, etc.) for consistency, drawing inspiration from system icons when possible. One particularly cool change is that it’s no longer monochrome: “…we’re making it more expressive, with bold colors that act as stronger visual identifiers for these popular categories of YouTube content.”
Theme icons make use of color from our brand palette, which features bright solid colors paired with vibrant gradients that reflect the spirit and energy of YouTube. This new look sends a clearer signal that these major channels feature exciting YouTube sponsored content.
More on YouTube:
FTC: We use affiliate links to earn income. more.