28 нояб. 2024 г. Время чтения: Около 5 мин. UX/UI дизайн

Что такое брендбук

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

Брендбук (от англ. «brand book» — «книга бренда») — это сборник правил использования корпоративного стиля бренда и его компонентов. Важной частью брендбука являются указания по использованию элементов дизайна. Именно поэтому дизайнерам необходимо уметь пользоваться этим документом. Давайте же знакомиться с ним↓

Кому и зачем нужен брендбук

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

* Важно понимать, что брендбук не ограничивает дизайнера в его творческих порывах, а лишь регулирует их, помогает лучше понять задачу и сделать дизайн-проект идеально подходящий заказчику.

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

Основные элементы брендбука для дизайнеров

Строгих требований к содержанию документа нет. Однако, чем подробнее составлен брендбук, тем проще дизайнерам создавать продукт, отражающий главные идеи бренда. Чаще всего в документе указывают правила касающиеся следующих элементов↓

Информация о бренде

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

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

* Например, компания BMW позиционирует себя, как производителя стильных автомобилей для независимых и состоятельных людей, а Volkswagen — как создатель безопасных транспортных средств для всей семьи и представителей среднего класса.

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

* Так ВкусВилл выделяет в качестве своей основной ценности — заботу о здоровье покупателя и окружающей среде. Поэтому основной цвет бренда ВкусВилл — зеленый, он ассоциируется с природой, натуральными и свежими продуктами.

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

* О персонах, ЦА и других важных UX-терминах для работы UX/UI-дизайнера читайте тут.

Также в брендбуке указывается история нейминга, слоган, его вариации и способы использования, tone of voice. Все это упрощает маркетологам выстраивание стратегии коммуникации с клиентом и может пригодится дизайнеру при разработке визуального стиля.

Акция действует до 31 декабря 2024 года включительно

Правила использования логотипа

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

Сетка построения логотипа: размеры, соотношения сторон, отступы, наклоны, рекомендации по пропорциям логотипа в отношении разной версии цифрового продукта или размера печати и прочие переменные.
Допустимые и недопустимые версии: упрощенные и более детализированные варианты логотипа, версии в нескольких или одном цвете и инверсные варианты, предпочтительный фон, возможность использовать фирменный знак без фирменного блока, допустимые цветовые версии.
Охранное поле: так называют пространство вокруг фирменного знака, где нельзя размещать другие элементы. Как правило, его размер указывается в милиметрах и пикселях. Зачастую охранное поле равно одному или нескольким элементам логотипа.

Типографика

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

Кегль: размер шрифта, измеряемый в пунктах (pt). Он меняется в зависимости от важности текста и устройств или материалов для его воспроизведения.
Наклон: поворот шрифта, как правило, вправо. Курсивным текстом многие компании советуют выделять второстепенную информацию.
Жирность: толщина линий символа. Жирным шрифтом следует выделять более важные, но небольшие части текста.
Трекинг: равное межбуквенное расстояние в тексте.
Кернинг: расстояние между определенными сочетаниями букв.
Интерлиньяж: вертикальное расстояние между строками текста в абзаце. Как и трекинг, и кернинг, этот параметр влияет на читаемость текста.

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

Цвета

В документе указывается вся допустимая цветовая палитра для необходимых моделей: HEX и RGB для цифровых версий и CMYK, RAL и Pantone для печати. Цветовые сочетания являются важной частью узнаваемости бренда, поэтому при работе с брендбуком дизайнеру нужно использовать в точности тот цвет, что указан в документе, чтобы не нарушить визуальную идентичность. Зачастую компании используют несколько цветовых наборов:

Основные или корпоративные цвета: они играют столь же важную роль, что и логотип, и установить в сознании клиента мгновенную ассоциацию с компанией. Это 2-3 цвета, которые используются в фирменном знаке, на главной странице сайта организации с ключевым действием, в рекламных акциях.
Вторичные: часто эти цвета представляют из себя оттенки основной палитры или же контрастные ей. Они могут быть использованы для второстепенных экранов сайта или приложения.
Нейтральные или допустимые: в эту палитру входят менее яркие цвета для третьестепенных элементов дизайна, чтобы не отвлекать внимание клиента от основных поинтов.

* Вторичные и допустимые цвета не всегда указываются, однако основная палитра — неотъемлемая часть брендбука.

Недопустимые цвета и сочетания: в эту группу входят палитры, которые напрямую ассоциируются с брендом конкурентов, а также яркие и контрастные цвета, отвлекающие внимание от главной информации.

Коллекции элементов корпоративного стиля

Этот раздел содержит рекомендации различной степени детализации, например:

Готовые наборы: коллекции иллюстраций, элементов инфографики, иконок, паттернов, кнопок и фонов для графических редакторов.
Рекомендации по созданию: в формате референсов или же наборов правил для выбора стилей.

Примеры брендбуков и гайдлайнов

В итоговом виде брендбук может быть как в варианте брошюры или книги на материальном носителе, так и в форме файла презентации или файла PDF. В некоторых случаях в качестве брендбука может выступать раздел сайта компании, например, как у РЖД, ВкусВилл, YouTube или даже отдельный сайт, как у Starbucks, Airbnb. Несколько брендбуков известных компаний вы можете скачать и посмотреть ниже ↓