Содержание · 10
Аватарки, тёмная тема, анимация, мелкие размеры и бесконечные форматы. Разбираем требования, которых не было у печатных фирменных стилей.
Что изменилось
Печатный фирменный стиль проектировался для конечного числа носителей известного размера. Цифровая среда даёт бесконечное количество форматов, две темы оформления и требование работать в 16 пикселей.
Системы, созданные до этих требований, ломаются предсказуемым образом: знак не читается в аватарке, цвет не проходит по контрасту, шрифт не имеет веб-лицензии.
Квадрат и круг
Аватарка — самый частый контакт с логотипом в цифровой среде, и она квадратная или круглая. Горизонтальный знак в ней либо уменьшается до нечитаемости, либо обрезается.
Поэтому компактная квадратная версия сегодня обязательна и проектируется наравне с основной, а не как производная.
Тёмная тема
Знак должен существовать в двух версиях, и вторая — не инверсия первой. Тонкие элементы на тёмном фоне визуально утолщаются, насыщенные цвета теряют контраст.
Практика: для тёмного фона рисуется отдельная версия со слегка облегчёнными штрихами и осветлённой палитрой.
Движение
Анимированная версия знака нужна для видео, заставок, загрузочных экранов и переходов. Проектировать её лучше сразу: некоторые статичные знаки принципиально не анимируются осмысленно.
Хорошая анимация логотипа объясняет его конструкцию — показывает, как он собран, а не просто крутит его вокруг оси.
Интерфейсные требования
Фирменный цвет в интерфейсе должен работать как функциональный: у него должны быть состояния наведения, нажатия, отключения и достаточный контраст с текстом на нём.
Это требует расширения палитры: один фирменный цвет превращается в шкалу из семи-девяти оттенков.
Система, спроектированная для бумаги, ломается на аватарке в двадцать четыре пикселя. Именно там теперь и происходит первое знакомство.
Чем цифровая среда отличается от печатной
Печатная айдентика статична: макет утверждён и воспроизводится. Цифровая живёт в чужих рамках — в ленте социальной сети, в списке приложений, в поисковой выдаче, в почтовом клиенте, — и почти всегда в размере, который вы не выбирали. Отсюда первое требование: система должна оставаться узнаваемой в квадрате шестнадцать на шестнадцать пикселей и в тёмной теме.
Второе — движение. В цифре знак может появляться, а не просто быть, и это ресурс, которого у печати нет. Но анимация становится частью системы только тогда, когда описана правилом: длительность, характер, когда её нет вовсе.
Что обязательно описать для цифры
- Иконка приложения и фавикон: отдельная упрощённая версия знака, а не уменьшенный логотип.
- Поведение в тёмной теме: инверсия почти никогда не работает буквально.
- Карточка для соцсетей: шаблон с местом под заголовок разной длины.
- Шрифтовая подстановка: что ставится, если фирменную гарнитуру подключить нельзя.
- Доступный контраст пар «цвет — фон»: фирменный цвет, не проходящий по контрасту, ограничивает всю систему.
Что описать про доступность
Айдентика, рождённая в печати, не знает, что цвет должен проходить проверку на контраст, а знак — оставаться понятным для того, кто его не видит. В цифровой среде это не пожелание: контраст текста к фону нормирован, и фирменный светло-серый на белом попросту незаконен для основного текста. Обнаруживается это на этапе вёрстки, когда палитра уже утверждена.
Поэтому в описание системы входят три вещи, которых в печатных руководствах не было. Первая — какие пары цветов допустимы для текста, а какие только для больших плашек и декора. Вторая — альтернативный текст для знака: что диктор произносит, встретив логотип. Третья — поведение при увеличении шрифта в системе: интерфейс, где текст вырастает вдвое, не должен рассыпаться.
Что добавить в описание системы
- Таблица допустимых пар цветов с коэффициентом контраста для каждой.
- Что произносит диктор вместо знака — короткое имя, а не «логотип компании».
- Минимальный размер знака в пикселях, при котором он ещё различим.
- Поведение при увеличенном системном шрифте и при уменьшенной анимации.
- Вариант палитры для тёмной темы: не инверсия, а отдельный набор с той же проверкой контраста.
Что в итоге
Цифровая среда добавила требования, которых не было в печати: квадратная версия, тёмная тема, анимация и интерфейсные состояния.
Проектируйте айдентику и дизайн-систему как одно целое — иначе стык между ними станет местом, где всё разваливается.
Коротко
- Чем цифровая айдентика отличается от печатной?
- Она живёт в чужих рамках и в размере, который вы не выбирали: в ленте, в списке приложений, в почтовом клиенте. Отсюда требование узнаваемости в шестнадцати пикселях и работоспособности в тёмной теме.
- Нужна ли отдельная иконка приложения?
- Почти всегда: уменьшенный логотип в квадрате превращается в пятно. Иконка — это упрощённая до силуэта версия знака, а не масштабированная копия.
Айдентика заведения
В ресторане айдентика физическая: её трогают, на ней едят, её видят издалека. Разбираем носители и требования, специфичные для заведений.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…