Визуальный стиль сайта под бренд складывается из 7 решений: палитра, шрифты, сетка, фотографии, графика, движение и тон текста. Когда все 7 согласованы, сайт узнают без логотипа, а самописная разработка такого сайта в студии стоит от 80 000 ₽ и занимает 1-2 недели от материалов.
Разбираем, как дизайнер принимает каждое решение, какие материалы от вас ускорят работу и почему сайт на шаблоне с вашим логотипом не становится фирменным.
I. Что такое визуальный стиль сайта
Визуальный стиль - это набор правил, по которым строится каждый экран: какие цвета где используются, как соотносятся заголовки и текст, какие фото допустимы, как ведут себя элементы при наведении. Логотип и фирменный цвет - только исходные точки. Бренд-бук для полиграфии редко отвечает на вопросы сайта: как выглядит кнопка в неактивном состоянии, какой контраст у текста на тёмном фоне, что происходит на экране шириной 360 пикселей.
Для бизнеса стиль решает практическую задачу: сайт должен выглядеть на уровне цены. Если услуга стоит дорого, а сайт похож на тысячи других, посетитель подсознательно сравнивает вас с дешёвыми конкурентами и начинает торговаться ещё до разговора.
На практике стиль фиксируют в небольшом наборе правил для разработки: цвета и их роли, размеры заголовков на телефоне и компьютере, отступы, радиусы скругления, состояния кнопок и полей. Этот набор нужен не для красоты документа, а чтобы новые страницы, статьи и акции через полгода выглядели так же, как в день запуска, даже если их верстает другой человек.
II. Решения 1-2: палитра и шрифты
Решение 1 - палитра. Рабочая схема обычно состоит из 1 основного фона, 1-2 цветов текста, 1 акцентного цвета для кнопок и ссылок и 2-3 служебных оттенков. Акцент не разбрызгивают по странице: если красным выделено всё, кнопка заявки перестаёт выделяться. Отдельно проверяют контраст - текст должен читаться на телефоне на солнце, а не только на мониторе дизайнера. Градиенты, если они нужны, лучше строить из двух близких цветов.
Решение 2 - шрифты. Хватает 1-2 гарнитур: выразительная для заголовков и спокойная для текста. Шрифт должен поддерживать кириллицу во всех начертаниях, иначе браузер подставит системный и стиль развалится. Каждое начертание добавляет вес, поэтому на сайте оставляют обычно 3-4 файла шрифтов, а не всё семейство.
III. Решения 3-4: сетка и фотографии
Решение 3 - сетка и ритм. Шаблон делит экран на одинаковые карточки по три в ряд. Фирменная вёрстка работает с асимметрией, крупными номерами разделов, разными масштабами блоков и воздухом между ними. Ритм задают отступы из единой шкалы, например кратные 8 пикселям, - тогда даже смелые композиции выглядят собранными.
Решение 4 - фотографии. Самый сильный и самый недооценённый элемент стиля. Для одного сайта задают единые правила: свет, фон, обработка, кадрирование, люди или предметы. Стоковые снимки с улыбающимися менеджерами мгновенно обезличивают бренд. Лучше 15 собственных фото в одной стилистике, чем 60 разрозненных.
| Решение | Что фиксируют | Как проверить |
|---|---|---|
| 1. Палитра | Фон, текст, акцент, служебные цвета | Контраст текста, акцент только на действиях |
| 2. Шрифты | 1-2 гарнитуры, 3-4 начертания | Кириллица, вес файлов |
| 3. Сетка | Колонки, шкала отступов | Экран 360 px и 1440 px |
| 4. Фото | Свет, фон, обработка, кадр | 10 фото рядом смотрятся как серия |
| 5. Графика | Иконки, линии, фактуры | Один стиль иконок на всём сайте |
| 6. Движение | Скорость и характер анимаций | Нет рывков на слабом телефоне |
| 7. Тон | Обращение, длина фраз, лексика | Кнопки и ошибки звучат как бренд |
IV. Решения 5-7: графика, движение, тон
Решение 5 - графика. Иконки одной толщины линии, фирменные разделители, лёгкая зернистость или фактура фона. Смешивание иконок из разных наборов - частый признак сайта, собранного по кусочкам.
Решение 6 - движение. У бренда есть характер движения: плавное и медленное у премиальных услуг, быстрое и упругое у спортивных товаров. В проекте для магазина кроссовок Monkey Market стиль витрины собран вокруг товара: каталог, тренды и видео подают кроссовки как объект желания, а заказ уходит в Telegram без лишних шагов.
Решение 7 - тон текста. Визуал и слова должны совпадать. Строгий минималистичный сайт с восклицательными знаками в каждом заголовке выглядит фальшиво. Тон распространяется на мелочи: подписи кнопок, сообщение после отправки формы, текст страницы 404.
Все 7 решений проверяют вместе, а не по отдельности. Удачная палитра может потеряться из-за случайных фото, а сильная типографика - из-за иконок из трёх разных наборов. Поэтому дизайнер сначала собирает 2-3 ключевых экрана - первый экран, карточку услуги или товара и форму заявки - и только после согласования распространяет стиль на остальные страницы.
V. Что подготовить заказчику
- Логотип в векторе и фирменные цвета, если они уже есть.
- 3-5 сайтов, которые нравятся, и 2-3, которые не нравятся, с пояснением почему.
- Собственные фотографии работ, команды, товара или готовность организовать съёмку.
- Описание клиента: кто покупает, в каком ценовом сегменте, с кем сравнивает.
- Ограничения: цвета или приёмы, которые нельзя использовать.
Совет: ссылки на понравившиеся сайты полезнее словесных описаний вроде «стильно и дорого». Одна и та же фраза у разных людей означает противоположные вещи, а 3-5 примеров снимают разночтения за 1 встречу.
VI. Ошибки, из-за которых сайт выглядит шаблоном
- Логотип на готовом шаблоне. Структура, иконки и отступы остаются чужими, и сайт узнают как тему конструктора.
- Модные приёмы без связи с брендом. Стеклянные карточки или неоновые градиенты у юридической фирмы вызывают недоверие.
- Слишком много акцентов. Три ярких цвета и пять шрифтов делают страницу шумной.
- Стоковые фото. Одинаковые люди встречаются на сайтах конкурентов.
- Стиль только для десктопа. Эффектная композиция разваливается на телефоне, где открывается большинство сайтов услуг.
Не копируйте стиль конкретного сайта конкурента один в один. Помимо риска претензий, вы теряете главное - отличие. Референсы нужны, чтобы понять направление, а не чтобы повторить чужую вёрстку.
Ещё одна частая проблема - стиль, который живёт только в макете. После запуска контент-менеджер добавляет баннеры акций в других цветах, вставляет картинки произвольного размера и выделяет текст жирным через строку. Через несколько месяцев сайт снова выглядит собранным из разных кусков. Защита простая: заранее подготовить шаблоны для типовых блоков статей и акций, чтобы новый материал автоматически попадал в общий стиль.
VII. Сроки и стоимость
Фриланс-дизайнер обычно берёт за макет лендинга от нескольких десятков тысяч рублей, агентства за фирменный стиль с сайтом - заметно больше, а вёрстку оплачивают отдельно. В студии визуальный стиль и код делаются вместе в рамках услуги разработка сайтов и SEO: самописный сайт на React от 80 000 ₽, 1-2 недели от получения материалов. Перенос существующего сайта с конструктора с переработкой стиля - от 80 000 ₽.
Стиль повышает доверие, но сам по себе не приводит посетителей и не гарантирует позиции или заявки. Трафик дают реклама и SEO: статья от 500 ₽, 200 статей в месяц - 100 000 ₽, прокачка блога от 75 000 ₽ в месяц. Первые показы по статьям обычно появляются в первые недели после индексации. Если нужны обращения сразу, а не через накопление, обсудите лиды с оплатой за результат.
Если сайт уже работает и приносит заявки, не обязательно менять всё сразу. Иногда достаточно навести порядок в палитре, заменить стоковые фото на собственные и унифицировать шрифты - это заметно меняет восприятие без смены структуры. Полный редизайн имеет смысл, когда устарела и подача, и техническая основа сайта.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Услуги студии по теме: разработка сайтов под ключ и SEO-продвижение статьями.
Сайт выглядит дешевле вашей услуги?
Соберём визуальный стиль под бренд и сразу реализуем его в быстром самописном сайте.
Частые вопросы
Нужен ли бренд-бук, чтобы заказать сайт?
Нет. Хватает логотипа, пары фирменных цветов и примеров сайтов, которые нравятся. Правила для веба дизайнер сформулирует сам, а в бренд-буке для полиграфии их обычно всё равно нет.
Сколько цветов и шрифтов должно быть на сайте?
Обычно 1 акцентный цвет, 1-2 цвета текста, 1 фон и 2-3 служебных оттенка. Шрифтов - 1-2 гарнитуры и 3-4 файла начертаний, чтобы не утяжелять загрузку.
Сколько стоит сайт с уникальным стилем?
В студии N3MIROFF самописный сайт на React со стилем под бренд стоит от 80 000 ₽ и делается за 1-2 недели от материалов. У фрилансеров и агентств дизайн и вёрстку обычно считают отдельно.
Можно ли обойтись стоковыми фото?
Технически да, но они обезличивают бренд: те же снимки встречаются у конкурентов. Лучше 15 своих фото в одной стилистике, чем десятки стоковых.
Повлияет ли новый стиль на позиции в поиске?
Напрямую нет, позиции зависят от контента, структуры и скорости. Стиль может косвенно помочь, если посетители дольше остаются на сайте, но гарантировать рост позиций нельзя.
Разберём стиль вашего сайта
Оставьте заявку - покажем, какие из 7 решений тянут сайт вниз и что изменить в первую очередь.
Получить целевые заявки → Telegram