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