Компания завершает работу над айдентикой и передает разработчикам брендбук. В нем есть логотип, фирменные цвета, шрифты, охранные поля, примеры наружной рекламы и несколько макетов для социальных сетей. Кажется, что для запуска сайта этого должно хватить.
Но уже на первом экране появляются вопросы. Какого размера должен быть логотип на мобильном устройстве? Что делать с фирменным шрифтом, если он долго загружается или плохо читается в мелком кегле? Как выглядит акцентный цвет в неактивной кнопке? Можно ли уменьшить декоративный элемент, чтобы он не занимал половину экрана? Как должна вести себя композиция при переходе с широкого монитора на смартфон?
Обычный брендбук отвечает на вопросы о внешнем виде бренда, но редко описывает его поведение в цифровой среде. Разработчики и продуктовые дизайнеры вынуждены достраивать недостающие правила сами. В результате сайт может использовать правильные цвета, шрифты и логотип, но все равно выглядеть так, будто его создавали отдельно от остальной айдентики.
Digital-гайд нужен именно для этой зоны. Он переводит визуальный стиль из статичных макетов в систему, которая умеет меняться вместе с экраном, контентом и действиями пользователя.
Брендбук показывает результат, а сайту нужны правила поведения
Большинство классических носителей существует в заранее известном формате. Размер визитки не изменится после печати, плакат не станет уже из-за длинного заголовка, а упаковка не переключится в темную тему. Дизайнер собирает композицию один раз и контролирует ее окончательный вид.
С сайтом все устроено иначе. Один и тот же экран открывается на ноутбуке, телефоне и большом мониторе. Текст может оказаться длиннее, чем в макете. Пользователь увеличит масштаб страницы, отключит изображения или зайдет с медленным интернетом. Кнопка будет находиться в обычном, активном, неактивном и загрузочном состояниях. В форме появятся ошибки, а в каталоге однажды не окажется товаров.
Поэтому демонстрационного макета недостаточно. Разработчику важно понимать, что в нем является постоянным, а что может измениться. Например, крупный фирменный заголовок занимает треть первого экрана. Это обязательная пропорция или решение только для конкретной фразы? Изображение обрезается по фигуре человека или по центру? Цветная плашка всегда касается края экрана или может находиться внутри сетки?
Если эти вопросы не разобраны, команда начинает воспроизводить картинку буквально. На широком экране все выглядит близко к презентации, а на мобильном элементы уменьшаются до тех пор, пока не перестают помещаться. Формально стиль сохранен, но пользоваться страницей неудобно.
Digital-гайд должен показывать не только образцовый результат, но и принцип адаптации. Как перестраивается первый экран, какие элементы исчезают раньше остальных, где меняется композиция и что остается узнаваемым даже в самом маленьком формате. Это уже не приложение к брендбуку, а рабочая инструкция для дизайна и разработки.
Логотипу нужны версии для реальных интерфейсных условий
В брендбуках подробно описывают охранное поле и минимальный размер логотипа. Однако минимальный размер обычно указывается для печати или одного условного экрана. На сайте вариантов использования гораздо больше.
Полная версия с дескриптором может хорошо смотреться в шапке на десктопе, но стать нечитаемой на телефоне. Знак без названия подходит для фавикона, но не всегда понятен новым посетителям. Горизонтальный логотип не помещается в узкую панель, а тонкие линии пропадают на экранах с небольшой плотностью пикселей.
Команде нужно заранее получить набор подготовленных версий: основную, компактную, монохромную, инверсную и знак для малых размеров. Важно не просто положить их в папку, а указать, где используется каждая. Иначе разработчик выберет файл по принципу «этот лучше помещается» и может поставить знак там, где пользователю необходимо видеть полное название компании.
Отдельно стоит описать поведение логотипа в шапке сайта. Иногда при прокрутке она становится ниже, и полная версия заменяется сокращенной. В мобильном меню появляется другая композиция. На экране загрузки знак может использоваться без текста, а в подвале – вместе с юридическим названием. Для всех этих ситуаций нужны понятные решения.
Есть и техническая сторона. Логотип лучше передавать в SVG, проверив его отображение в браузерах и на разных фонах. Если в файле остались лишние маски, встроенные растровые изображения или некорректные обводки, проблемы обнаружатся уже после верстки. Разработчик исправит их на свое усмотрение, и на сайте появится версия, которой нет в исходной системе.
Полезно также показать, что происходит с логотипом поверх фотографии или видео. Одного правила «использовать белую версию на темном фоне» мало: фон может быть неоднородным, двигаться и менять контраст. Иногда потребуется затемняющая подложка, фиксированная зона изображения или отказ от размещения логотипа поверх контента.
Фирменной типографике не хватает экранной иерархии
В брендбуке обычно указаны одна или две гарнитуры, несколько начертаний и примеры заголовков. Для сайта этого недостаточно. Разработчику нужен не перечень шрифтов, а полноценная типографическая система.
Сначала следует проверить, предназначена ли выбранная гарнитура для веба. У компании может быть лицензия только на печатное использование. Иногда шрифт доступен для сайта, но весит слишком много, не содержит нужных языков или плохо выглядит в мелком размере. В презентации эти ограничения незаметны, а после запуска они влияют и на скорость загрузки, и на чтение текста.
Затем нужно собрать иерархию: основные заголовки, подзаголовки, текст, подписи, элементы навигации, кнопки, поля форм и служебные сообщения. Для каждого уровня задаются не только кегль и начертание, но и межстрочный интервал, трекинг, допустимая ширина строки и поведение на разных экранах.
Здесь часто обнаруживается, что выразительный прием из айдентики нельзя переносить в интерфейс без изменений. Например, очень узкий акцидентный шрифт хорошо работает в коротких рекламных заголовках, но плохо читается в меню. Курсив создает нужную интонацию на плакате, однако мешает быстро считывать названия разделов. Прописные буквы подходят для трех слов, но превращают длинную кнопку в плотное пятно.
В digital-гайде нужно прямо разделить акцидентную и функциональную типографику. Фирменная гарнитура может отвечать за крупные заголовки, цифры или отдельные фразы, а более спокойная – за интерфейс и длинное чтение. Это не ослабляет узнаваемость. Пользователь скорее заметит бренд в нескольких уверенных акцентах, чем оценит попытку набрать необычным шрифтом каждый служебный текст.
Размеры тоже не стоит фиксировать только в пикселях для одного макета. Лучше показать диапазоны и логику изменения. Заголовок может плавно уменьшаться в зависимости от ширины экрана или переключаться между несколькими значениями на контрольных точках. Главное, чтобы команда понимала, какую иерархию требуется сохранить, если точный размер приходится менять.
Отдельное правило нужно для непредсказуемого контента. Что происходит, если название услуги занимает четыре строки? Можно ли переносить слова? Есть ли ограничение по длине кнопки? Как отображается число с большим количеством знаков? Несколько таких примеров принесут разработчикам больше пользы, чем идеально собранный экран с короткими демонстрационными фразами.
Цвет на сайте выполняет не только фирменную функцию
В айдентике цвет помогает узнавать бренд и задает настроение. В интерфейсе он дополнительно сообщает, что можно нажать, где произошла ошибка, какое действие выбрано и доступен ли элемент сейчас. Если все яркие оттенки используются только ради выразительности, пользователь перестает понимать их значение.
Особенно часто проблема возникает с основным фирменным цветом. Команда ставит его на кнопки, ссылки, иконки, плашки, заголовки и декоративные элементы. В результате на странице слишком много одинаковых акцентов. Главная кнопка не выделяется, ссылка выглядит как часть оформления, а уведомление невозможно быстро отличить от рекламы.
Digital-гайд должен распределять роли. Один и тот же оттенок может оставаться фирменным, но применяться в ограниченных сценариях. Например, насыщенный цвет используется для основного действия, более спокойная версия – для фона, а декоративная графика получает отдельную палитру. Тогда бренд остается заметным, не мешая интерфейсной иерархии.
Для интерактивных элементов нужны состояния. Как меняется кнопка при наведении и нажатии? Как выглядит уже посещенная ссылка? Что происходит с неактивным полем? Каким цветом показываются ошибка, предупреждение и успешное действие? Если таких правил нет, разработчик самостоятельно затемняет или осветляет фирменный оттенок. Через несколько страниц на сайте появляется набор близких цветов, происхождение которых никто не помнит.
Контраст тоже нельзя оставлять на финальную проверку. Светлый фирменный цвет может отлично смотреться на упаковке, но не подходить для текста или тонкой иконки на белом фоне. Нужна цифровая палитра с проверенными сочетаниями: основной текст, второстепенный текст, фон, границы, ссылки, действия и системные сообщения.
Иногда приходится вводить оттенки, которых не было в исходном брендбуке. Серые цвета для границ, фоны карточек, затемнения для изображений, состояния элементов – все это нормальная часть цифровой системы. Ошибка не в расширении палитры, а в том, что оно происходит бессистемно уже во время разработки.
Если продукт предусматривает темную тему, простая инверсия не подойдет. Цвета на темном фоне воспринимаются иначе, яркие акценты могут начать светиться, а нейтральные оттенки – потерять иерархию. Для такого режима нужна отдельная проверка, а не автоматическая замена белого на черный.
Сетка должна меняться вместе с экраном
Фирменная композиция нередко строится на заметном принципе: крупном поле, асимметрии, смещенной фотографии, вертикальной линии или плотном блоке типографики. На статичном носителе дизайнер точно контролирует отношения между элементами. На сайте эта конструкция должна пережить десятки ширин экрана.
Если в digital-гайде показан только десктоп, мобильную версию приходится фактически проектировать заново. Разработчик переносит блоки друг под друга, дизайнер уменьшает декоративные элементы, а важный композиционный прием исчезает. Сайт остается аккуратным, но становится похожим на любой другой шаблон.
Поэтому нужна адаптивная сетка. В ней задаются максимальная ширина контента, количество колонок, внешние поля, расстояния между блоками и контрольные точки, на которых композиция перестраивается. При этом полезно объяснить не только значения, но и приоритеты.
Допустим, айдентика строится на большом свободном поле слева. На мобильном экране сохранить его в прежней пропорции невозможно. Значит, характер можно передать другим способом: увеличить интервал между смысловыми блоками, оставить заметный отступ у заголовка или сместить изображение относительно текста. Буквальное повторение исчезает, а композиционная интонация остается.
Отдельного внимания требуют декоративные элементы. В презентации фирменная графика может находиться в каждом макете, потому что помогает показать идею. На сайте она конкурирует с контентом, увеличивает высоту страниц и иногда мешает нажимать на элементы. Digital-гайд должен разрешать ее сокращение или полное отключение на отдельных экранах.
Здесь полезно заранее определить несколько режимов плотности. Промостраница может быть выразительной и свободной, каталог – более собранным, личный кабинет – максимально функциональным. Если пытаться придать всем разделам одинаковую визуальную насыщенность, либо маркетинговые страницы станут слишком сухими, либо рабочий интерфейс окажется перегруженным.
Компонентам нужны состояния, которых нет в статичном макете
Даже подробный дизайн главной страницы охватывает лишь небольшую часть будущего сайта. Настоящий объем работы скрыт в повторяющихся компонентах: кнопках, карточках, формах, меню, фильтрах, уведомлениях, таблицах и модальных окнах.
В презентации обычно показано идеальное состояние. В карточке есть изображение, заголовок занимает две строки, цена помещается в одну, а кнопка доступна. На рабочем сайте изображение может не загрузиться, название – растянуться на пять строк, товара не окажется в наличии, а цена потребует пояснения. Если команда не подготовилась к этим ситуациям, каждый компонент начинает ломаться по-своему.
Digital-гайд должен показать основные состояния хотя бы для тех элементов, которые напрямую влияют на действие пользователя. Обычная кнопка, наведение, нажатие, фокус с клавиатуры, загрузка и недоступность выглядят похоже, но несут разный смысл. Поле ввода требует состояний заполнения, ошибки, успешной проверки и блокировки. Карточке может понадобиться вариант без изображения, с длинным текстом или дополнительной меткой.
Фирменный характер не обязан исчезать в служебных сценариях. Он может проявляться в форме кнопки, движении индикатора загрузки, стиле иконок или интонации сообщения об ошибке. Однако сначала компонент должен понятно выполнять свою функцию. Необычная анимация не компенсирует кнопку, которую пользователь не узнает как кнопку.
Хорошо, когда цифровые правила собраны не только в PDF, но и в библиотеке компонентов. Дизайнер берет готовую кнопку из общего файла, а разработчик использует соответствующий компонент в коде. Если каждый собирает элементы заново, расхождения появляются очень быстро: меняется радиус скругления, высота поля, толщина иконки или расстояние между текстом и кнопкой.
Для связи между дизайном и кодом удобно использовать общие переменные: значения цветов, отступов, размеров, теней и радиусов. Их часто называют дизайн-токенами. Название здесь не так важно, как единая логика. Вместо случайного набора значений команда получает систему, где изменение базового параметра можно последовательно перенести на весь продукт.
Изображения, иконки и движение требуют отдельных сценариев
Раздел о фотографиях в брендбуке часто описывает атмосферу съемки: естественный свет, определенный ракурс, живые эмоции, спокойная цветокоррекция. Для сайта к этому добавляются технические вопросы.
Нужно понимать, как фотография обрезается в горизонтальном и вертикальном форматах, где оставлять место под текст, можно ли затемнять изображение и что показывать, пока файл загружается. Если важный объект расположен у края кадра, автоматическая обрезка на мобильном устройстве может убрать его полностью.
Полезно задать безопасные зоны и несколько допустимых пропорций. Для изображений с людьми стоит показать, как сохранять лицо и направление взгляда. Для предметной съемки – насколько крупно можно кадрировать продукт. Для фоновых изображений – где должна находиться спокойная область под текст.
Иконки нуждаются в похожей системе. Одного общего стиля недостаточно. Нужны правила размера, толщины линии, оптического выравнивания и поведения рядом с текстом. Важно разделить декоративные и функциональные иконки. Первые могут быть выразительными, вторые должны быстро считываться и не заставлять пользователя разгадывать авторскую метафору.
Отдельный вопрос – анимация. После запуска сайта разработчики часто добавляют ее самостоятельно, ориентируясь на технические возможности. Элементы начинают подпрыгивать, медленно появляться или двигаться вслед за курсором, хотя в остальной айдентике для такой пластики нет оснований.
Digital-гайд может задать характер движения: быстрое или плавное, сдержанное или заметное, линейное или пружинящее. Следует указать примерную длительность переходов, допустимую амплитуду и ситуации, где анимация действительно нужна. Для кнопки это короткая реакция на действие, для модального окна – понятное появление, для фирменной графики – более выразительный сценарий.
При этом необходимо учитывать пользователей, которые отключают или сокращают анимацию в настройках системы. Сайт должен сохранять смысл и функциональность без движения. Если без эффекта пропадает важное сообщение или невозможно понять смену состояния, значит, анимация взяла на себя слишком много.
Голос бренда продолжается в кнопках и сообщениях об ошибках
В работе над сайтом тексты часто делят на «важные» и «технические». К первым относят заголовки, описание компании и преимущества. Кнопки, подсказки, уведомления и ошибки заполняют позже, иногда уже во время разработки.
Но пользователь сталкивается с брендом не только на первом экране. Он видит его, когда не может войти в аккаунт, ошибается в номере телефона, ждет загрузки или получает сообщение об отсутствии товара. В такие моменты интонация особенно заметна.
Если бренд говорит спокойно и профессионально, шутка в сообщении об ошибке может прозвучать неуместно. Если коммуникация в целом дружелюбная, сухое «некорректное значение поля» выглядит чужим. Команде нужны примеры того, как бренд объясняет проблему, просит подождать, подтверждает действие и помогает вернуться к следующему шагу.
Digital-гайд не обязан содержать готовый текст для каждой ситуации. Достаточно описать тон, допустимую степень неформальности и несколько принципов. Например, сначала сообщать, что произошло, затем подсказывать действие; не обвинять пользователя; не прятать смысл за шуткой; не обещать срок, который система не умеет определить.
Важно договориться и о названиях действий. На одном экране пользователь «отправляет заявку», на другом «получает консультацию», на третьем «связывается с нами». Иногда это оправдано контекстом, но чаще показывает, что тексты писали разные люди. Единый словарь интерфейса делает продукт понятнее и одновременно поддерживает голос бренда.
Даже регистр букв и длина подписей требуют правил. Если в рекламной коммуникации бренд часто использует прописные заголовки, это не значит, что так же нужно оформлять кнопки и пункты меню. Интерфейс читают быстрее и в более напряженных ситуациях, поэтому выразительность здесь приходится дозировать.
Digital-гайд должен оставаться рабочим после запуска
Сайт не заканчивается в день публикации. Появляются новые разделы, услуги, формы и рекламные страницы. Меняется команда, подключаются подрядчики, а часть решений принимается уже без авторов первой версии.
Если цифровые правила существуют только внутри большого PDF, через несколько месяцев им перестают пользоваться. Документ трудно обновлять, в нем долго искать конкретное состояние кнопки, а исходные компоненты все равно хранятся отдельно. Постепенно у дизайнера, разработчика и маркетолога появляются разные версии одной системы.
Поэтому digital-гайд лучше собирать из нескольких связанных частей. Краткий документ объясняет принципы и характер бренда в цифровой среде. Дизайн-библиотека содержит актуальные компоненты и их состояния. В коде хранятся реализованные элементы и переменные. Отдельный раздел фиксирует решения, которые появились после запуска.
У каждого элемента должен быть понятный статус. Что уже утверждено? Что проходит тестирование? Какие компоненты устарели и больше не используются? Без этого команда продолжает копировать старые решения из предыдущих макетов, даже если в новом разделе они уже исправлены.
Нужно определить и ответственность. Кто может добавить новый цвет, изменить компонент или расширить набор иконок? Кто проверяет, что решение соответствует бренду и не ломает интерфейс? Если владельца системы нет, digital-гайд быстро превращается в архив первоначального проекта.
Обновлять его после каждой мелкой правки не требуется. Но повторяющиеся решения стоит переносить в общую систему. Если третий проект подряд использует новый тип карточки, это уже не исключение. Компонент нужно описать, проверить на разных данных и сделать доступным остальной команде.
Полезный digital-гайд не пытается заранее нарисовать все страницы сайта. Он дает команде достаточно опоры, чтобы создавать новые экраны без постоянного возвращения к авторам айдентики. При этом правила не должны мешать исправлять неудобные решения только потому, что они однажды попали в презентацию.
Сайт становится частью бренда не в тот момент, когда на него поставили правильный логотип. Связь появляется, когда типографика, цвет, композиция, движение, тексты и поведение компонентов выражают один характер и при этом помогают человеку выполнить свою задачу.
Именно этого обычно не хватает классическому брендбуку. Он показывает, как бренд выглядит на подготовленных носителях. Digital-гайд объясняет, как этот бренд ведет себя там, где формат постоянно меняется, контент невозможно предусмотреть заранее, а каждый элемент должен не только выглядеть правильно, но и работать.
Комментарии