Привет, я Максим, веб-разработчик. Клиенты нередко обращаются ко мне с просьбой «просто сделать сайт» — без брендбука, без гайдлайнов, без утверждённой палитры. И каждый раз в процессе работы мы упираемся в одни и те же вопросы: «А какой оттенок синего использовать? А шрифт такой или такой? А логотип вот в таком контексте можно разместить?». Брендбук — это документ, который снимает эти вопросы раз и навсегда. Давайте разберём, что это такое, из чего состоит и когда без него можно обойтись, а когда он необходим.
Что такое брендбук и зачем он бизнесу
Брендбук — это документ, который фиксирует визуальные правила вашего бренда: логотип и его варианты, цветовая палитра, шрифты, стиль фотографий, иконок, иллюстраций, tone of voice (голос бренда в текстах). Для сайта это означает, что любой дизайнер или разработчик — сегодняшний, завтрашний, через три года — сможет создать страницу, баннер или рассылку, которая выглядит «по-вашему».
Без брендбука каждый новый подрядчик делает «как видит». Дизайнер лендинга использует один оттенок фирменного цвета, маркетолог создаёт баннер для Яндекс.Директа в другом, SMM-менеджер оформляет VK-группу в третьем. Через год у вас на руках — визуальная каша, и клиент перестаёт узнавать ваш бренд на разных площадках.
У меня был характерный случай. Компания по ремонту квартир обратилась за новым сайтом. Прежний подрядчик использовал тёмно-синий (#1a2b5e), предыдущий до него — ярко-голубой (#2196F3), а в соцсетях вообще был зелёный. Три визуально разных «лица» одной компании. Когда мы навели порядок с брендбуком и привели всё к единому стилю, клиенты начали узнавать бренд — и это измеримо отразилось на повторных обращениях.
Брендбук решает эту проблему фундаментально: открыл документ → увидел правила → сделал в соответствии. Единообразие — основа узнаваемости, а узнаваемость — основа доверия.
Что входит в брендбук для сайта: полный разбор
Состав брендбука зависит от масштаба бизнеса, но для сайта есть обязательный минимум, без которого документ теряет смысл.
Логотип и его варианты
Это не просто «картинка с названием». Грамотный раздел про логотип включает: основную версию (полноцветную, на светлом фоне), альтернативные варианты (горизонтальная, вертикальная, иконка — favicon, монохромная версия для печати), минимальный допустимый размер (ниже которого логотип теряет читаемость), защитное поле — минимальные отступы вокруг логотипа, в которых не должно быть никаких других элементов, а также запрещённые варианты использования: растянутый, повёрнутый, с изменёнными цветами, на фоне, сливающемся с логотипом.
Последний пункт — не формальность. Я регулярно вижу, как менеджеры наспех лепят логотип на неподходящий фон, искажают пропорции или добавляют тень «для красоты». Чёткие запреты в брендбуке ставят этому заслон.
Цветовая палитра
Основные и дополнительные цвета — обязательно в нескольких форматах: HEX (для веба), RGB (для экранов), CMYK (для полиграфии). Для сайта HEX — основной рабочий формат, но если компания печатает визитки и буклеты, CMYK критичен.
Минимальный набор для сайта:
- Основной фирменный цвет (бренд-цвет) — используется в логотипе, заголовках, акцентных элементах
- Дополнительный цвет — для кнопок, ссылок, подложек
- Цвет фона — основной и альтернативный (для секций)
- Цвет основного текста — чаще всего близкий к чёрному, но не чистый #000000
- Цвет второстепенного текста — для подписей, пояснений
- Цвета состояний: успех (зелёный), ошибка (красный), предупреждение (жёлтый), информация (синий)
Распространённая ошибка — указать только один-два цвета. В реальном интерфейсе нужно минимум 8–10 оттенков для комфортной работы. Я обычно рекомендую клиентам определить палитру из 5–6 основных цветов и для каждого — 3–5 оттенков (светлее и темнее). Это покрывает все сценарии от кнопок до фоновых градиентов.
Типографика
Выбор шрифтов — одно из самых важных решений в айдентике сайта. Раздел типографики включает:
- Основной шрифт для заголовков (обычно жирный и выразительный)
- Основной шрифт для текста (читаемый, нейтральный)
- Размеры заголовков (H1–H6) с конкретными значениями в пикселях
- Межстрочные интервалы (line-height) — для текста обычно 1.5–1.7
- Начертания: какие использовать (Regular, Medium, Bold), какие запрещены
- Максимальная ширина текстового блока (обычно 700–800 пикселей для комфортного чтения)
Для веб-команды идеально, если шрифтовые стили описаны через CSS-переменные или токены дизайн-системы. Это экономит часы при вёрстке — разработчик просто подключает переменные из брендбука, а не подбирает значения на глаз.
Из моей практики: кириллические шрифты — отдельная тема. Не все красивые шрифты хорошо поддерживают кириллицу. Я неоднократно сталкивался с ситуацией, когда дизайнер выбирает стильный латинский шрифт, а в кириллической версии половина символов выглядит кривовато. Проверяйте кириллицу на этапе выбора — потом переделывать дорого.
Стиль иллюстраций и фотографий
Каким должен быть визуальный контент на сайте? Этот раздел отвечает на вопросы: реальные фотографии или иллюстрации? Если фотографии — тёплые или холодные тона, с людьми или без, постановочные или репортажные? Если иллюстрации — плоские или объёмные, минималистичные или детальные?
Без этих правил через год на сайте образуется «винегрет» из стоковых фотографий разных стилей, рисованных иконок и AI-сгенерированных картинок. Я всегда рекомендую включать в брендбук примеры — «вот так хорошо, вот так плохо». Наглядные примеры работают лучше любых текстовых описаний.
Иконки
Стиль иконок задаёт тон всему интерфейсу. Определите: линейные (outline) или заливочные (filled)? Толщина обводки (1.5px, 2px)? Скруглённые углы или острые? Единый набор или допускается смешение стилей?
Для сайтов я обычно рекомендую выбрать один иконочный набор (Lucide, Phosphor, Heroicons) и придерживаться его. Смешивать иконки из разных наборов — верный способ получить визуальный хаос.
UI-компоненты
Для сайта это ключевой раздел. Он описывает стандартные элементы интерфейса:
- Кнопки — все состояния: обычная, при наведении (hover), при нажатии (active), неактивная (disabled). Размеры: маленькая, средняя, большая. Варианты: основная (primary), второстепенная (secondary), текстовая (ghost)
- Формы — стиль полей ввода, выпадающих списков, чекбоксов, радиокнопок. Состояния: пустое, заполненное, с ошибкой, в фокусе
- Карточки — товаров, услуг, статей блога. Скругление углов, тень, отступы
- Модальные окна — размеры, стиль затемнения фона, анимация появления
- Уведомления и алерты — цвета и формат для различных типов сообщений
По сути, это уже переход к дизайн-системе — но для малого и среднего бизнеса достаточно описать основные компоненты в рамках брендбука.
Tone of voice: как бренд разговаривает
Помимо визуальных правил, хороший брендбук включает раздел о голосе бренда — tone of voice. Это описание того, как компания общается с клиентами в текстах: на сайте, в соцсетях, в рассылках, в рекламе.
Вы обращаетесь к клиенту на «ты» или на «вы»? Допускаете шутки и неформальные обороты или держите деловой стиль? Используете профессиональный жаргон или объясняете всё простым языком?
Tone of voice — это не просто стилистическая прихоть. Он напрямую влияет на то, как вас воспринимают. Юридическая компания с неформальным тоном вызывает недоверие. Молодёжный бренд одежды с канцелярским языком — скуку. Голос должен соответствовать аудитории и позиционированию.
Сколько стоит разработка брендбука в 2026 году
Стоимость зависит от объёма работ, опыта агентства и глубины проработки.
Мини-гайдлайн для малого бизнеса (10–15 страниц): 30 000–80 000 рублей. Включает логотип и его варианты, цветовую палитру, шрифты, базовые правила использования. Этого достаточно для небольшой компании с одним сайтом и парой соцсетей.
Полноценный брендбук для среднего бизнеса (30–50 страниц): 100 000–300 000 рублей. Добавляется tone of voice, детальные примеры применения на различных носителях, UI-кит для сайта, правила оформления рекламных материалов.
Комплексная разработка для крупных компаний: от 500 000 рублей. Включает маркетинговые исследования, разработку позиционирования, нейминг (если нужно), полную дизайн-систему с кодовой базой компонентов.
Для большинства моих клиентов — малого и среднего бизнеса — оптимальный вариант находится в диапазоне 50 000–150 000 рублей. Этого достаточно, чтобы зафиксировать все ключевые правила и обеспечить консистентность бренда.
Брендбук vs дизайн-система: в чём разница
Эти понятия часто путают, но разница принципиальная.
Брендбук — про визуальный стиль бренда в целом. Он отвечает на вопрос «как должен выглядеть наш бренд на любом носителе». Это документ для всех: дизайнеров, маркетологов, SMM-менеджеров, партнёров, типографий.
Дизайн-система — про конкретные компоненты интерфейса для разработки: кнопки с кодом, инпуты с состояниями, таблицы, карточки, модальные окна. Это рабочий инструмент для дизайнеров и разработчиков, часто реализованный как библиотека компонентов в Figma и код на React/Vue.
Для крупных проектов с несколькими продуктами (сайт, мобильное приложение, личный кабинет) нужно и то, и другое. Брендбук задаёт стратегию, дизайн-система — тактику.
Для малого бизнеса достаточно компактного брендбука с разделом про UI-компоненты. Отдельная дизайн-система на этом этапе — избыточная роскошь.
Когда брендбук окупается
Брендбук начинает окупаться в тот момент, когда с вашим брендом работает больше одного человека. Если вы единственный, кто делает всё — от сайта до постов в VK — вы и так держите стиль в голове. Но как только появляется второй дизайнер, новый подрядчик или SMM-фрилансер — без брендбука начинается разнобой.
Ещё один сценарий: вы меняете веб-подрядчика. Без брендбука новый разработчик начинает «с нуля» — ковыряет текущий сайт, пытается угадать цвета и шрифты по скриншотам. С брендбуком — открывает документ и сразу видит все правила. Экономия на этапе передачи проекта может составить 50 000–100 000 рублей — и это уже частично окупает затраты на создание самого брендбука.
Практический совет: начните с минимума
Не усложняйте. Если у вас маленькая компания и ограниченный бюджет — начните с одностраничного гайдлайна: логотип, три цвета, два шрифта, стиль кнопок. Оформите это в PDF или даже в Notion-документе. Это лучше, чем ничего.
По мере роста бизнеса расширяйте: добавляйте правила для иллюстраций, описывайте tone of voice, формализуйте UI-компоненты. Брендбук — живой документ, который растёт вместе с компанией, а не высеченная в камне скрижаль, которую нужно создать идеальной с первого раза.