История айдентики Netflix, современный гайдлайн и правила работы с площадкой

1997. Основание компании и первый логотип

В 1997 году Netflix еще не был стриминговым сервисом. Пользователи арендовали CD- и DVD-диски с фильмами и получали их по почте. Самый первый логотип сервиса выглядел так:

Здесь мы можем увидеть:

• аккуратный шрифт с засечками;
• небольшую палитру цветов — градиент от светлого фиолетового к темному;
• кинопленку, разделяющую слово Netflix на две части.

Сайт компании в это время был похож на многие другие интернет-платформы в 1990-е годы: 

Здесь можно увидеть стандартные элементы веб-верстки, характерные для того времени:

• множество подсвеченных гиперссылок;
• разделение экрана на несколько частей с помощью фоновых цветов; 
• акценты на текстовых элементах с помощью начертаний;
• ассиметричная композиция.

Можно также заметить подражание старым файловым архивам в фиолетовых закладках на верхней панели.

2000. Переосмысление сервиса и логотип в виде DVD

В 2000 году в Netflix изменилась система оплаты. Теперь пользователи могли оформить подписку и арендовать по ней неограниченное количество дисков. По этой причине буквально на один год появилось новое лого — с желтым цветом и телевизором вместо точки над буквой I. 

В этом варианте уже использовали тонкий, округлый шрифт без засечек. Сам логотип был в форме овала с желтыми вставками по краям, что напоминало форму DVD-диска:

Можно заметить сходство между этой формой и знаменитой заставкой «DVD»  на черном экране:

Сейчас сложно сказать, какой именно шрифт использовали дизайнеры в 2000 году, но среди похожих на него можно отметить гротеск Comfortaa:

Но этот креатив не прижился, и логотип кардинально изменили спустя несколько месяцев.

2001. Появление легендарного логотипа

Предыдущая версия логотипа не раскрывала ценности компании, Netflix нужно было найти другие визуальные решения. Для нового лого дизайнеры снова выбрали шрифт без засечек, но теперь испрльзовали только заглавные буквы.

Яркий контраст белого и красного цветов привлекал внимание. Интересно, что такой же красный цвет традиционно использовался для изготовления театрального занавеса, поэтому у пользователей уже возникала ассоциация с шоу и ожиданием захватывающего сюжета.

Специфичные тени от букв создавали ощущение, будто на красный фон проецируется фильм, что тоже добавляло кинематографичности этому визуалу. 

Сайт изменили вслед за логотипом, и он стал визуально проще, а цветовая палитра стала более гармоничной: 

По сравнению с вариантом сайта 1997 года, функционал новой версии был намного удобнее. На первой странице теперь можно было узнать принцип работы сервиса и оставить данные пользователя, а чтобы увидеть ассортимент, нужно было перейти в отдельную вкладку.

2014. Апдейт логотипа и инверсия цветов

В 2014 году в логотипе произошли небольшие, но значительные изменения. Он стал намного ближе к тому варианту, который мы знаем сейчас:

Для шрифта использовали смесь Gotham Book и Gotham Bold, а объемные тени исчезли. Цвета фона и текста поменяли местами, теперь само слово Netflix стало ярко-красным, а фон — белым. Такой логотип стал более легким для восприятия.

2017. Появление современной айдентики

В 2017 году фон логотипа изменился с белого на темный, близкий к черному. Использование такого контраста создавало атмосферу кинозала, в котором выключен свет и виден только экран.

Дизайн современного сайта Netflix выглядит просто и визуально удобно. Здесь есть плоские цветные кнопки, нет четких и строгих границ, используется единая цветовая палитра: красный, белый и черный.

Визуальная айдентика платформы

Современный логотип на Netflix — это все то же название платформы, но иногда оно сокращается до одной заглавной буквы N.

Можно заметить, что объем буквы N создается с помощью текстуры и разных оттенков красного:

Дело в том, что по гайдлайну Netflix визуальная айдентика включает в себя две палитры яркого красного цвета:

• Netflix Red и Symbol Dark Red для логотипа, состоящего из заглавной буквы
• Netflix Red для логотипа, состоящего из целого слова.

Еще одна составляющая — свободное пространство вокруг элементов. У символа N оно соответствует ширине одной ножки самой буквы N, а у полного логотипа соответствует ширине буквы T. Netflix объясняет это тем, что никогда не перегружает логотипы и всегда дает им возможность дышать и выделяться.

Принципы разработки интерфейса

Кроме принципов брендинга у Netflix есть дизайн-система пользовательского интерфейса. Компания сформировала единый список принципов и визуальных решений, которые на всех устройствах будут работать и выглядеть одинаково. Так пользователь сможет освоить работу с платформой на планшете или Smart TV, а дальше переносить этот опыт на другие устройства.

Важную роль в этой дизайн-системе играют компоненты Figma , которые используются всей командой дизайнеров для создания макетов:

У Netflix есть инструкции для авторов и продюсеров по созданию и выпуску промо-материалов от лица стриминга. Среди требований к исходным материалам указаны:

• высокое качество;
• разделение объектов на слои;
• возможность редактирования макетов;
• понятная организация файлов;
• соответствующие названия продуктов.

Вдохновение и наследие Netflix

На Behance или Dribbble можно увидеть кейсы, вдохновленные визуалом Netflix. Чаще всего дизайнеры проводят исследования пользовательского опыта и реализуют в своих проектах новые дизайнерские решения. Например, это может быть редизайн самого сайта:

Встречаются проекты с использованием реальной дизайн-системы Netflix, например, лендинги.

Для некоторых проектов Netflix выступает как дизайн-конкурент. Здесь авторы исследуют его со стороны функционала и визуала, чтобы увидеть удачные решения и использовать их в своих собственных продуктах.