Оформление цветового раздела брендбука
Проблема почти всех гайдлайнов, которые попадаются в поиске, в том, что они перечисляют коды цветов, но молчат про макет страницы. В результате получается табличка с квадратиками — формально всё есть, а пользоваться неудобно: непонятно, где основной цвет, где акцент, как их сочетать и что делать, если типография не может напечатать нужный Pantone. Разберём раздел так, как он выглядит у человека, который впервые открывает брендбук и пытается понять, что с этим делать.
Зачем вообще нужна такая детализация
Когда подрядчик получает бриф на печать визиток, а через месяц другой подрядчик делает баннер для сайта — без чётких кодов и правил применения цвета получится разнобой. Особенно ощутимо это на глянце и матовой бумаге: один и тот же CMYK-код даёт разный визуальный результат. Именно для того, чтобы избежать этого разброса, цветовой раздел должен фиксировать не просто «какой цвет», а «в каком виде он существует на каждом носителе».
Хороший пример адаптации — брендбук FIFA 2018: логотип для вышивки на мерче пришлось упростить, потому что технология печати не позволяла воспроизвести исходную детализацию. То же самое происходит с цветом — оттенок, который отлично смотрится на экране, может «поплыть» при вышивке или тиснении. Раздел палитры должен заранее предупреждать об этих ограничениях, а не оставлять их на откуп подрядчику.
Что обязательно должно быть на странице цвета
Каждая карточка цвета в брендбуке — это не просто плитка с кодом. Минимальный набор элементов информации, без которого раздел считается неполным:
- крупный образец заливки (не менее трети страницы, чтобы глаз считывал именно цвет, а не оттенок на маленьком квадрате);
- название цвета (внутреннее, брендовое — не «синий», а «Аэрофлот синий» или аналог);
- код HEX — для цифровых носителей;
- код RGB — для экранных приложений и видео;
- код CMYK — для офсетной печати;
- номер Pantone — для типографий и промышленной печати, где важна точность попадания;
- назначение цвета (фон, текст, акцент, элемент интерфейса);
- ограничения по применению, если есть (не использовать как фон для текста, не сочетать с определённым нейтральным цветом).
Если в разделе нет хотя бы одного из этих пунктов — подрядчик будет звонить и спрашивать, а это уже провал документа как инструмента.
Как выстроить иерархию: основной, вторичный, нейтральный
Порядок подачи цветов — это не эстетика, а логика использования. В брендбуке Аэрофлота цвета разделены на три категории: основные, вторичные и нейтральные. Это разделение часто упускают авторы других гайдлайнов, ограничиваясь плоским списком «вот наши цвета», без указания, какой из них главный.
Макет раздела должен повторять эту иерархию визуально:
- Основной цвет (или два) — открывает раздел, занимает больше места на странице, идёт крупным блоком в самом начале.
- Вторичные (акцентные) цвета — следующий блок, чуть меньшего размера, показываются как палитра поддержки, а не равноправные конкуренты основному.
- Нейтральные цвета — серые, бежевые, чёрно-белые градации — идут последними, но обязательно присутствуют, потому что именно они чаще всего используются как фон для текста и вспомогательных элементов.
Практика показывает: палитра из 5–7 оттенков (основные плюс акценты) работает лучше, чем классическое «четырёх цветов достаточно». Больше цветов даёт гибкость в макетах и, что неожиданно для многих маркетологов, коррелирует с ростом конверсии — потому что дизайнер не пытается «выжать» несочетаемые комбинации из скудного набора.
Какие демонстрации обязательны, а не факультативны
Самая частая ошибка — показать цвет только как чистую плитку, без контекста применения. Это не работает: цвет на белом фоне и тот же цвет рядом с логотипом или текстом воспринимается иначе.
В разделе обязательно должны быть:
- пары «текст на фоне» — показ, как основной цвет читается на белом, чёрном и нейтральном фоне; это критично для веб-доступности, где недостаточный контраст делает текст физически нечитаемым для части аудитории;
- сочетания цветов друг с другом — какие пары работают, какие визуально «спорят»;
- антипримеры — намеренно неудачные сочетания, где контраст занижен или цвета конфликтуют. Это редкость в существующих брендбуках, но именно антипримеры экономят часы споров с дизайнерами, которые «просто хотели попробовать»;
- примеры на реальных носителях — упаковка, сайт, мерч, наружная реклама — чтобы было видно, как цвет ведёт себя не в вакууме, а в живом макете.
Таблица: что показывать и зачем
| Элемент демонстрации | Что проверяет | Почему нельзя пропустить |
|---|---|---|
| Текст на фоне (светлый/тёмный) | Контрастность и читаемость | Влияет на доступность и юзабилити интерфейсов |
| Сочетания цветов между собой | Гармоничность палитры | Исключает случайные комбинации в макетах подрядчиков |
| Антипримеры | Границы допустимого | Снижает количество ошибок «по незнанию» |
| Применение на носителях | Реальное поведение цвета | Показывает разницу между экраном и печатью |
Печать и экран расходятся — как это показать без путаницы
Один и тот же код почти никогда не даёт идентичный визуальный результат на экране и в типографии. Причина простая: RGB и CMYK — разные цветовые модели, а Pantone — вообще отдельная система смешивания красок. Разница особенно заметна на насыщенных синих и зелёных оттенках, которые в CMYK часто «садятся» и теряют яркость.
Чтобы это не превращалось в путаницу, в разделе стоит делать не общий блок кодов, а два параллельных столбца или явную маркировку: «для экрана» и «для печати», с коротким пояснением, что незначительное расхождение оттенка при печати — норма, а не ошибка исполнителя. Хорошая практика — показать один и тот же цвет, отпечатанный на глянце и на матовой бумаге, рядом с его цифровым эквивалентом. Разница видна сразу, и вопросов у подрядчика не остаётся.
Нужны ли монохромные и условные версии палитры
Да, и это тот пункт, который выпадает из большинства гайдлайнов вообще. Монохромная версия палитры нужна для случаев, когда цветная печать недоступна или нежелательна: факсы, штампы, гравировка, некоторые виды наружной рекламы, документы для внутреннего использования. Если в брендбуке нет чёрно-белой альтернативы логотипа и элементов, дизайнер на месте придумывает её сам — и часто неудачно.
Условные версии (для тёмного фона, для ограниченной палитры печати, для одноцветной вышивки) стоит показывать отдельным блоком, а не прятать в приложении. Это тот же принцип, что с упрощением логотипа FIFA для вышивки — палитра должна иметь «упрощённый режим» на случай, когда технология не позволяет воспроизвести оригинал.
Частые ошибки при оформлении раздела
Здесь стоит перечислить то, что реально мешает в работе, а не теоретические риски:
- Указывают только HEX и CMYK, забывая про Pantone — типография в итоге подбирает оттенок «на глаз».
- Не показывают контраст текста на фоне — итог: нечитаемые кнопки на сайте и жалобы пользователей.
- Нет версионности документа (v1.0, v2.0) — команда и подрядчики работают с разными редакциями палитры, и никто не понимает, почему цвета на новом сайте отличаются от старого макета.
- Отсутствуют антипримеры — дизайнеры экспериментируют с сочетаниями, которые изначально были признаны неудачными, просто потому что не знали об этом.
- Нет монохромной версии — при печати в одном цвете логотип и палитра теряют читаемость.
Версионность, кстати, стоит указывать не только в титульном листе документа, но и прямо в цветовом разделе — небольшой пометкой даты последнего обновления палитры. Это мелочь, которая избавляет от недель работы с устаревшими образцами.
Раздел о цвете — это не витрина эстетики бренда, а рабочий инструмент, который должен закрывать вопросы подрядчика раньше, чем он их задаст. Чем конкретнее макет страницы, чем нагляднее показаны контраст, антипримеры и разница между печатью и экраном — тем меньше ошибок появится в реальных материалах бренда.
Проблема почти всех гайдлайнов, которые попадаются в поиске, в том, что они перечисляют коды цветов, но молчат про макет страницы. В результате получается табличка с квадратиками — формально всё есть, а пользоваться неудобно: непонятно, где основной цвет, где акцент, как их сочетать и что делать, если типография не может напечатать нужный Pantone. Разберём раздел так, как он выглядит у человека, который впервые открывает брендбук и пытается понять, что с этим делать.
Зачем вообще нужна такая детализация
Когда подрядчик получает бриф на печать визиток, а через месяц другой подрядчик делает баннер для сайта — без чётких кодов и правил применения цвета получится разнобой. Особенно ощутимо это на глянце и матовой бумаге: один и тот же CMYK-код даёт разный визуальный результат. Именно для того, чтобы избежать этого разброса, цветовой раздел должен фиксировать не просто «какой цвет», а «в каком виде он существует на каждом носителе».
Хороший пример адаптации — брендбук FIFA 2018: логотип для вышивки на мерче пришлось упростить, потому что технология печати не позволяла воспроизвести исходную детализацию. То же самое происходит с цветом — оттенок, который отлично смотрится на экране, может «поплыть» при вышивке или тиснении. Раздел палитры должен заранее предупреждать об этих ограничениях, а не оставлять их на откуп подрядчику.
Что обязательно должно быть на странице цвета
Каждая карточка цвета в брендбуке — это не просто плитка с кодом. Минимальный набор элементов информации, без которого раздел считается неполным:
- крупный образец заливки (не менее трети страницы, чтобы глаз считывал именно цвет, а не оттенок на маленьком квадрате);
- название цвета (внутреннее, брендовое — не «синий», а «Аэрофлот синий» или аналог);
- код HEX — для цифровых носителей;
- код RGB — для экранных приложений и видео;
- код CMYK — для офсетной печати;
- номер Pantone — для типографий и промышленной печати, где важна точность попадания;
- назначение цвета (фон, текст, акцент, элемент интерфейса);
- ограничения по применению, если есть (не использовать как фон для текста, не сочетать с определённым нейтральным цветом).
Если в разделе нет хотя бы одного из этих пунктов — подрядчик будет звонить и спрашивать, а это уже провал документа как инструмента.
Как выстроить иерархию: основной, вторичный, нейтральный
Порядок подачи цветов — это не эстетика, а логика использования. В брендбуке Аэрофлота цвета разделены на три категории: основные, вторичные и нейтральные. Это разделение часто упускают авторы других гайдлайнов, ограничиваясь плоским списком «вот наши цвета», без указания, какой из них главный.
Макет раздела должен повторять эту иерархию визуально:
- Основной цвет (или два) — открывает раздел, занимает больше места на странице, идёт крупным блоком в самом начале.
- Вторичные (акцентные) цвета — следующий блок, чуть меньшего размера, показываются как палитра поддержки, а не равноправные конкуренты основному.
- Нейтральные цвета — серые, бежевые, чёрно-белые градации — идут последними, но обязательно присутствуют, потому что именно они чаще всего используются как фон для текста и вспомогательных элементов.
Практика показывает: палитра из 5–7 оттенков (основные плюс акценты) работает лучше, чем классическое «четырёх цветов достаточно». Больше цветов даёт гибкость в макетах и, что неожиданно для многих маркетологов, коррелирует с ростом конверсии — потому что дизайнер не пытается «выжать» несочетаемые комбинации из скудного набора.
Какие демонстрации обязательны, а не факультативны
Самая частая ошибка — показать цвет только как чистую плитку, без контекста применения. Это не работает: цвет на белом фоне и тот же цвет рядом с логотипом или текстом воспринимается иначе.
В разделе обязательно должны быть:
- пары «текст на фоне» — показ, как основной цвет читается на белом, чёрном и нейтральном фоне; это критично для веб-доступности, где недостаточный контраст делает текст физически нечитаемым для части аудитории;
- сочетания цветов друг с другом — какие пары работают, какие визуально «спорят»;
- антипримеры — намеренно неудачные сочетания, где контраст занижен или цвета конфликтуют. Это редкость в существующих брендбуках, но именно антипримеры экономят часы споров с дизайнерами, которые «просто хотели попробовать»;
- примеры на реальных носителях — упаковка, сайт, мерч, наружная реклама — чтобы было видно, как цвет ведёт себя не в вакууме, а в живом макете.
Таблица: что показывать и зачем
| Элемент демонстрации | Что проверяет | Почему нельзя пропустить |
|---|---|---|
| Текст на фоне (светлый/тёмный) | Контрастность и читаемость | Влияет на доступность и юзабилити интерфейсов |
| Сочетания цветов между собой | Гармоничность палитры | Исключает случайные комбинации в макетах подрядчиков |
| Антипримеры | Границы допустимого | Снижает количество ошибок «по незнанию» |
| Применение на носителях | Реальное поведение цвета | Показывает разницу между экраном и печатью |
Печать и экран расходятся — как это показать без путаницы
Один и тот же код почти никогда не даёт идентичный визуальный результат на экране и в типографии. Причина простая: RGB и CMYK — разные цветовые модели, а Pantone — вообще отдельная система смешивания красок. Разница особенно заметна на насыщенных синих и зелёных оттенках, которые в CMYK часто «садятся» и теряют яркость.
Чтобы это не превращалось в путаницу, в разделе стоит делать не общий блок кодов, а два параллельных столбца или явную маркировку: «для экрана» и «для печати», с коротким пояснением, что незначительное расхождение оттенка при печати — норма, а не ошибка исполнителя. Хорошая практика — показать один и тот же цвет, отпечатанный на глянце и на матовой бумаге, рядом с его цифровым эквивалентом. Разница видна сразу, и вопросов у подрядчика не остаётся.
Нужны ли монохромные и условные версии палитры
Да, и это тот пункт, который выпадает из большинства гайдлайнов вообще. Монохромная версия палитры нужна для случаев, когда цветная печать недоступна или нежелательна: факсы, штампы, гравировка, некоторые виды наружной рекламы, документы для внутреннего использования. Если в брендбуке нет чёрно-белой альтернативы логотипа и элементов, дизайнер на месте придумывает её сам — и часто неудачно.
Условные версии (для тёмного фона, для ограниченной палитры печати, для одноцветной вышивки) стоит показывать отдельным блоком, а не прятать в приложении. Это тот же принцип, что с упрощением логотипа FIFA для вышивки — палитра должна иметь «упрощённый режим» на случай, когда технология не позволяет воспроизвести оригинал.
Частые ошибки при оформлении раздела
Здесь стоит перечислить то, что реально мешает в работе, а не теоретические риски:
- Указывают только HEX и CMYK, забывая про Pantone — типография в итоге подбирает оттенок «на глаз».
- Не показывают контраст текста на фоне — итог: нечитаемые кнопки на сайте и жалобы пользователей.
- Нет версионности документа (v1.0, v2.0) — команда и подрядчики работают с разными редакциями палитры, и никто не понимает, почему цвета на новом сайте отличаются от старого макета.
- Отсутствуют антипримеры — дизайнеры экспериментируют с сочетаниями, которые изначально были признаны неудачными, просто потому что не знали об этом.
- Нет монохромной версии — при печати в одном цвете логотип и палитра теряют читаемость.
Версионность, кстати, стоит указывать не только в титульном листе документа, но и прямо в цветовом разделе — небольшой пометкой даты последнего обновления палитры. Это мелочь, которая избавляет от недель работы с устаревшими образцами.
Раздел о цвете — это не витрина эстетики бренда, а рабочий инструмент, который должен закрывать вопросы подрядчика раньше, чем он их задаст. Чем конкретнее макет страницы, чем нагляднее показаны контраст, антипримеры и разница между печатью и экраном — тем меньше ошибок появится в реальных материалах бренда.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
