На сайте кнопка называется «Получить помощь», в соцсетях — «Заказать ремонт», а в письме — «Оставить заявку». Человек видит три разных обещания и не понимает, что произойдёт после нажатия. Бренд-гайд помогает согласовать такие детали: в нём закрепляют названия действий, тон сообщений, оформление изображений и правила публикации — наряду с цветами и логотипом.
Что включить в бренд-гайд
Небольшому справочному сайту хватит короткого рабочего документа, к которому автор, дизайнер и редактор смогут обращаться при подготовке сайта, писем и публикаций в соцсетях. Сначала перечислите площадки и материалы, с которыми команда действительно работает. Если всё выходит онлайн, правила для печатных вывесок не понадобятся.
- Название и обозначения. Укажите официальное написание названия, допустимое сокращение и варианты, которых следует избегать.
- Визуальная система. Сохраните версии логотипа, основные цвета с кодами, шрифты, размеры заголовков и правила отступов.
- Голос бренда. Опишите, как объяснять сложные темы, обращаться к аудитории и формулировать предупреждения.
- Шаблоны. Добавьте примеры страницы статьи, карточки для соцсетей, письма и сообщения об ошибке.
- Ответственность. Назначьте человека, который утверждает изменения и хранит актуальную версию документа.
Разделяйте принципы и примеры. «Пишем понятно» звучит разумно, но каждый поймёт это по-своему. А правило «расшифровываем технический термин при первом упоминании и не обещаем исправление до диагностики» уже можно применить при проверке текста.
Сначала определите постоянное, затем — переменное
Название, логотип, палитра, манера обращения и смысл ключевых сообщений должны оставаться узнаваемыми на всех площадках. Формат может различаться: на сайте выходит подробная инструкция, в соцсети — короткий анонс, в письме — уведомление с понятной ссылкой. Единый стиль не означает одинаковый текст повсюду.
Запишите две-три характеристики голоса бренда и поясните, что за ними стоит. Например, «спокойный, точный, дружелюбный» для справочного блога о Windows — это объяснять без запугивания и фамильярности. В инструкции лучше написать «проверьте модель устройства перед установкой драйвера», а не «срочно скачайте универсальный драйвер». Если предстоящие действия могут изменить настройки или затронуть данные, предупредите о резервной копии до начала шагов.
Примеры удачных и неудачных фраз помогают не спорить о трактовках. Сравните: «Устройство точно заработает после обновления» и «Обновление может помочь, если причина связана с драйвером; сначала проверьте модель устройства». Второй вариант не обещает результат без диагностики и подсказывает, с чего начать.
Как зафиксировать визуальные правила
Логотип, цвет и типографика
Добавьте в документ исходные файлы логотипа и примеры его использования на светлом и тёмном фоне. Укажите минимальный размер, свободное пространство вокруг знака и недопустимые изменения: растяжение, поворот, замену цвета. Если при уменьшении детали теряются, подготовьте упрощённую версию для аватаров вместо того, чтобы сжимать полный логотип до нескольких пикселей.
Для цветов нужны коды, а не только названия вроде «тёмно-синий». Укажите основной цвет, цвет ссылок, фон и цвета служебных состояний: успеха, предупреждения и ошибки. Проверьте читаемость текста и не передавайте смысл одним лишь цветом: сообщение об ошибке должно содержать слова, а не только красную рамку. Затем задайте основной и запасной шрифт, уровни заголовков и оформление длинного списка.
Правила для изображений тоже формулируйте предметно: можно ли использовать скриншоты, нужны ли подписи, следует ли скрывать личные данные на снимках экрана. В инструкции по Windows чёткий фрагмент интерфейса с видимым названием пункта меню полезнее декоративного изображения ноутбука. Иллюстрация может подойти для анонса, но не заменит изображение шага, который пользователю нужно найти на экране.
Доступность как часть стиля
Узнаваемость не должна мешать чтению. Проверьте контраст текста и фона, вид страницы на узком экране, понятность ссылок вне окружающего абзаца и альтернативный текст у значимых изображений. В обзоре графического дизайна Britannica визуальная коммуникация рассматривается как способ передавать информацию. Поэтому оценивайте оформление и по тому, помогает ли оно понять материал.
Превратите правила в повседневный процесс
Бренд-гайдом будут пользоваться, если нужные материалы легко найти. Держите утверждённые логотипы, шаблоны и сам документ в одном месте; давайте файлам понятные названия и указывайте дату обновления. Отметьте, что можно менять самостоятельно, а что требует согласования. Автор может выбрать иллюстрацию по готовым правилам, но новую цветовую схему или название рубрики должен проверить ответственный редактор.
- Соберите по одному действующему примеру с каждой площадки: страницу сайта, письмо, карточку соцсети и форму обратной связи.
- Отметьте расхождения в названии, обращении, цветах, кнопках и обещаниях пользователю.
- Выберите согласованные варианты и внесите их в гайд вместе с наглядными примерами.
- Исправьте сначала повторяющиеся элементы: шапку сайта, подпись письма, шаблон карточки и текст основных кнопок.
- После нескольких публикаций проверьте, каких правил не хватило команде, и уточните документ.
Весь архив сразу переделывать не нужно. Начните с элементов, которые видит большинство посетителей, а в новых материалах используйте утверждённые шаблоны. Перед правками на действующем сайте сохраните резервную копию файлов и настроек. Если меняете текст кнопки, убедитесь, что он по-прежнему точно описывает действие на странице.
Проверка перед публикацией
Когда материал готов, удобнее пройтись по короткому списку, чем перечитывать весь гайд. Проверьте написание названия, оформление заголовков, контраст и читаемость изображения, тон текста и понятность ссылки или кнопки. Для технической инструкции добавьте ещё одну проверку: ясно ли читателю, где безопасная проверка, а где действие, которое меняет систему?
Допустим, вы готовите анонс инструкции о неполадке принтера. Сохраните заголовочный стиль и спокойный тон сайта, но не пытайтесь уместить в карточку все шаги диагностики. Вместо «Исправьте принтер за минуту» укажите первую проверку, которую предлагает материал. Перед публикацией откройте карточку на телефоне и убедитесь, что название устройства и текст кнопки читаются без увеличения.
