Что входит в брендбук и что заказать: логотип, фирменный стиль или дизайн-система

Полный брендбук отвечает сразу на два вопроса: кто мы и как мы выглядим. Поэтому внутри у него два слоя, и у каждого свои читатели.

Смысловой слой — это платформа бренда: миссия, ценности, позиционирование, обещание клиенту. Сюда же входят tone of voice — то, как компания говорит в текстах, письмах и соцсетях, — и правила обращения с названием и слоганом. Этот слой читают руководители, маркетологи, авторы текстов и отдел продаж.

Визуальный слой — это логотип и его версии, палитра, шрифты, фирменная графика, фотостиль и макеты носителей: документы, презентация, соцсети, вывеска, мерч. С ним работают дизайнеры, типографии, подрядчики по рекламе и сайту.

Универсального оглавления у брендбука нет. У производственной компании раздел про упаковку и выставочные стенды может занять половину документа. У IT-продукта такого раздела не будет вовсе, зато появятся интерфейсные иконки. Одно правило при этом работает всегда: нет смыслового слоя — значит, это гайдлайн, а не брендбук. Гайдлайн не хуже и не лучше, это просто другой документ под другую задачу.

Единого стандарта за этими словами нет. Одни называют брендбуком любой PDF с логотипом и цветами, другие — только документ со стратегией. Логобук и гайдлайн в одном договоре означают одно и то же, в другом — разные вещи. Спорить о терминах бесполезно. Полезнее различать документы по вопросу, на который каждый из них отвечает.

• Логотип — знак и его версии. Вопрос: «чем нас подписать».
• Фирменный стиль — визуальная система вокруг знака: палитра, шрифты, графика, носители. Вопрос: «как мы выглядим везде».
• Гайдлайн, он же логобук, — правила применения этой системы. Вопрос: «как не испортить стиль», читатель — подрядчик.
• Брендбук — гайдлайн плюс платформа и tone of voice. Вопрос: «кто мы и как говорим», читатель — вся компания.
• Дизайн-система — компоненты и правила сборки интерфейсов. Вопрос: «как собирать экраны», читатели — дизайнеры и разработчики.

Отсюда две типичные ошибки. Первая: компания заказывает «брендбук», рассчитывая на стратегию, а получает тридцать страниц правил про логотип и цвета. Вторая — обратная: компания платит за исследование аудитории и платформу, хотя ей нужны были только понятные правила для двух подрядчиков, которые делают листовки и посты. Заказывайте результат, а не название документа. В техническом задании перечислите, что должно лежать в папке и кто будет этим пользоваться.

Хороший пример того, где кончаются возможности визуального документа, — NASA. В 1974 году агентство заказало Ричарду Данну и Брюсу Блэкберну новый логотип, а в 1975-м приняло «worm» — красное слово NASA, в котором у букв «A» нет поперечин. Те же авторы сделали «Graphics Standards Manual» — образцовый гайдлайн, который сегодня входит в постоянные коллекции MoMA и SFMOMA. В 2015 году кампания на Kickstarter по его переизданию собрала почти миллион долларов.

Но в 1992 году администратор Дэниел Голдин вернул старую эмблему «meatball»: сотрудники так и не приняли «червяка». «Worm» вернулся лишь в 2020 году — и только для пилотируемых полётов. Мы читаем эту историю так: мануал был безупречен как свод правил, но правила не объясняли людям, почему им стоит выглядеть именно так. В этом и состоит разница между гайдлайном и брендбуком — только в масштабе космического агентства.

Дизайн-система — это живой набор стандартов, по которому интерфейсы собирают из переиспользуемых компонентов и паттернов. Так её определяет Nielsen Norman Group. Там же видно, как она соотносится с привычными документами: стайлгайд — лишь одна из её частей.

• Стайлгайды — правила бренда, контента и визуального дизайна.
• Библиотека компонентов — кнопки, поля, карточки с параметрами, состояниями (обычное, при наведении, в фокусе, неактивное) и готовым кодом.
• Библиотека паттернов — типовые сборки, например шапка страницы из заголовка, хлебных крошек, поиска и кнопок.
• Дополнительные материалы — файлы в Figma, логотипы, шрифты, иконки.

Обычно всё это живёт не в PDF, а на отдельном сайте — так устроены «Material Design» от Google и «Carbon» от IBM. Цель системы — единообразие в масштабе и меньше дублирования. Дизайнер и разработчик говорят на одном языке, а разработчик берёт готовый компонент, вместо того чтобы писать его заново.

Для заказчика главное отличие — во времени жизни. Брендбук сдают и принимают как готовую вещь с номером версии. Брендбук выпускают один раз, дизайн-систему ведут годами. Появился новый тип страницы — в системе появляется новый паттерн. Изменилась кнопка — она меняется сразу на всех экранах.

Для B2B-компании с сайтом или личным кабинетом граница проходит так. Брендбук говорит: фирменный цвет — синий, шрифт — такой-то, тон — спокойный и экспертный. Дизайн-система отвечает на вопросы, которых в брендбуке нет. Какой оттенок синего у неактивной кнопки? Каким кеглем набрана подпись под полем? Как выглядят ошибка в форме и пустая таблица? Брендбук служит входными данными для дизайн-системы, но не заменяет её.

Дизайн-система нужна, если вы узнаёте себя хотя бы в одном пункте:

• Экраны и страницы делают несколько человек или подрядчиков.
• Типов страниц много: каталог, новости, вакансии, карточки.
• Интерфейс растёт каждый месяц: есть кабинет, продукт или админка.

Если у вас лендинг или сайт из нескольких страниц, который правит один человек, заводить систему рано: хватит гайдлайна и аккуратного макета. Начать можно с самой маленькой её единицы — токенов, то есть цветов, кеглей и интервалов, записанных как переменные. Палитру с кодами, шрифтовую пару с кириллицей и типографическую шкалу можно собрать инструментами на нашем сайте. Получится дизайн-система в миниатюре.

Мы предлагаем выбирать не по бюджету и не по названию, а по тому, сколько людей будет пользоваться результатом и в скольких каналах он появится.

Правило простое: заказывайте на уровень выше, чем требует сегодняшнее число людей, которые делают ваши материалы. Если всё рисует один дизайнер, хватит стиля: правила он держит в голове. Когда к нему добавляются второй дизайнер, рекламное агентство и фрилансер для соцсетей, правила должны быть записаны. Иначе через полгода у вас окажутся три разных синих и два логотипа. Заказ на вырост обходится дешевле, чем переделка стиля, который уже расползся.

Вот как это выглядит в наших проектах. Петербургскому цифровому хабу — B2B-форуму для лидеров цифровой трансформации — мы делали логотип и фирменный стиль. Головному центру компетенций станкоинструментальной промышленности (ГЦК) — сайт, логотип и стиль, а для его форума «День Заказчика» — лендинги, графику и шаблоны презентаций. Для платформы ОдинХаб знак и полный редизайн сайта делали в одном проекте. Сети медицинских центров ЕвроМед понадобилась полная переупаковка бренда: логотип, стиль, цвета, брендбук и сайт. Отдельный брендбук был далеко не в каждом из этих проектов: состав работ каждый раз шёл от задачи.

Выбирайте документ по числу людей, которые будут по нему работать. Чем больше рук, тем подробнее должны быть записаны правила.

Цена зависит не от названия документа, а от состава работ. Два «брендбука» могут отличаться по цене в разы: в одном пять страниц правил для логотипа, в другом — исследование, платформа и сорок носителей. Смету определяют шесть вещей.

• Число носителей и шаблонов: каждый макет проектируют, проверяют и готовят к передаче.
• Глубина стратегии: платформа требует интервью, анализа рынка и согласования с руководством.
• Число концепций: три направления на старте или пять, как в нашем проекте для ELSTAR.
• Адаптации знака: горизонталь, вертикаль, монохром, иконка приложения, вышивка.
• Компоненты интерфейса: в дизайн-системе каждый описывают во всех состояниях и передают в разработку.
• Сопровождение: помощь первым подрядчикам и проверка первых применений.

Прикинуть бюджет можно и самостоятельно. Возьмите базу — логотип или стиль — и добавьте то, что отличает ваш проект: сколько носителей понадобится в первые полгода, нужна ли платформа, сколько типов страниц будет на сайте. Наш стартовый стиль уже включает документы, презентацию и соцсети. Если к ним добавляются упаковка, вывеска и выставочный стенд, растёт и смета. Цены стартовые и не являются офертой: итог зависит от объёма материалов и числа носителей.

Есть два способа заметно сэкономить. Первый — обновить систему вокруг знака, не трогая сам логотип: узнаваемость сохраняется, а работа выходит дешевле и быстрее полного ребрендинга. Второй — делать стиль и сайт в связке: не нужно передавать айдентику другому подрядчику и заново объяснять логику решений. Так были устроены проекты для ГЦК, ОдинХаба и ЕвроМеда.

Типичная ошибка на приёмке — красивая презентация вместо рабочих файлов. PDF с логотипом на фоне гор производит впечатление на встрече. Но через месяц типография просит вектор, разработчик — коды цветов, и выясняется, что их нет. Проверьте папку по списку:

• Вектор знака в SVG, PDF или EPS и растровые версии в PNG.
• Версии логотипа: горизонтальная, вертикальная, монохромная, на тёмном фоне.
• Охранное поле и минимальный размер, при котором знак читается.
• Палитра с кодами для экрана (HEX, RGB) и печати (CMYK, Pantone).
• Шрифты с лицензиями и запасными гарнитурами для систем, где фирменных нет.
• Примеры неправильного использования: растянутый знак, чужие цвета, низкий контраст.
• Шаблоны носителей в редактируемом формате, а не только картинками.

Отдельно проверьте контраст. Светло-серый текст на белом в макете смотрится изящно, а на экране и в распечатке пропадает. Пары «текст — фон» из палитры можно прогнать через проверку контраста по WCAG: за пять минут станет ясно, какие сочетания годятся для текста, а какие — только для декора.

В договоре важны три вещи. Первая — передача исключительных прав на знак и стиль вместе с исходниками, а не просто право использования. Вторая — лицензии на шрифты: кто их покупает и на сколько пользователей и сайтов они рассчитаны, иначе через год может понадобиться менять гарнитуру. Третья — порядок правок: сколько кругов включено и что будет, если ни одно направление не подошло. У нас исключительные права переходят клиенту по договору вместе с исходниками. Проверку названия на сходство с чужими товарными знаками лучше заказать у патентного поверенного до того, как имя попадёт на вывеску.

Принимайте не презентацию, а папку, с которой подрядчик сможет работать, ни разу вам не позвонив. Если без звонка не обойтись, работа не закончена.

Нужен ли брендбук малому бизнесу? Чаще всего нет. Компании с одним-двумя каналами хватает логотипа или фирменного стиля с короткими правилами. Платформа и tone of voice нужны, когда о компании пишут и говорят многие, а не только владелец.

Брендбук и гайдлайн — это одно и то же? На рынке их часто смешивают, но различать полезно: гайдлайн описывает, как выглядеть, а брендбук добавляет, кто вы и как говорите. В договоре лучше перечислить состав работ, чем полагаться на слово.

Можно ли обойтись логотипом? На старте — да. Но как только материалы начинает делать кто-то кроме одного дизайнера, стиль без палитры, шрифтов и правил быстро расползается.

Нужна ли дизайн-система, если у нас только сайт? Для лендинга — нет. Для многостраничного сайта с каталогом, разделами и командой, которая его развивает, — да, хотя бы базовая: компоненты и типы страниц. У нас она входит в состав многостраничного сайта.

Сколько страниц должно быть в брендбуке? Столько, чтобы подрядчик работал без вопросов. Толщина документа ничего не говорит о его качестве: десять страниц рабочих правил полезнее ста страниц мудбордов.

О названиях документов дизайнеры так и не договорились, и ждать этого не стоит. Поэтому решайте в обратном порядке. Сначала ответьте, кто будет открывать документ: подрядчик, вся компания или команда разработки. И только потом выбирайте название. Подрядчику нужен гайдлайн, компании — брендбук, интерфейсу — дизайн-система.

Если вы оказались перед этим выбором, начните с описания задачи. На брифе по айдентике мы как раз собираем состав работ под ваш этап. А если стиль должен сразу превратиться в сайт или кабинет, дизайн-систему удобнее закладывать вместе с сайтом, чем потом вытаскивать её из готовых макетов.

Мануал NASA показал, что документ может быть безупречным и всё равно не прижиться. Ценность бренд-документа измеряется не страницами, а тем, сколько людей открывают его, чтобы сделать работу.

• Nielsen Norman Group — Design Systems vs. Style Guides (Kelley Gordon, 2024)
• Wikipedia — NASA insignia
• Wikipedia — Richard Danne