Коротко. Дизайн сайта выбирают не по вкусу собственника, а по задаче страницы и длине сделки: для быстрых заявок работает плотный «инженерный» стиль с ценой и формой на первом экране, для дорогих B2B-услуг — сдержанный корпоративный с доказательствами и расчётами, для товара с визуальной ценностью — крупная сетка с фотографиями. Тренды вроде тёмных тем, брутальной типографики и скролл-анимаций уместны только там, где не удлиняют путь до заявки. Ориентир по бюджету и сроку: лендинг от 80 000 ₽ за 5–10 дней, корпоративный сайт от 200 000 ₽, каталог от 150 000 ₽.
Выбор дизайна начинается не со стиля
Вопрос «какой дизайн сайтов сейчас в моде» почти всегда задают не тот. Стиль — это последнее решение в цепочке, и принимать его нужно после четырёх ответов, которые не имеют отношения к эстетике.
Первое: что должен сделать посетитель. Оставить заявку, позвонить, скачать прайс, положить позицию в корзину, отправить спецификацию на расчёт. Одна страница — одно целевое действие; остальные допустимы как запасные, но не конкурируют за внимание.
Второе: сколько длится сделка. Если решение принимают за один визит (мелкий заказ, услуга «здесь и сейчас»), дизайн обязан отдать цену и форму сразу. Если сделка идёт 30–60 дней и через тендерный комитет, задача другая — снять риск: показать производство, документы, регламент работ, расчёт.
Третье: откуда трафик. Посетитель из контекстной рекламы приходит с конкретным запросом и почти нулевым терпением — ему нужен ответ на первом экране. Посетитель из поиска по информационному запросу читает и сравнивает, ему нужна структура и внутренние переходы. Дизайн одной и той же компании под эти два потока выглядит по-разному.
Четвёртое: кто принимает решение. Снабженец завода и частник с дачей смотрят на разные вещи. Первому нужны марка стали, ГОСТ, сроки, условия оплаты и телефон отдела, второму — фотографии, «под ключ», рассрочка и понятная гарантия.
И только после этого выбирается визуальный язык. В большинстве ниш больше половины визитов приходит с телефона, поэтому любой макет проверяется сначала на мобильной ширине — точную долю смотрите в своей Яндекс.Метрике, она сильно отличается от ниши к нише.
Пять стилей, которые реально работают в рунете
Ниже — не модный список, а рабочая классификация того, что мы применяем и что видим в живых проектах.
| Стиль | Как выглядит | Кому подходит | Главный риск |
|---|---|---|---|
| Инженерный | Плотная сетка, таблицы, размеры и марки, минимум декора, цена рядом с позицией | Производство, металл, ЖБИ, оптовые поставки, оборудование | Выглядит «сухо» для розничной аудитории |
| Корпоративный минимализм | Много воздуха, спокойная палитра, крупные заголовки, блоки доказательств | B2B-услуги с длинным циклом, проектирование, консалтинг | Пустота вместо конкретики, если нечем наполнить |
| Брутальный моно | Жирная типографика, высокий контраст, чёткие границы блоков, почти нет иллюстраций | Студии, подрядчики, ниши с высокой конкуренцией по внешнему виду | Плохо читается на мобильных при неаккуратных размерах |
| Иллюстративно-продуктовый | Крупные фото объектов, карточки, галереи, короткие подписи | МАФ, мебель, благоустройство, всё, что покупают глазами | Вес страницы и медленная загрузка |
| Тёмная тема | Тёмный фон, акцентные цвета, стеклянные карточки | Премиум, автотематика, творческие услуги | Падение читабельности длинных текстов и форм |
Стили можно смешивать, но с одним правилом: коммерческие узлы — цена, форма, кнопка, телефон — всегда оформляются самым простым и контрастным способом, каким бы «смелым» ни был остальной макет.
Тренды: что брать, а что игнорировать
Брать
- Сквозная цена или вилка на первом экране. Самый недооценённый «тренд»: он отсекает нецелевых и повышает качество заявок.
- Крупная типографика и жёсткая сетка. Читается на телефоне, не разваливается при длинных русских словах.
- Калькуляторы и квизы вместо длинных форм. Пользователь получает цифру, вы — параметры заказа.
- Аккуратная тёмная тема как опция, а не как догма. Работает там, где мало длинного текста.
Осторожно
- Скролл-анимации и параллакс. Допустимы, если не задерживают отрисовку и отключаются при снижении производительности.
- 3D и тяжёлая графика. Уместны на одной-двух витринных страницах, не на всём сайте.
- Кастомный курсор и нестандартный скролл. Ломают привычки пользователя и почти всегда снижают конверсию форм.
Не брать
- Экраны-заставки, которые нужно «пролистать», прежде чем увидеть суть.
- Всплывающие окна на первых секундах визита.
- Тонкий светло-серый текст на белом — он не проходит по контрасту и режет читаемость на солнце.
Что из дизайна действительно двигает продажи
Эти шесть узлов дают основную часть эффекта. Всё остальное — оформление.
- Первый экран. Кто вы, что продаёте, за сколько, что сделать дальше. Четыре смысла в одном экране, без прокрутки.
- Правило трёх кликов до продукта. От входа до формы — не больше трёх осмысленных действий. Каждый лишний шаг съедает часть заявок.
- Форма в два-три поля. Имя и телефон достаточно; всё остальное менеджер спросит в разговоре. Обязательная почта и капча — известные убийцы отправок.
- Мобильная вёрстка как основной сценарий. Кнопка не меньше пальца, телефон кликабелен, таблицы прокручиваются внутри себя, а не растягивают страницу.
- Скорость. Ориентиры Core Web Vitals: LCP до 2,5 с, CLS до 0,1, INP до 200 мс. Красивый макет, который грузится пять секунд, проигрывает простому.
- Доказательства рядом с ценой. Фото производства, документы, регламент, схема работы. Не «мы надёжные», а то, что можно проверить.
Как проверить выбранный дизайн до релиза
Проверка стоит дешевле переделки, поэтому её делают до вёрстки.
- Прототип в сером. Если чёрно-белый макет без картинок и красивых шрифтов читается и ведёт к заявке — дизайн выдержит. Если «магия» появляется только с фотографиями, структура слабая.
- Пять человек из целевой аудитории. Дайте задачу: «найди цену на позицию X и оставь заявку». Считайте не мнения, а секунды и точки, где человек застрял.
- Мобильный тест на реальном телефоне, а не в эмуляторе браузера, при среднем интернете.
- Разметка целей до запуска. Отправка формы, клик по телефону, открытие прайса — цели заводятся в Метрику вместе с версткой, иначе сравнить старое и новое будет нечем. Как это устроено, разбираем в разделе про веб-аналитику.
Сколько стоит и сколько занимает
Цены на нашей стороне открытые и не зависят от того, «как посмотрит менеджер».
- Лендинг с дизайном и вёрсткой — от 80 000 ₽, срок 5–10 дней.
- Корпоративный сайт — от 200 000 ₽.
- Каталог с фильтрами и карточками — от 150 000 ₽.
- Логотип — от 30 000 ₽, полная упаковка бренда — от 490 000 ₽.
- Тексты под макет — от 15 000 ₽ за страницу, поддержка и доработки после запуска — от 10 000 ₽/мес.
Полный прайс со всеми услугами лежит на странице цен, а порядок работ и состав этапов — в описании услуги разработки сайтов. Другие материалы по теме собраны в разделе о веб-дизайне.
Можно ли просто купить красивый шаблон и не платить за дизайн?
Можно, если задача — присутствие в сети, а не заявки. Шаблон не знает вашей логики продаж: в нём нет вашего первого экрана, вашей вилки цен и вашей формы расчёта. На практике экономия 80 000 ₽ оборачивается месяцами рекламного бюджета, потраченного на страницу, которая не конвертирует.
Сколько стоит дизайн отдельно от разработки?
Мы не продаём макеты «в стол» — дизайн входит в стоимость сайта: от 80 000 ₽ за лендинг, от 200 000 ₽ за корпоративный сайт. Отдельно заказывают обычно логотип от 30 000 ₽ или полную упаковку бренда от 490 000 ₽, когда нужен фирменный стиль до сайта.
Тёмная тема снижает конверсию?
Сама по себе нет, но она плохо переносит длинные тексты и большие формы: глаз устаёт, ошибки ввода растут. Рабочий компромисс — тёмный первый экран и витрина, светлые блоки с описанием и заявкой. Если сомневаетесь, начните со светлой версии и проверьте гипотезу на отдельной посадочной.
Как понять, что дизайн устарел и пора переделывать?
Три признака: сайт неудобен на телефоне, до цены нужно больше трёх кликов, конверсия падает при том же качестве трафика. Возраст макета сам по себе значения не имеет — есть страницы 2019 года, которые продают лучше свежих. Начните с бесплатного экспресс-аудита, он покажет, дело в дизайне или в трафике.
У нас два сегмента — розница и опт. Один сайт или два?
Один сайт с двумя явными входами на первом экране: «купить» и «оптовые поставки», каждый ведёт в свою ветку со своей формой и своей логикой цен. Два отдельных домена оправданы, только когда различаются юрлицо, склад и отдел продаж — иначе вы делите SEO-вес и платите за поддержку дважды.
Не уверены, какой дизайн нужен именно вашему сайту
Посмотрим на текущий сайт, трафик и путь до заявки, скажем, где вы теряете обращения и что из этого решается дизайном, а что — структурой и скоростью.