Заказчик присылает ссылку на референс: тёмный фон, огромная типографика, плавные появления блоков при скролле. Через два месяца после запуска мы открываем аналитику и видим, что заявок стало меньше, чем на старом сайте, который никому в компании не нравился. Такой разговор повторяется у нас несколько раз в год. Причина почти всегда одна: тренды дизайна сайтов 2026 года копируют по картинке, а не по механике, и в результате получают красивую витрину, которая хуже прежней справляется с единственной своей задачей.
Ниже собрано то, что в наших проектах действительно двигает конверсию, и то, что стабильно её роняет, хотя отлично смотрится в портфолио.
Дизайн теперь оценивают цифрами
Ещё лет пять назад спор о макете заканчивался фразой «мне не нравится» со стороны собственника и «зато это современно» со стороны студии. Сейчас у этого спора есть арбитр. Google измеряет три показателя Core Web Vitals: LCP (когда отрисовался самый крупный элемент экрана), INP (насколько быстро страница отвечает на действие пользователя) и CLS (насколько содержимое дёргается при загрузке). Хорошими считаются значения LCP до 2,5 секунды, INP до 200 миллисекунд и CLS не выше 0,1, причём смотреть надо на 75-й перцентиль реальных загрузок, отдельно для мобильных и десктопа.
Эти метрики обычно считают зоной ответственности программистов, и зря. Каждая из них напрямую зависит от дизайнерского решения. Видеофон на первом экране весом восемь мегабайт уводит LCP за четыре секунды на мобильном интернете. Шрифт, который подгружается с чужого домена и меняет размер текста после загрузки, портит CLS. Тяжёлый скрипт анимации, обсчитывающий позиции блоков на каждый кадр прокрутки, бьёт по INP: пользователь нажимает кнопку, а страница отвечает через полсекунды.
Практический вывод простой. Когда дизайнер приносит макет, у каждого эффектного элемента должна быть оценка стоимости в миллисекундах. Дизайн для конверсии в 2026 году начинается с этого разговора, а не с выбора палитры.
Первый экран: конкретика вместо обещаний
Мода на первый экран прошла полный круг. Сначала были слайдеры с пятью сообщениями, потом гигантские фотографии с одним словом поверх, теперь возвращается плотный информативный блок. И это правильно, потому что посетитель за первые секунды отвечает себе на четыре вопроса: куда я попал, работают ли эти люди с такими, как я, какой результат я получу и что мне сейчас сделать.
Слайдер на этот запрос не отвечает. По нашей практике второй и последующие слайды видит ничтожная доля посетителей, а карусель успевает переключиться ровно в тот момент, когда человек дочитывает предложение. Мы почти всегда заменяем её статичным блоком: заголовок с конкретной услугой и сегментом, подзаголовок с измеримым результатом, одна главная кнопка и рядом текстовая ссылка для тех, кто ещё не готов оставлять контакты.
Второй момент касается количества призывов к действию. Когда на экране три кнопки одинакового веса, выбор превращается в работу, и часть людей эту работу не делает. Оставляйте одно доминирующее действие, остальные понижайте в весе до текстовой ссылки.
Типографика: крупный кегль и спокойная вёрстка
Текст на сайтах растёт в размере несколько лет подряд, и дело здесь не в эстетике. Базовый кегль 18-20 пикселей на десктопе и 17-18 на мобильном читается без усилия людьми старше сорока, а именно они чаще всего принимают решение о покупке в B2B. Длина строки в районе 60-80 знаков и межстрочный интервал 1,5-1,6 дают тот же эффект: человек не теряет строку и дочитывает до кнопки.
Крупные заголовки работают, когда под ними есть содержание. Заголовок в сто пикселей высотой, сообщающий «Мы создаём будущее», занимает половину экрана и не говорит ничего. Тот же кегль со словами «Настраиваем Битрикс24 для производственных компаний» работает.
Технически есть два приёма, которые стоит закладывать сразу. Первый: вариативные шрифты, один файл вместо пяти-шести отдельных начертаний, меньше запросов и меньше веса. Второй: аккуратная настройка подмены. Свойство font-display: swap показывает текст системным шрифтом до загрузки основного, и это лучше, чем пустое место, но подменённый шрифт часто имеет другую ширину, из-за чего макет прыгает. Подбор запасного начертания и подгонка его метрик через size-adjust убирают этот прыжок и заодно улучшают CLS.
Доступность вышла из разряда благотворительности
Правила доступности перестали быть темой узкого круга энтузиастов. В версии WCAG 2.2 появился критерий 2.5.8 Target Size (Minimum) уровня AA: интерактивная цель должна быть не меньше 24×24 CSS-пикселей. У критерия есть исключения, например ссылки внутри строки текста и цели, разнесённые достаточным интервалом, но само появление такого требования показывает направление.
Рядом стоит давнее правило контрастности: обычный текст должен иметь контраст не ниже 4,5:1 к фону, крупный не ниже 3:1. Светло-серая подпись под заголовком, которая так нравится дизайнерам, это правило обычно нарушает.
Дело тут не в формальном соответствии стандарту. Человек, который смотрит ваш сайт с телефона на улице в солнечный день, находится ровно в положении пользователя с ослабленным зрением. Он не станет разбирать бледный текст, он закроет вкладку. Поэтому проверка контраста и размеров целей работает на конверсию.
Блоки доверия: что снимает возражения, а что их создаёт
Между первым экраном и формой у посетителя возникает набор сомнений, и структура страницы должна отвечать на них в том порядке, в каком они появляются. Сначала человек проверяет, решали ли вы задачу, похожую на его. Затем прикидывает, сколько это будет стоить. Потом смотрит, кто с ним будет работать и что произойдёт после заявки.
Отсюда состав блоков. Кейс полезен, когда в нём есть исходная ситуация, что именно сделали и что изменилось в числах. Кейс из трёх предложений с логотипом клиента ничего не доказывает. Отзыв работает, когда рядом стоит имя, должность и компания; безымянный отзыв «Отличная работа, спасибо!» читается как заполнитель и снижает доверие ко всей странице.
Отдельный разговор про цены. Полный прайс нужен не всегда, но полное молчание о деньгах отправляет часть посетителей к конкуренту, который назвал хотя бы диапазон. Вилка «от и до» с объяснением, от чего зависит итоговая сумма, обычно работает лучше формулировки «стоимость рассчитывается индивидуально».
Ещё один недооценённый блок: описание процесса. Пять коротких шагов от заявки до результата с указанием сроков снимают тревогу тех, кто раньше не заказывал такую услугу. Это дешёвый в производстве блок, который заметно помогает на длинном цикле сделки.
И обратная сторона: сертификаты, дипломы и логотипы партнёров, выложенные ковром на пол-экрана, доверия не добавляют. Два-три подтверждения, значимые именно для вашего сегмента, работают лучше двадцати иконок.
Формы: где именно теряются заявки
Форма заявки, место, где дизайн превращается в деньги напрямую, чаще всего проектируется по остаточному принципу. Несколько правил, которые мы применяем почти во всех проектах.
Спрашивайте только то, что нужно для первого контакта. Название компании, должность, город и удобный способ связи можно уточнить в разговоре. Каждое поле, добавленное «на всякий случай», отсекает часть людей.
Не заставляйте человека угадывать формат. Маска для номера, автоматическая подстановка кода страны, понятная подпись под полем: всё это снимает трение. Валидацию показывайте, когда человек ушёл из поля, а не на каждом введённом символе. Подсветка ошибки в момент, когда номер ещё не дописан, раздражает.
Ошибку описывайте словами и рядом с полем. Красная рамка без текста не сообщает, что именно не так, а людям с нарушением цветовосприятия не сообщает вообще ничего. По той же причине цвет никогда не должен быть единственным носителем смысла.
Отдельно про состояние после отправки. Сообщение «Спасибо, мы получили вашу заявку» лучше, чем ничего, но фраза «Заявка у менеджера, перезвоним в течение рабочего дня, обычно в течение часа» снижает тревогу и уменьшает число дублей от одного человека.
Мобильный сценарий: проектируем под большой палец
В проектах, которые мы ведём, доля мобильного трафика обычно держится в диапазоне от двух третей до четырёх пятых. Значит, основным становится макет для телефона, а десктопный собирается из него.
Экран телефона удерживается одной рукой, и удобная для нажатия зона находится внизу и по центру. Поэтому кнопка целевого действия на длинной странице живёт в липкой панели внизу, а не только в первом экране, куда пользователь уже не вернётся. Номер телефона и мессенджер держите там же, а не третьим пунктом в бургер-меню.
Размер целей на мобильном мы закладываем с запасом относительно минимальных 24 пикселей: 44-48 пикселей по меньшей стороне дают комфортное попадание даже на ходу. И обязательно оставляйте между соседними кнопками воздух. Две плотно стоящие цели приводят к случайным нажатиям, а случайное нажатие оборачивается либо потерянным шагом, либо звонком не туда.
Анимация с уважением к пользователю
Движение на странице оправданно, когда оно объясняет связь между элементами: раскрылся блок, появилось подтверждение, элемент переехал в корзину. Движение ради атмосферы обычно стоит времени.
Держите длительность переходов в районе 150-300 миллисекунд. Всё, что дольше, воспринимается как задержка. Обязательно поддерживайте медиазапрос prefers-reduced-motion: часть людей включает у себя в системе уменьшение анимации из-за вестибулярных нарушений, и сайт должен это уважать.
Осторожнее с популярным приёмом «блок появляется при прокрутке». Технически он делается так: элемент изначально прозрачный, скрипт добавляет класс, когда блок попал в область видимости. Если скрипт не отработал (заблокировал корпоративный прокси, случилась ошибка в другом месте, посетитель пришёл со старого браузера), на странице остаётся пустота вместо контента. Мы задаём такие эффекты так, чтобы исходное состояние было видимым, а анимация только улучшала показ.
Скролл-хайджекинг, когда страница сама решает, куда прокрутиться, ломает привычное поведение и поиск по странице. На презентационных проектах он иногда уместен, на сайте, который должен приносить заявки, почти никогда.
Тренды, за которые вы платите заявками
Есть приёмы, которые регулярно попадают в подборки трендов дизайна сайтов 2026 года и при этом устойчиво ухудшают коммерческие показатели.
Стеклянные полупрозрачные панели поверх фотографии выглядят дорого ровно до момента, когда на них ложится текст: контраст падает, читаемость исчезает. Если приём нужен, кладите под текст плотную подложку.
Тяжёлая трёхмерная графика и WebGL на первом экране почти гарантированно портят LCP на среднем телефоне. Такие сцены имеют право на жизнь ниже по странице и с ленивой инициализацией.
Бесконечная прокрутка в каталоге лишает пользователя футера с контактами и усложняет возврат к найденному товару. Пагинация или кнопка «Показать ещё» решают ту же задачу без потерь.
Кастомный курсор, автовоспроизведение видео со звуком, всплывающее окно с подпиской на пятой секунде и баннер согласия на половину экрана относятся к одной категории: они забирают внимание у того действия, ради которого страница существует.
Как это выглядит на практике
Приведу иллюстративный пример. Цифры условные, но пропорции взяты из типичной для нас работы. Компания продаёт услуги для бизнеса, сайт на WordPress с конструктором, на первом экране видеофон и слайдер с тремя сообщениями, форма из семи полей и кнопка «Отправить».
Что меняется при переработке. Видеофон заменяется статичным изображением, которое ядро WordPress само помечает как приоритетное к загрузке. Слайдер уступает место одному блоку с конкретной формулировкой услуги и сегмента. Форма сокращается до имени, телефона и короткого поля «что нужно», кнопка получает текст, описывающий результат: «Получить расчёт». Внизу мобильной версии появляется липкая панель с этой же кнопкой и мессенджером. Отдельно вычищаются шрифты: вместо четырёх начертаний остаются два вариативных файла.
Сумма таких изменений обычно даёт не один большой скачок, а несколько сложившихся приростов: страница начинает открываться заметно быстрее, доля людей, дошедших до формы, растёт, и часть тех, кто раньше бросал форму на пятом поле, доходит до отправки. Модного в этих решениях ничего нет. Каждое из них убирает конкретное препятствие, которое можно было измерить до переделки.
Что из этого делается средствами WordPress
Часть работы ядро берёт на себя, если ему не мешать. Начиная с версии 6.3 WordPress сам определяет наиболее вероятное LCP-изображение и добавляет ему атрибут fetchpriority="high", а также аккуратнее решает, каким картинкам не нужен отложенный подгруз. Изображение считается кандидатом, если произведение его ширины на высоту превышает порог в 50 000 пикселей. Отсюда практическое следствие для дизайна: главную картинку первого экрана не стоит прятать внутрь слайдера или подгружать скриптом, иначе ядро её просто не увидит и приоритет не проставит.
В версии 6.8 появилась спекулятивная загрузка на базе Speculation Rules API: по умолчанию она включена на фронтенде и предзагружает ссылки с осторожной степенью готовности, отключаясь для авторизованных пользователей и сайтов без человекопонятных адресов. Поведение настраивается фильтром wp_speculation_rules_configuration. Для многостраничного сайта с каталогом это ощутимая прибавка к субъективной скорости перехода, полученная без единой строчки в макете.
Отдельно стоит упомянуть theme.json в блочных темах. Он позволяет описать палитру, типографическую шкалу и отступы в одном месте, вместо того чтобы разбрасывать значения по десятку файлов и настройкам виджетов. Если проект живёт на конструкторе вроде Elementor, тот же принцип реализуется через глобальные стили: цвета и шрифты задаются один раз и переиспользуются, иначе через год поддержка превращается в археологию.
Если вы планируете переделку и хотите, чтобы решения принимались с оглядкой на метрики, а не на подборки красивых сайтов, посмотрите наши услуги по разработке сайтов. Мы работаем и с WordPress, и с 1С-Битрикс, и начинаем как раз с замеров текущего состояния.
С чего начинать переработку
Сначала замерьте, что есть сейчас, по полевым данным реальных пользователей, а не по одному лабораторному прогону. Зафиксируйте LCP, INP и CLS отдельно для мобильных. Этот шаг экономит и бюджет, и нервы: без исходных цифр спорить о результате переделки будет нечем.
Потом сформулируйте для каждой ключевой страницы ровно одно целевое действие. Если их получается три, страница будет проигрывать всем трём.
Дальше собирайте прототип без цвета и картинок. На сером прототипе сразу видно, держится ли структура на содержании или её вытягивает оформление.
Перед сдачей проверьте контраст текста, размеры и интервалы интерактивных целей, поведение форм с ошибками и работу страницы при частично отключённых скриптах. И меняйте по одному значимому элементу за раз, если хотите понимать, что именно сработало.
Частые вопросы
Тёмная тема повышает конверсию?
Сама по себе нет. Тёмная тема снижает нагрузку на глаза в темноте и хорошо выглядит в технологичных нишах, но требует более аккуратной работы с контрастом: чистый белый текст на чистом чёрном фоне утомляет сильнее, чем светло-серый на тёмно-сером. Если делаете тёмную тему, делайте переключатель и проверяйте контраст в обоих режимах.
Нужно ли переделывать сайт полностью, если он выглядит устаревшим?
Не обязательно. Часто заметный прирост даёт переработка первого экрана, форм и мобильной навигации при сохранении остальной структуры. Полная переделка оправданна, когда сайт технически не тянет требования по скорости или когда изменилось само предложение компании.
Как понять, что дело в дизайне, а не в трафике?
Посмотрите на конверсию в разрезе источников и устройств. Если на десктопе показатель нормальный, а на мобильном втрое ниже при сопоставимом трафике, проблема почти наверняка в интерфейсе. Если проседают все сегменты одинаково, разбираться нужно с предложением и качеством трафика.
Сколько полей должно быть в форме заявки?
Столько, сколько нужно менеджеру, чтобы перезвонить и начать разговор. В большинстве B2B-проектов это имя, телефон и одно свободное поле. Всё остальное уточняется в разговоре и не должно стоять между человеком и кнопкой.
Стоит ли использовать готовые премиум-шаблоны?
Как основу иногда да, особенно при ограниченном бюджете. Проблема большинства шаблонов в том, что они несут избыточный набор скриптов и шрифтов ради демонстрации всех возможностей. Перед запуском такой шаблон нужно чистить: отключать неиспользуемые модули, сокращать начертания шрифтов и проверять метрики скорости на реальном контенте.