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