В брендбуке все обычно выглядит убедительно. Есть фирменная палитра, набор шрифтов, графические приемы, правила работы с фотографиями, композиционные принципы. На статичных носителях система собирается без особых проблем: можно выбрать нужный фон, контролировать размер изображения, заранее понять, где будет текст и сколько его вообще окажется.
С интерфейсом так не работает.
На сайте или в приложении элементы живут не в одном заранее собранном макете. Заголовок может занять две строки вместо одной, карточка — растянуться из‑за длинного названия, пользователь — увеличить системный шрифт, изображение — не загрузиться, а кнопка — перейти на новую строку на узком экране. Появляются состояния наведения, ошибки, пустые экраны, формы, таблицы, модальные окна, уведомления. И довольно быстро выясняется, что часть фирменных приемов отлично смотрелась на презентации, но плохо переносит реальную работу интерфейса.
Это не обязательно означает, что айдентика была сделана плохо. Скорее, у нее просто была другая среда. Проблема начинается тогда, когда фирменный стиль пытаются перенести в цифровой продукт почти буквально, как будто сайт — это еще один рекламный носитель.
В макете можно выбрать идеальные условия
Почти любой брендовый прием можно показать в выгодной ситуации. Если фирменный цвет плохо работает с мелким текстом, его можно оставить для больших плашек. Если шрифт тяжело читается в небольшом размере, его используют только в заголовке. Если графический элемент конфликтует с фотографией, можно подобрать другую фотографию. В статичном макете дизайнер сам решает, какие условия создать вокруг системы.
В интерфейсе большая часть этого контроля исчезает.
Кнопка должна оставаться кнопкой и в темной теме, и на светлом фоне, и в disabled‑состоянии, и при наведении. Текст должен читаться не только на большом экране в Figma, но и на телефоне с яркостью экрана на минимуме. Карточка должна пережить не только аккуратные три слова в заголовке, но и длинное название продукта, которое пришло из CMS и никого не спросило, нравится ли оно дизайнеру.
Особенно заметно это на проектах, где айдентика строится вокруг одного сильного приема. Например, вокруг необычной типографики, яркого сочетания цветов или сложной графики. На рекламных носителях такой прием может быть главным источником узнаваемости. В интерфейсе он начинает конкурировать с функциональностью.
Если использовать его слишком часто, экран быстро становится тяжелым. Если сократить до нескольких акцентных зон, возникает другой вопрос: останется ли бренд узнаваемым или превратится в обычный нейтральный интерфейс с фирменным логотипом в углу.
Вот здесь и начинается реальная работа, потому что буквально перенести фирменный стиль уже нельзя. Приходится решать, какие его части действительно важны, а какие существовали только потому, что хорошо работали на отдельных носителях.
Фирменный шрифт первым сталкивается с реальностью
Шрифт часто кажется самым простым элементом для переноса. Есть фирменная гарнитура — значит, используем ее и в интерфейсе.
Потом начинаются детали.
У шрифта может не быть нормального набора начертаний. В нем могут плохо выглядеть цифры, хотя в интерфейсе их гораздо больше, чем в обычной брендовой коммуникации. Он может быть слишком широким для кнопок и таблиц. Кириллица может заметно отличаться по качеству от латиницы. На небольших размерах буквы начинают слипаться, а при увеличении системного масштаба интерфейс разъезжается быстрее, чем с нейтральным UI‑шрифтом.
Есть еще техническая сторона. Веб‑шрифт нужно загрузить. Если он тяжелый, это влияет на скорость отображения страницы. Если используется несколько начертаний, файлов становится больше. Иногда приходится выбирать между визуальной точностью и вполне приземленным вопросом: насколько быстро пользователь вообще увидит текст.
Поэтому на практике часто возникает разделение. Фирменный шрифт остается в крупных заголовках, промоблоках и отдельных акцентах, а основной текст интерфейса переводят на более устойчивую гарнитуру.
С точки зрения брендбука это может выглядеть как компромисс. С точки зрения интерфейса — как нормальное решение.
Проблема появляется, когда такого решения никто заранее не предусмотрел. Тогда команда начинает договариваться по ходу работы. Один экран уже собран фирменным шрифтом, другой — системным, третий использует их одновременно. Через несколько месяцев у продукта фактически появляется собственная типографическая система, которая существует отдельно от исходной айдентики.
И это вполне естественный процесс. Интерфейс быстро заставляет отделять то, что отвечает за узнаваемость, от того, чем люди должны пользоваться каждый день.
Цвет перестает быть просто цветом
С палитрой происходит похожая история.
В брендбуке цвет можно показать как самостоятельный элемент: несколько основных оттенков, один акцентный, нейтральная база. На интерфейсном экране этих ролей недостаточно.
Нужны цвета текста, вторичного текста, границ, фона, hover‑состояний, ошибок, предупреждений, успеха, disabled‑элементов. Нужны состояния выбранного и невыбранного. Нужны варианты для темного фона, светлого фона, иногда — для темной темы целиком.
Фирменный красный, который отлично работает на упаковке, не обязательно подходит для кнопки. Если он слишком темный, на нем может плохо читаться белый текст. Если слишком яркий, десяток таких кнопок на одном экране начинает утомлять. Если тот же оттенок уже используется для ошибок, брендовый акцент внезапно становится связан с негативным состоянием.
Иногда приходится добавлять новые оттенки, которых вообще не было в исходной палитре. И тут начинаются споры о том, насколько далеко можно отходить от бренда.
В интерфейсной системе ответ обычно довольно простой: настолько далеко, насколько нужно для нормальной работы продукта, но не дальше.
Условно, если фирменный цвет используется как основной акцент, это еще не означает, что каждый интерактивный элемент должен быть именно таким. Часто достаточно сохранить характер палитры и несколько ключевых ролей, а все остальное построить вокруг них.
В этот момент брендовые цвета превращаются в токены. Не «наш синий», а primary, primary‑hover, primary‑active, surface, border, text‑muted. Для разработчика это гораздо полезнее, потому что он работает не с художественным описанием оттенка, а с функцией.
И здесь бренд впервые начинает жить уже не как визуальная идея, а как часть архитектуры интерфейса.
Узнаваемость редко держится на одном элементе
Есть соблазн сохранить в интерфейсе самый заметный фирменный прием и считать, что задача решена.
Например, бренд построен вокруг крупной диагональной графики. Ее добавляют в hero‑блок, на экран входа, в несколько карточек. В результате интерфейс действительно становится похож на бренд, но очень быстро начинает выглядеть перегруженным.
Или наоборот: прием оставляют только на главной странице, а все внутренние экраны собирают максимально нейтрально. Тогда продукт работает хорошо, но узнаваемость почти исчезает, как только пользователь уходит глубже первого экрана.
Обычно приходится искать более спокойные признаки, которые можно повторять чаще. Это может быть характер радиусов, работа с отступами, определенная плотность интерфейса, форма иконок, способ использования фотографий, отношение к пустому пространству. По отдельности такие вещи почти не выглядят как «брендинг», зато вместе постепенно создают характер.
Это важный сдвиг. В интерфейсе бренд часто перестает быть набором заметных декоративных элементов и становится способом принимать маленькие решения.
Насколько плотной должна быть карточка. Как выглядит пустое состояние. Насколько дружелюбно сформулирован текст ошибки. Как много цвета можно оставить на одном экране. Насколько жесткой или мягкой должна быть сетка.
Такие вещи гораздо сложнее показать на одном эффектном макете, зато именно они определяют, будет ли продукт ощущаться частью бренда после нескольких часов использования.
Компоненты быстро показывают, где бренд не выдерживает повторения
Один из самых полезных тестов для фирменного приема — повторить его двадцать раз.
На презентации можно показать одну идеальную карточку. В продукте их может быть двадцать пять на одном экране. Один крупный заголовок выглядит выразительно. Десять одинаково выразительных заголовков начинают конкурировать друг с другом. Одна цветная кнопка привлекает внимание. Если цветными становятся все кнопки, акцент исчезает.
Компонентный подход довольно быстро отрезвляет.
Когда дело доходит до библиотеки компонентов, часть фирменных приемов неожиданно начинает мешать. На одном экране они еще смотрятся нормально, а когда тот же элемент повторяется десятки раз, становится слишком много акцентов. Поэтому некоторые решения приходится упрощать уже по ходу работы — не потому, что они сами по себе плохие, а потому что в интерфейсе используются совсем с другой частотой.
Это хорошо заметно на декоративной графике. В айдентике она может занимать половину макета и быть главным носителем характера. В интерфейсе такая графика часто остается только в нескольких типах блоков — например, на промоэкранах, onboarding или пустых состояниях. В таблице, фильтрах или форме оплаты она просто не нужна.
Это не потеря бренда. Скорее, распределение интенсивности.
Интерфейс вообще редко выдерживает одинаковую выразительность на каждом уровне. Где‑то бренд может быть громким, где‑то почти исчезать. Пользователь не должен каждый раз заново замечать фирменный стиль, когда пытается изменить адрес доставки или скачать счет.
При этом продукт все равно может оставаться узнаваемым. Просто узнаваемость собирается из системы, а не из одного приема, который приходится насильно повторять на каждом экране.
Accessibility быстро заканчивает спор о вкусе
Есть еще одна граница, которую брендовые решения регулярно проверяют на прочность, — доступность.
На уровне айдентики можно довольно долго спорить о том, насколько красив конкретный оттенок или насколько легким должен быть текст. В интерфейсе у вопроса появляется измеримая сторона.
Если контраста недостаточно, текст тяжело читать. Если интерактивный элемент отличается только цветом, часть пользователей его не распознает. Если шрифт слишком тонкий или мелкий, проблема перестает быть вопросом визуального вкуса.
Именно здесь иногда обнаруживается, насколько сильно бренд был построен на условиях, которые цифровой продукт просто не может себе позволить.
Допустим, основная палитра очень светлая и тональная. В печатных материалах это выглядит аккуратно. В интерфейсе элементы управления начинают сливаться с фоном. Можно сохранить исходные оттенки и сделать продукт хуже, а можно расширить палитру и добавить более контрастные состояния.
Иногда это воспринимают как «отход от фирменного стиля». Хотя гораздо страннее было бы заставлять человека напрягаться при чтении только ради точного соответствия брендбуку.
То же самое происходит с размером текста, состояниями фокуса, кликабельными зонами. У интерфейса есть собственные требования, и они довольно быстро расставляют приоритеты.
Хорошая айдентика обычно переживает такие изменения без особой драмы. Если же после повышения контраста, изменения шрифта или упрощения графики от нее почти ничего не остается, возможно, узнаваемость изначально была слишком сильно привязана к нескольким декоративным решениям.
Между Figma и браузером появляется еще один слой
Даже если дизайн интерфейса собран аккуратно, дальше появляется разработка.
В Figma можно настроить идеальные отступы, аккуратно собрать компоненты, сделать варианты состояний. После реализации часть вещей неизбежно начинает вести себя немного иначе.
Текст приходит из базы, а не из макета. Изображения загружают пользователи или редакторы. Компоненты переиспользуются в контекстах, которых дизайнер не видел. Где‑то появляется локализация, и короткая русская кнопка превращается в длинную немецкую. Где‑то браузер немного иначе рендерит шрифт.
Если система построена только на визуальной точности конкретного макета, эти расхождения быстро становятся заметны.
Поэтому бренд внутри интерфейса довольно быстро превращается в совместную задачу дизайна и разработки. Нужно договориться не только о том, как выглядит компонент, но и о том, какие у него есть состояния, какие размеры допустимы, что происходит при переполнении, какие свойства можно менять, а какие лучше оставить фиксированными.
В какой‑то момент часть решений уходит из Figma в код. Цвета становятся токенами, отступы — значениями системы spacing, компоненты — библиотекой. И уже здесь особенно важно, чтобы визуальная логика была достаточно понятной и повторяемой.
Иначе разработчик начинает компенсировать пробелы на свое усмотрение. Где‑то добавляет еще один оттенок серого. Где‑то уменьшает отступ, чтобы все влезло. Где‑то делает новое состояние кнопки, потому что в макете его просто не было.
Так постепенно возникает уже вторая версия дизайн‑системы — не та, что лежит в Figma, а та, что реально работает в продукте.
Если они слишком сильно расходятся, проблема начинает расти сама. Дизайнер ориентируется на один набор компонентов, разработчик — на другой. Новые экраны собираются на разных основаниях, а любой редизайн становится дороже, потому что сначала нужно понять, какая версия вообще считается актуальной.
Бренд внутри продукта приходится проектировать заново
Наверное, главная ошибка — считать интерфейс последним носителем в списке: логотип, визитка, упаковка, сайт, приложение.
Сайт и приложение устроены иначе. Они не просто показывают бренд, ими пользуются. И это очень быстро меняет требования к любому визуальному решению.
Фирменный стиль может дать хороший исходный материал: характер, палитру, типографику, общий принцип работы с изображениями и графикой. Но дальше все это приходится переводить на язык интерфейса — состояний, компонентов, токенов, адаптивности, доступности и поведения.
Иногда после этого от исходной системы остается почти все. Иногда — только несколько ключевых признаков. Это нормально.
Гораздо хуже выглядит ситуация, когда команда пытается буквально перенести айдентику в продукт и потом месяцами борется с последствиями. Фирменный шрифт плохо работает в таблицах, яркий акцентный цвет приходится приглушать, сложная графика исчезает с мобильной версии, а уникальный композиционный прием просто невозможно повторять на сотнях экранов.
В какой‑то момент все равно приходится выбирать между точностью переноса и качеством интерфейса.
И если продуктом будут пользоваться каждый день, выбор довольно очевидный.
Хорошо сделанный цифровой бренд обычно не выглядит как брендбук, перенесенный в браузер. Он скорее сохраняет ту же интонацию, но говорит уже на другом языке. Где‑то тише, где‑то проще, где‑то технически строже. И именно поэтому в нем все еще узнается та же компания, даже когда на экране нет ни крупного логотипа, ни фирменного паттерна, ни эффектного рекламного приема.
