Дизайн сайта, который продаёт: визуальная иерархия,
контраст и типографика в цифрах.

Что видно со стороны, когда дизайн работает против владельца

Рекламный бюджет выбран полностью, цена перехода 45 ₽, а выручка стоит. Владелец открывает сайт с телефона и видит логотип, карусель из четырёх баннеров и ни одной кнопки выше линии прокрутки.

Посетитель из рекламы читает «Надёжный партнёр с 2010 года», не понимает, к кому попал и что здесь решают, и уходит. Заявка потеряна не из-за цены, а из-за непонятного текста.

Дело не в картинке, а в решениях: что выше, что крупнее, что контрастнее и сколько действий отделяет человека от формы. Эти решения принимаются не вкусом, а измеримыми правилами.

Шесть замеров, которые снимаются за один вечер

Возьмите телефон, включите мобильный интернет и пройдите путь от объявления до отправки заявки. Записывайте числа, а не впечатления.

1. 01Первый экран. Что здесь продают, кому и что делать дальше? Если ответ приходится искать прокруткой, точка фокуса потеряна.
2. 02Контраст. Проверьте текст и надпись на кнопке: минимум 4,5 к 1 для текста и 3 к 1 для надписей крупнее 24 пикселей.
3. 03Кегль и интерлиньяж на телефоне. Основной текст не меньше 16 пикселей, межстрочный интервал 1,4–1,6.
4. 04Длина строки. На настольном экране комфортно 60–75 знаков. Полоса на 140 знаков теряет читателя к третьей строке.
5. 05Число касаний до заявки. Больше двенадцати касаний от входа до отправки формы — половина людей не дойдёт.
6. 06Скорость. Загрузка первого экрана на мобильной сети: дольше 2,5 секунды — часть посетителей уходит, не увидев текст.

Четыре группы причин, из-за которых первый экран не продаёт

Причины раскладываются на четыре группы: смысл, иерархия, читаемость и доверие. Каждая проверяется по числам.

Смысл. Заголовок «Надёжный партнёр с 2010 года» сообщает о компании и молчит о задаче клиента. Работающая формулировка называет результат и срок: ремонт офиса под ключ за 45 дней с фиксированной сметой.

Иерархия. Когда на экране четыре одинаково крупных блока, глаз не выбирает маршрут. Норма: один главный акцент и кнопка не ниже второго уровня, разрыв в размере между уровнями не меньше полутора раз.

Читаемость. Двенадцатипиксельный серый текст, интерлиньяж 1,1, строка на 140 знаков, светлый шрифт поверх фотографии. По отдельности мелочь безобидна, вместе эти огрехи дают основную долю отказов.

Доверие. Цены без вилки, сроки без ответственного, кейсы без цифр до и после, форма без обещания перезвонить. Человек не спорит с сайтом, он закрывает вкладку.

Сколько стоит оставить первый экран как есть

Считаем на цифрах компании услуг со средним чеком 45 000 ₽. Реклама приводит 2000 визитов в месяц, сайт даёт 1,2% от 2000 = 24 заявки, отдел продаж закрывает каждую четвёртую.

Получается шесть сделок: 6 × 45 000 = 270 000 ₽ выручки в месяц. Это потолок, который обеспечивает текущий первый экран.

Правка заголовка, иерархии и читаемости обычно удваивает конверсию на том же трафике: 2,4% от 2000 = 48 заявок, двенадцать сделок, 12 × 45 000 = 540 000 ₽. Разница составит 540 000 − 270 000 = 270 000 ₽ в месяц, то есть около 3,2 млн ₽ в год, при том же рекламном бюджете.

Чем обернётся если оставить как есть

Потери не стоят на месте. Цена перехода растёт на 15–25 процентов в год, конкурент с понятным первым экраном забирает тех же людей дешевле, а короткие визиты тянут позиции вниз.

Через год при бюджете 90 000 ₽ и подорожавшем до 56 ₽ переходе вы получите около 1600 визитов вместо 2000. При прежней конверсии это 19 заявок и 214 000 ₽ выручки.

План правок на один вечер

Пять шагов, для которых не нужен дизайнер и почти не нужен бюджет. Идите по порядку и сохраняйте скриншоты до и после.

1. 01Перепишите заголовок первого экрана под задачу клиента: результат, срок, цена или условие работы.
2. 02Оставьте один главный акцент: кнопка выше линии прокрутки, размер не меньше 44 на 44 пикселя, контраст к фону не ниже 3 к 1.
3. 03Поднимите основной текст до 16 пикселей и интерлиньяж до 1,5, уберите серый текст на сером фоне.
4. 04Сократите форму до имени и телефона и добавьте строку о том, когда вы перезвоните.
5. 05Поставьте в Метрике цель на отправку формы и запишите сегодняшнюю конверсию.

Точка, где нужен специалист

Текст, кегль и кнопку можно поправить своими руками, и первый прирост обычно приходит оттуда. Дальше начинаются ограничения.

Шаблон. В готовой теме размеры, отступы и сетка зашиты в десятки классов. Увеличение кегля ломает переносы, кнопка уезжает под блок, на планшете появляется горизонтальная прокрутка.

Иерархия. Уровни, сетка 8 пикселей, состояния кнопок и правила контраста держатся на дизайн-системе. Первый экран, собранный по кускам, быстро возвращается к равному весу элементов.

Проверка. Чтобы уверенно увидеть разницу в 20 процентов, нужны сотни конверсий. На 24 заявках в месяц выводы будут случайными.

Связка с учётом заявок. Цель в аналитике, передача обращения в Telegram или CRM, разметка кнопок и источников — это настройка системы, а не косметика.

Что входит в работу и на что рассчитывать

Когда правки перестали двигать цифры, работу разбивают на этапы.

1. 01Аудит первого экрана, читаемости, пути до заявки и аналитики. Его ведёт Максим Холмов, основатель студии, и счёт за него не выставляется: на выходе список правок с приоритетами и ожидаемым эффектом, даже если дальше вы ничего не заказываете.
2. 02Прототип и логика: порядок блоков и маршрут до кнопки согласуем до отрисовки макетов.
3. 03Дизайн: иерархия, контраст, типографика, поведение на телефоне и планшете.
4. 04Сборка и подключение: вёрстка, цели в Метрике, передача заявок в Telegram или CRM.

Вывод: дизайн — это последовательность решений

Продающий дизайн не про вкус и не про «красиво». Это набор решений с числами: что крупнее, что контрастнее, что стоит первым и сколько касаний отделяет человека от формы.

Стоимость зависит от объёма: лендинг от 10 000 ₽, многостраничный сайт от 30 000 ₽, интернет-магазин от 80 000 ₽. Первые три месяца после запуска студия на связи и счёт не выставляет, далее сопровождение от 5 000 ₽ в месяц. Код, доступы и документация остаются у заказчика.

Начните с шести замеров и вечера правок. Если конверсия выросла меньше чем на четверть, дальше нужна перестройка структуры: на 2000 визитах четверть прироста — это шесть дополнительных заявок и около 67 000 ₽ выручки в месяц.