Брендбук, фирменный стиль и гайдлайн: в чём разница
Фирменный стиль — это сами элементы бренда: логотип, цвета, шрифты, графические приёмы и основные носители вроде визитки, бланка и шаблона презентации. Брендбук — это правила, по которым эти элементы применяют: как ставить логотип, какие сочетания цветов допустимы, каким шрифтом набирать заголовки и как выглядит пост в соцсетях. Без правил стиль постепенно размывается: каждый новый подрядчик понимает его по-своему.
Гайдлайном часто называют короткую версию брендбука — только самое нужное для ежедневной работы: логотип, цвет, шрифты и пару примеров. Полный брендбук отвечает и на редкие вопросы: как бренд говорит с клиентами, как выглядит интерфейс, что делать с подбрендами. Чёткой границы между терминами нет, поэтому на брифе важнее договориться о составе, чем о названии.
Что входит в брендбук компании
Состав зависит от того, где живёт бренд. Компании, у которой есть офис, вывеска и полиграфия, нужны одни разделы, сервису с сайтом и приложением — другие. Базовый набор выглядит так:
Три вещи, которые легко упустить. Первая — правил для мелких размеров: как логотип выглядит в фавиконе и в аватарке соцсети. Вторая — примеров для текста: голос бренда описан словами «дружелюбный и экспертный», но не показан ни одной парой «не так / так». Третья — исходников: правила есть, а шаблона презентации или поста, с которого можно начать, нет.
- Логотип: версии (цветная, монохромная, на тёмном фоне, знак отдельно), охранное поле, минимальный размер, недопустимые искажения.
- Цвет: основные и дополнительные цвета с кодами для экрана и печати, пропорции, допустимые сочетания текста и фона.
- Типографика: шрифты, их лицензии, иерархия заголовков и текста, правила для цифр и цен.
- Графические приёмы: модуль и сетка, паттерны, иконки, иллюстрации, стиль фото.
- Носители: визитка, бланк, презентация, соцсети, реклама, вывеска или навигация — с примерами и шаблонами.
- Голос бренда: как бренд обращается к клиенту, какие слова использует и каких избегает.
- Запреты: типичные ошибки применения, показанные на примерах «так нельзя».
Брендбук для сайта и приложений: токены и компоненты
Если у компании есть сайт, личный кабинет или приложение, классического набора «логотип, цвет, шрифты» мало. Разработчику нужны точные значения: цвета, размеры шрифтов, отступы, радиусы скругления, длительности анимации. Эти значения называют дизайн-токенами. Их задают один раз, и они одинаково работают в Figma и в коде.
Второй слой — компоненты: кнопки, поля, карточки, таблицы, уведомления, пустые состояния. Когда они описаны в брендбуке вместе с правилами применения, новые страницы собираются из готовых деталей, а сайт, реклама и приложение выглядят как одна семья, даже если их делают разные команды.
Отдельно стоит проверить контраст. По стандарту доступности WCAG 2.2 обычный текст должен контрастировать с фоном не меньше чем 4,5:1, иначе часть людей его просто не прочитает. Хороший брендбук заранее говорит, какие пары «текст — фон» допустимы, а не оставляет это на глаз.
Как устроен брендбук «Новы»
«Нова» — экосистема для малого бизнеса: онлайн-кассы, магазин приложений, ОФД, маркировка. Вокруг неё работают три продукта с разными задачами: интернет-магазин Нова.Маркет, партнёр НоваКлаб с лендингами и рекламой и сервисный центр Нова Сервис. Нужен был общий фундамент, из которого все они собираются как одна семья, и брендбук, который исполнитель понимает за минуту.
В результате получилась бренд-система:
- Логотип: 24 SVG-файла — основной знак, три подбренда, версии в цвете, на тёмном, монохромные, знак, вордмарк и фавикон.
- Токены: больше 150 значений — цвет, типографика, модуль, отступы, радиусы, глубина и движение, включая режим «меньше движения».
- Компоненты: 30 элементов с состояниями — от кнопок и полей до тарифов, таблиц сравнения и пустых состояний.
- Иконки: 95 штук одной толщины; иллюстрации, векторные рендеры устройств.
- Голос: семь правил с парами «не так / так» — например, кнопка называет действие, а ошибка говорит, что делать.
- Брендбук-страница из 11 разделов с живыми компонентами и переключателем четырёх подбрендов.
Подбренды: одна система, разные продукты
Самый частый вопрос растущей компании — что делать, когда появляются новые продукты. Нарисовать каждому свой стиль — потерять узнаваемость. Сделать всё одинаковым — потерять различие между продуктами. В «Нове» подбренды различаются только парой «поле + акцент»: кобальт и янтарный ценник у Маркета, слива и малина у Клаба, бирюза и мята у Сервиса. Всё остальное общее: шрифты, модуль, компоненты, янтарная «лампа», которой всегда отмечено главное действие.
На брендбук-странице это видно вживую: переключаете подбренд — и вся страница перекрашивается одним действием, а таблица контраста пересчитывается из токенов. Такой брендбук сам доказывает, что система работает, а не только описывает её.
PDF или сайт: какой формат выбрать
Брендбук в PDF подходит, когда бренд живёт в основном на печатных носителях, вывесках и в соцсетях, а с ним работают несколько подрядчиков. Его легко отправить, распечатать и приложить к договору.
Брендбук-сайт нужен, когда у бренда есть цифровые продукты и с ним работают разработчики. Цвета копируются кодом, логотипы и шаблоны скачиваются по ссылке, компоненты можно посмотреть в живом виде, а обновления сразу видят все. Один адрес вместо папки с версиями файлов «финал_2_исправленный».
Можно начать с PDF и перейти на сайт позже: правила, токены и компоненты при этом не переделываются, меняется только способ показа. Важно с самого начала хранить значения цветов и размеров в одном месте, а не переписывать их вручную в каждом файле.
Сколько стоит разработка брендбука
У нас брендбук на основе готового фирменного стиля стоит от 90 000 ₽, ориентировочно от 2 недель. Если стиля ещё нет, сначала разрабатываем фирменный стиль — от 120 000 ₽, ориентировочно от 3 недель. Брендбук в виде сайта с живыми компонентами, кодами цветов и скачиваемыми файлами — от 150 000 ₽, ориентировочно от 4 недель.
Точная сумма зависит от нескольких вещей:
Работа идёт по этапам. Сначала собираем все носители, где бренд уже живёт, и смотрим, где стиль расходится. Затем описываем правила и согласуем структуру брендбука. После этого показываем правила на примерах и шаблонах, проверяем их на реальных задачах — баннере, презентации, странице сайта — и передаём брендбук с исходниками.
- Есть ли готовый стиль или его нужно создать либо доработать.
- Число носителей и шаблонов, которые нужно показать на примерах.
- Цифровая часть: токены и компоненты для сайта и приложения.
- Подбренды и продуктовые линейки.
- Формат: PDF или сайт.
Как понять, что брендбук работает
Хороший брендбук заметен по тому, что вопросов становится меньше. Подрядчик собирает баннер без пяти кругов правок. Новый дизайнер в команде делает презентацию в стиле с первого раза. Разработчик берёт цвет из токена, а не пипеткой со скриншота. Если брендбук открывают только при запуске, а дальше работают «по памяти», значит, он слишком длинный или в нём нет ответов на ежедневные вопросы.
Если вашему бренду нужны правила или вы хотите посмотреть, как это выглядит вживую, откройте кейс «Нова» и переключите подбренды. А чтобы обсудить ваш брендбук, напишите нам в Telegram, позвоните или отправьте письмо: начнём с того, кто и где будет им пользоваться.
