Фирменный стиль на сайте: логотип, цвета, элементы

Что входит в фирменный стиль

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

Для сайта важны следующие составляющие:

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

Задача сайта — не просто «использовать фирменные цвета», а сделать так, чтобы человек, увидевший вывеску, рекламу во VK или упаковку, узнал ту же компанию на сайте, и наоборот. При этом сайт остаётся интерфейсом, которым должно быть удобно пользоваться. Именно на стыке узнаваемости и удобства возникают главные сложности.

Если брендбука нет

Многие небольшие компании начинают работу над сайтом, имея только логотип. Это нормальная ситуация, и в ней есть два пути.

Сначала разработать базовый фирменный стиль. Логотип, палитра, пара шрифтов, несколько графических приёмов. Это небольшой отдельный проект, зато потом сайт, соцсети, полиграфия и реклама будут выглядеть единообразно.

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

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

Логотип на сайте

Логотип — самый узнаваемый элемент, и на сайте у него есть свои правила.

Расположение. Традиционно — в левом верхнем углу шапки. Пользователи привыкли искать его там и ожидают, что нажатие на логотип вернёт их на главную страницу. Отступать от этой традиции без серьёзной причины не стоит.

Размер. Логотип должен быть читаемым, но не занимать половину шапки. На мобильных шапка компактнее, и логотип нужен меньше.

Варианты. Для сайта почти всегда требуется несколько версий:

• полная — со знаком и названием;
• сокращённая — только знак или компактная версия для мобильных и иконки сайта;
• светлая и тёмная — для разных фонов, например для тёмного подвала или первого экрана с фото;
• иконка для вкладки браузера — простой знак, читаемый в очень маленьком размере.

Формат. Логотип лучше использовать в векторном формате SVG: он остаётся чётким на любых экранах и весит мало. Растровый логотип с размытыми краями сразу создаёт ощущение небрежности.

Охранное поле. Вокруг логотипа должно оставаться свободное пространство. Логотип, к которому вплотную прижаты пункты меню, теряется.

Цвета: от брендбука к интерфейсу

Фирменные цвета — сильнейший инструмент узнаваемости, но перенос их на сайт требует аккуратности.

Экранные значения. Цвета для печати и для экрана задаются по-разному. В брендбуке должны быть указаны экранные коды. Если их нет, нужно подобрать экранные эквиваленты и проверить на нескольких мониторах и телефонах.

Роли цветов. На сайте цвет выполняет функции, и каждой функции нужен свой цвет:

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

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

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

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

Шрифты: узнаваемость и читаемость

Шрифт задаёт характер сайта не меньше, чем цвет.

Акцидентный и текстовый. Часто фирменный шрифт — выразительный, с характером — хорош для логотипа и заголовков, но тяжело читается в длинном тексте. Решение: фирменный шрифт для заголовков, нейтральный и хорошо читаемый — для основного текста.

Кириллица. Многие красивые шрифты не имеют качественной кириллицы или имеют её в ограниченном наборе начертаний. Это нужно проверять до утверждения.

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

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

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

Графические элементы и стиль изображений

Помимо логотипа, цвета и шрифтов, узнаваемость создают графические приёмы.

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

Иконки. Единый набор иконок в стиле бренда: одинаковая толщина линий, одинаковые скругления, одна степень детализации.

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

Иллюстрации. Если бренд использует иллюстрации, они должны быть в одном стиле по всему сайту.

Анимация. Характер движения элементов — плавный или энергичный, сдержанный или игривый — тоже может отражать бренд. Но анимация не должна мешать восприятию и замедлять сайт.

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

Тон текстов как часть фирменного стиля

Фирменный стиль — не только визуальная часть. То, как компания говорит, — тоже её лицо.

• Обращение. На «вы» или на «ты», официально или дружелюбно.
• Длина и ритм. Короткие энергичные фразы или подробные экспертные объяснения.
• Лексика. Профессиональные термины или простые слова, сленг или классический язык.
• Интонация. Серьёзная, ироничная, заботливая, деловая.

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

Дизайн-система: как сохранить стиль при развитии сайта

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

Решение — дизайн-система или хотя бы её упрощённая версия: набор готовых компонентов и правил, по которым собираются новые страницы. В неё входят:

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

Мы в КомРА обычно собираем такую библиотеку компонентов вместе с дизайном сайта. Это помогает поддерживать единый вид при появлении новых страниц и ускоряет доработки: новый раздел собирается из готовых элементов, а не рисуется с нуля. Для сайтов на 1С-Битрикс, WordPress или Tilda это особенно полезно — контент-менеджер может создавать страницы, не нарушая стиль.

Типичные ошибки

• Слишком много фирменного цвета. Сайт полностью в ярком корпоративном оттенке утомляет и снижает читаемость.
• Фирменный цвет без проверки контраста. Красиво на вывеске, нечитаемо на экране.
• Декоративный шрифт в основном тексте. Выразительно, но читать невозможно.
• Размытый растровый логотип. Особенно заметно на экранах высокой чёткости.
• Разные стили на разных страницах. Главная — в одном стиле, внутренние страницы — в другом, акционные баннеры — в третьем.
• Брендинг важнее удобства. Нестандартное расположение меню, необычные элементы управления ради «уникальности» затрудняют использование сайта.
• Отсутствие правил. Без зафиксированных стандартов каждый новый баннер и страница отходят от стиля всё дальше.

Итог

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

Коротко о главном:

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

Узнаваемый сайт — это не сайт, на котором много логотипов и фирменных цветов. Это сайт, где каждый элемент работает в одном характере и одной логике.