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