Дизайн лендинга: из чего он состоит и как его сделать

Что такое дизайн лендинга и какую задачу он решает

Дизайн лендинга — это визуальное и структурное решение одной страницы, которое ведёт пользователя к одному целевому действию: заявке, покупке или подписке. В отличие от многостраничного сайта, где посетитель может блуждать между разделами, landing page строится вокруг одного предложения и одного продукта или услуги. Трафик на такую страницу приходит из рекламной кампании, email-рассылки или социальных сетей, и у пользователя нет времени изучать структуру — решение принимается за секунды. Поэтому дизайн должны подчинить одной цели: показать товар услугу, снять сомнения и подвести к кнопке. Цель первого экрана — привлечь внимание человека, который пришёл по рекламе и ещё не решил, доверять ли предложению. Каждый элемент работает на конверсию, а не на украшение. Заголовок и подзаголовок формулируют предложение, визуал привлекает внимание, а форма закрывает целевой аудитории вопрос «что делать дальше». Если элемент не помогает пользователю совершить целевое действие, он лишний, даже если выглядит эффектно. Хороший дизайн лендинга не просто украшает страницу — он превращает случайного посетителя в одного из потенциальных клиентов бизнеса, который дошёл до формы и оставил контакты. Такой дизайн лендинга работает как продавец без выходных: он должен объяснить продукт и снять возражения без участия человека. Вторая цель дизайна — удержать внимание достаточно долго, чтобы пользователь успел прочитать хотя бы половину страницы, а не закрыл вкладку на первом экране.

Для запроса «дизайн лендинга» ТЗшник разобрал 15 страниц выдачи Яндекса и Google, вывел структуру из 8 разделов и норму примерно 230 слов на раздел — от блоков и сетки до примеров и стоимости работ — и сам написал по этому ТЗ готовый текст на 1715 слов с релевантностью 92 пункта. Человеку остаётся подставить свои расценки на дизайн, сроки макета в Figma и контакты, проверить примеры и цифры по своим проектам и опубликовать страницу.

Из каких блоков состоит лендинг и как их расставить

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

1. Первый экран. Заголовок, подзаголовок, кнопка и визуал должны объяснить суть предложения за 3–5 секунд. Здесь размещают первый CTA — призыв к действию с глаголом и выгодой, например «получить расчёт за 15 минут».
2. Проблема и решение. Раздел отвечает на вопрос, какую проблему решает продукт, и показывает, чем ваш продукт лучше привычного способа. Текст здесь короткий, без терминов.
3. Состав продукта. Перечисляются модули, комплектация или этапы услуги — это важные элементы, которые снимают неопределённость до звонка менеджеру. Здесь же даётся информация о комплектации, сроках и условиях доставки, которую покупатель обычно ищет отдельно.
4. Демонстрация. Скриншоты интерфейса, фото товара с разных ракурсов или короткое видео работы продукта в реальных условиях.
5. Выгоды. Три-пять карточек с преимуществами, каждая — конкретная цифра или факт, а не общая фраза вроде «качественно». Преимущества формулируют через цифры: срок доставки, гарантию, экономию времени или денег.
6. Снятие возражений. Ответы на типовые вопросы о цене, сроке доставки, гарантии и условиях возврата. Здесь размещают ту информацию, которую клиент ищет перед принятием решения о покупке.
7. Социальные доказательства. Отзывы с именами и фото, кейсы, логотипы клиентов, цифры по числу заказов — работа с социальными доказательствами повышает доверие сильнее, чем описание продукта. Отзыв с конкретным результатом убеждает лучше трёх абстрактных.
8. Цена. Тарифы или прайс с понятной вилкой, чтобы посетитель мог прикинуть бюджет без звонка.
9. Форма и контактные данные. Минимум полей, второй-третий CTA и телефон для тех, кто предпочитает узнать больше голосом и заполнить форму без набора текста.

Оптимально размещать от 2 до 4 кнопок действия CTA на странице: одну на первом экране, вторую после демонстрации и финальную у формы. Больше кнопок рассеивают внимание, меньше — теряют часть готовых к покупке клиентов. Каждый раздел должен решать конкретную задачу, а не дублировать соседний: если два раздела отвечают на один и тот же вопрос клиента, один из них можно убрать без потери смысла. Порядок разделов не догма: для дорогого продукта социальные доказательства можно поднять выше цены, чтобы снять недоверие раньше, чем человек увидит стоимость. Для простого товара, наоборот, цену показывают сразу после демонстрации, потому что решение о покупке принимается быстро и без долгих раздумий. Пользователь, который читает страницу с телефона, чаще пропускает средние разделы и сразу листает к цене и форме — это стоит учитывать при расстановке приоритетов.

Визуальный язык: цвет, шрифты, изображения и сетка

Палитра лендинга обычно состоит из 2–4 базовых цветов плюс один акцентный — под кнопки и важные элементы дизайна. Акцент должен выделяться на фоне остального макета контрастным цветом, иначе призыв к действию потеряется среди текста. Контраст текста к фону держат не ниже 4.5:1 — это минимум, при котором заголовок читается на смартфоне под солнцем и человеком с ослабленным зрением. Для гарнитур достаточно одной-двух: одна для заголовков, вторая для основного текста, иначе страница выглядит собранной из чужих шаблонов и теряет ощущение фирменного стиля бренда. Разный текст на странице — заголовки, подписи к кнопкам, подписи под фото — должен выдерживать единый стиль, иначе макет читается как несколько разных дизайнов, склеенных в один.

Заголовки задают в диапазоне 32–64 px в зависимости от экрана, основной текст — 16–20 px, строка — 60–80 знаков, дальше глаз устаёт бегать по строке. Сетку берут из 12 колонок с единым шагом отступов, например 8 или 16 px — это позволяет выравнивать элементы друг под другом без ручной подгонки. Фотографии продукта снимают самостоятельно вместо стоковых картинок: пользователь быстро отличает постановочный кадр от настоящего товара, и доверие падает. Короткое видео работы продукта убеждает лучше десяти фотографий, особенно если демонстрирует процесс, а не готовый результат; второе видео с отзывом клиента можно разместить ближе к форме. Цвет фона, цвет кнопки и цвет текста подбирают так, чтобы разные экраны — от старого смартфона до широкого монитора — показывали одинаково читаемую страницу. Анимацию можно использовать точечно — для смены состояния кнопки или появления блока при скролле, но не для декоративного движения, которое отвлекает внимание пользователя от текста и формы. Можно использовать иконки вместо длинных описаний там, где смысл понятен без слов: это ускоряет чтение и разгружает страницу от лишнего контента. Дизайн должны проверять на реальных устройствах, а не только в браузере на большом мониторе, потому что цвет и контраст могут выглядеть иначе на разных матрицах. Хороший тест — показать макет человеку на 3 секунды и спросить, что он запомнил: если не оффер и не кнопку, а декоративный элемент, стиль нужно упростить. Цвет фона должен оставаться нейтральным там, где расположен текст, чтобы не создавать дополнительный визуальный шум вокруг сообщения.

Мобильный дизайн лендинга: что меняется на маленьком экране

На телефоне макет строят в одну колонку: разделы идут друг под другом в том же порядке, что и на десктопе, без перестановки логики истории. Кнопка действия должна быть не меньше 44 px по высоте — это минимальный размер, при котором палец не задевает соседний элемент. Заголовки укорачивают до одной строки в 4–6 слов, длинные конструкции на мобильном экране разбивают смысл. Поля формы выстраивают в столбец, а не в два ряда, чтобы пользователи могли заполнять их без горизонтального скролла и оставить заявку в одно касание.

Липкая кнопка внизу экрана держит призыв к действию перед глазами весь просмотр страницы и привлекает внимание, даже если человек долистал до последнего блока. Вес изображений на мобильной версии снижают до 150–200 Кб на файл, иначе страница долго прогружается на мобильном интернете, и внимание пользователя будет потеряно ещё до показа первого экрана. Макет проверяют на ширинах 375, 768 и 1440 px — это стандартные точки для телефона, планшета и десктопа. На каждой ширине нужный элемент — кнопка, форма, цена — должен оставаться на одном экране без лишнего скролла. Учитывая, что больше половины визитов от всего трафика на лендинги приходится на смартфоны, мобильную версию нельзя считать вторичной: именно на ней решается, дойдёт ли пользователь до формы. Пользователи могут закрыть вкладку за пару секунд, если страница грузится медленно или текст не помещается на экране без масштабирования, поэтому мобильную сборку тестируют отдельно от десктопной. На маленьком экране один лишний элемент ощущается сильнее, чем на десктопе: каждый лишний скролл снижает шанс, что пользователь дойдёт до формы.

Как сделать дизайн лендинга в Figma: пошагово

Сборка макета в Figma укладывается в 7–8 шагов, если задача и целевая аудитория определены заранее.

1. Бриф: фиксируют целевое действие, ваш продукт, цену и то, какую проблему решает предложение для целевой аудитории.
2. Анализ конкурентов и референсов: смотрят 5–10 лендингов в нише, выписывают удачные приёмы структуры и первого экрана, чтобы понять, какие элементы уже используются другими игроками рынка.
3. Текст и серый прототип: сначала пишут заголовки и подзаголовки блоков, потом раскладывают их без цвета и картинок — так проще увидеть логику истории и создать структуру, которая ведёт к результату.
4. Сетка, стили, компоненты: задают 12 колонок, цвета, типографику и собирают кнопки, поля формы и карточки в переиспользуемые элементы.
5. Первый экран и остальные блоки на автолейауте: автолейаут ускоряет правки, когда меняется длина текста, и позволяет создать несколько вариантов одного блока для теста.
6. Адаптивы: делают версии под 375, 768 и 1440 px, проверяя, что кнопка и форма остаются удобными на любом устройстве.
7. Прототип и проверка на 3–5 людях: тестировщики проходят путь от первого экрана до формы, дизайнер фиксирует, где теряется внимание и на каком шаге пользователь колеблется перед принятием решения.
8. Передача в вёрстку: дев-режим Figma, экспорт иконок и изображений, описание состояний кнопок при наведении и нажатии.

На каждом шаге работа сверяется с исходной задачей: если блок не приближает целевую аудиторию к покупке, его пересобирают или убирают. Первый набросок структуры редко совпадает с финальным результатом — после теста на живых людях обычно меняется 2–3 блока. Срок такой работы — 10 дней в зависимости от числа блоков и итераций правок. Конкретный результат каждого шага стоит фиксировать письменно: так проще увидеть, на каком этапе теряется время и почему решение о макете затягивается. Альтернатива для небольшого бизнеса — сборка на шаблоне в конструкторе, например Тильда: готовый блок редактируют под свой продукт без отдельного этапа передачи в вёрстку, но результат ограничен возможностями шаблона, а целевая аудитория с высокими требованиями к визуалу такой макет может воспринять как типовой.

Примеры дизайна лендингов: что в них работает

Лендинг для товара делает акцент на демонстрации: крупные фото с разных ракурсов, видео распаковки, таблица размеров или комплектации. Задача — снять вопросы, которые обычно решаются в примерочной или магазине, и показать товар услугу так, чтобы не осталось сомнений в качестве. Такой пример хорошо подходит для интернет-магазинов с ограниченным ассортиментом.

Лендинг для услуги строится на доверии: биография специалиста, кейсы с результатом до/после, отзывы клиентов с фото и указанием имени. Здесь текст важнее картинки, потому что пользователь покупает экспертность, а не внешний вид. Хороший пример — страница юридической или медицинской услуги, где отзыв реального человека снимает больше сомнений, чем описание процедуры. В сфере бизнес-услуг работает похожий приём: кейс с цифрами убеждает быстрее, чем перечисление компетенций специалиста.

Лендинг для подписки продаёт выгоду от регулярного использования: сравнение тарифов, калькулятор экономии, отзывы о том, сколько времени или денег сэкономил другой пользователь. Такой пример хорошо работает для сервисов и приложений, где ценность не видна с первого взгляда.

Лендинг для регистрации на событие держит счётчик времени до начала, программу по блокам и фото предыдущих мероприятий — это работает как социальное доказательство того, что событие уже собирало аудиторию из числа потенциальных покупателей билетов.

Ещё один рабочий приём — раздел «клиенты которые» уже воспользовались продуктом услугой: логотипы компаний или фото людей с короткой цитатой. Если у бизнеса есть отдельная статья или разбор кейса, на неё ставят кнопку «узнать больше», чтобы не перегружать сам лендинг деталями. В другой ситуации, когда продукт сложный и требует объяснения, статью размещают прямо на лендинге отдельным блоком с раскрывающимся текстом. Из собственной практики можно перенести к себе: B2B-магазин инженерной арматуры — 106 запросов в ТОП-10 и рост визитов на 12%; SilverParket — сайт создан и продвинут за 3 месяца, половина ядра в ТОПе; перевозка автомобилей — сеть из 16 городских сайтов, с 850 до 1500+ заявок в месяц — на этих примерах видно, как структура и социальные доказательства влияют на конверсию конкретного бизнеса, и сколько пользователей в итоге дошло до формы.

Сколько стоит дизайн лендинга и что входит в работу

В работу входит проработка блоков структуры, адаптивы, прототип для проверки и передача макета в дев-режиме. Создание макета занимает разное время в зависимости от варианта: шаблон готов быстрее, авторский дизайн с нуля требует больше итераций и обратной связи от клиента. Вне стоимости чаще остаются вёрстка, написание текстов, фотосъёмка продукта и покупка домена — эти пункты клиент согласует отдельно, чтобы понимать полную стоимость запуска.

Итоговая цена зависит от числа блоков, наличия анимации, количества итераций правок и того, нужны ли иллюстрации с нуля вместо готовых. На время работы влияет и скорость обратной связи от клиента: если правки согласуются быстро, создание макета укладывается в изначальный срок, если нет — сроки сдвигаются. Клиент получает на выходе не просто картинку, а рабочий файл с элементами, который можно передать любому верстальщику и получить готовую услугу без привязки к одному исполнителю. Помощь на этапе постановки задачи и помощь в подборе референсов часто входят в стоимость студии, но не входят в услугу фрилансера с минимальным чеком. Если хотите обсудить проект и сроки, оставить заявку можно агентство «Комета», +7 495 118-37-73, top@cometa.agency — отвечаем в течение рабочего дня и уточняем детали по телефону или в форме обратной связи, чтобы дать точную цену без лишних созвонов. Узнать больше о составе работ можно на первом созвоне, где обсуждают количество блоков и сложность визуала.

Частые ошибки в дизайне лендинга: чек-лист перед вёрсткой

• Проверьте — не конкурируют ли на странице две цели одновременно; исправьте — оставьте одно целевое действие.
• Проверьте — понятен ли оффер за 5 секунд; исправьте — перепишите заголовок и подзаголовок короче.
• Проверьте — не использованы ли стоковые фото вместо продукта; исправьте — замените на реальные снимки.
• Проверьте — не мелкий ли текст и низкий контраст; исправьте — увеличьте кегль и доведите контраст до 4.5:1.
• Проверьте — не слишком ли много полей в форме; исправьте — оставьте только имя и телефон.
• Проверьте — есть ли у отзывов имена и фото; исправьте — уберите анонимные цитаты, добавьте конкретику.
• Проверьте — видны ли контактные данные без скролла до конца; исправьте — продублируйте их в шапке или в липкой панели.
• Проверьте — как макет выглядит на телефоне; исправьте — просмотрите все три ширины перед сдачей в вёрстку.
• Проверьте — не тяжёлые ли картинки; исправьте — сожмите файлы до нужного веса.
• Проверьте — не мешает ли анимация чтению; исправьте — оставьте движение только там, где оно поясняет действие.

Часто ошибку замечают только на этапе вёрстки, когда исправить её дороже, чем на этапе прототипа. Любой из пунктов чек-листа можно проверить за пять минут до передачи макета разработчику. Особое внимание стоит обратить на форму: несколько лишних вопросов в ней снижают число заявок сильнее, чем неудачный цвет кнопки. Обратим внимание и на главный признак перегруженного макета — если на первом экране больше одного призыва к действию, пользователь теряется и не совершает ни одного действия. Несколько минут на проверку чек-листа перед передачей в вёрстку экономят несколько дней правок после запуска.

Частые вопросы про дизайн лендинга

Аркадий Зверев, генеральный директор агентства «Комета». В продвижении сайтов с 2008 года, более 300 проектов — автор материала, ссылка на портфолио на ru-домене: cometa.agency/keysy.

Цены, сроки и состав работ приведены по информации Компании Комета (cometa.agency), проверено 14 сентября 2026. Стоимость зависит от ниши и объёма работ, точный расчёт — после разбора проекта.