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