Design systems12:34
D
Building a color engine from scratchDev Corner128K views · 2 days ago
Смотреть все продуктыПалитры в духе продуктов · Видеоплатформа - лента контента
Цветовая палитра в духе YouTube
Палитра в духе YouTube - яркий, ориентированный на контент вид видеоленты: простой белый или светло-серый фон, который не мешает, один яркий красный основной цвет для действий и индикатора эфира, и вспомогательный синий, используемый экономно для ссылок и подтверждений.
Посмотрите, как палитра в духе YouTube выглядит в реальном, живом интерфейсе ниже - не на плоском свотче. Переключитесь на «Ваша палитра», чтобы увидеть свои цвета в том же интерфейсе.
Живой предпросмотрYouTube
Logo
Search
+ CreateL
AllMusicGamingLiveNewsComedyPodcastsDesign
Studio tour8:02
B
Tour of the new studio setupBehind the Scenes54K views · 5 days ago
Music3:15:00
C
Lo-fi beats to design toChill Waves2.1M views · 1 year ago
Technology9:47
T
Weekly news recap: tech editionThe Daily Byte312K views · 1 day ago
Color15:20
C
How gradients actually workColor Theory87K views · 3 weeks ago
LiveLIVE
S
Q&A with the teamStudio Live1.4K watching
Typography10:11
T
The 10-minute typography masterclassType Lab219K views · 4 days ago
Product18:42
P
Making a dashboard feel effortlessProduct Craft76K views · 6 days ago
Creative coding22:08
P
Creative coding: tiny worlds in CSSPixel Playground430K views · 2 weeks ago
Показаны фирменные цвета этого архетипа.
Как выглядит палитра в духе YouTube?
У видеоплатформ есть одно ограничение важнее прочих: на странице одновременно оказываются сотни превью произвольных цветов, поэтому окружающий хром должен быть достаточно тихим, чтобы не спорить с ними. Это подталкивает палитру к простому, почти белому фону и узкому набору UI-цветов, строго зарезервированных под состояния интерфейса - один яркий основной цвет для призывов к действию и статуса эфира, второй, более спокойный акцент - для ссылок и второстепенного подтверждения.
Этот мокап - постоянный рельс навигации слева, ряд чипов-категорий и сетка карточек видео с бейджем длительности и аватаром канала - заимствует этот подход "контент прежде всего", чтобы показать, как палитра работает на фоне стены не связанных между собой цветов превью. Это оригинальный макет в этом духе, а не копия реального интерфейса какой-либо конкретной видеоплатформы или защищённого товарным знаком UI.
Ключевые визуальные характеристики
- Простой, почти белый фон, на котором превью любого цвета остаются в фокусе
- Постоянный рельс навигации с иконками и подписями вдоль одной стороны
- Горизонтальный ряд чипов-фильтров категорий над основной лентой
- Сетка карточек видео, у каждой - превью 16:9, круглый аватар канала и заголовок
- Тёмный бейдж длительности с фиксированным контрастом поверх каждого превью независимо от темы
Цветовые характеристики
- Нейтральная почти белая база, чтобы произвольные цвета превью никогда не конфликтовали с хромом
- Один яркий основной цвет, зарезервированный для действия создать/подписаться и индикатора эфира
- Отдельный, более спокойный акцент, используемый экономно для ссылок и вторичного/подтверждённого состояния
#FFFFFF
#F9F9F9
#FF0000
#065FD4
#0F0F0F
#606060
Типографика
- Простой, компактный системный шрифт без засечек, единообразно применяемый к заголовкам, названиям каналов и метаданным
- Чёткий шаг по размеру и насыщенности между заголовком видео и приглушёнными метаданными просмотров/даты
- Заголовки обрезаются до двух строк вместо бесконечного переноса, благодаря чему все карточки одной высоты
UI-паттерны
- Левый рельс навигации с подсветкой активного состояния текущего раздела
- Горизонтально прокручиваемый ряд чипов категорий над лентой
- Адаптивная сетка карточек видео, схлопывающаяся в одну полноширинную колонку на узких экранах
- Фиксированный тёмный бейдж длительности в углу каждого превью
- Круглый аватар канала в паре с двухстрочным блоком заголовка и метаданных
Частые вопросы
Какие цвета обычно используются в интерфейсе в духе YouTube?
Простой, почти белый фон, один яркий основной цвет, зарезервированный для действий вроде подписки/создания и индикатора эфира, и более спокойный вторичный акцент, используемый экономно для ссылок и подтверждений.
Это официальные цвета бренда YouTube?
Нет - это оригинальный макет, вдохновлённый общим видом видеоплатформ вроде YouTube, а не копия его официальной цветовой палитры или защищённого товарным знаком дизайна.
Почему в видеолентах фон делают таким простым?
Каждое превью на странице может быть совершенно произвольного цвета, поэтому нейтральный фон не даёт окружающему хрому конфликтовать с этим содержимым или спорить с ним за внимание.
Можно ли посмотреть свои цвета в этом интерфейсе в духе YouTube, а не только палитру по умолчанию?
Да - переключите тумблер «Ваша палитра» над предпросмотром, чтобы увидеть свои текущие цвета в живом интерфейсе в духе YouTube вместо цветов по умолчанию.