Макет лендинга: из чего состоит, где взять и сколько стоит

Что такое макет лендинга и чем он отличается от прототипа и готового сайта

Макет лендинга — визуальная модель одностраничного сайта с расположением блоков, текстов, кнопок и изображений без программного кода. Разработка landing page проходит по цепочке: техническое задание → прототип со схемой блоков → макет с дизайном → свёрстанная страница на HTML или в конструкторе. Прототип фиксирует структуру и логику, макет добавляет цвета, шрифты, отступы и графику. Готовый лендинг — уже рабочий сайт, куда переносят утверждённый макет. Файлы для макета делают в Figma, PSD или собирают из блоков конструктора без кода. Для приёмки важно указывать ширины экранов: 1440 px для десктопа и 375 px для мобильных устройств. Дизайн лендинга проверяют на этих ширинах до передачи в вёрстку, чтобы избежать переделок. Отдельный макет обычно готовят и для планшетной версии шириной 768 px, если бизнес рассчитывает на трафик с этих устройств.

ТЗшник разобрал 17 страниц выдачи Яндекса и Google по запросу «макет лендинга», выделил структуру из 6 разделов и нормы повторов, а затем сам написал текст объёмом 1024 слова с релевантностью 95 пунктов — от разбора блоков макета до вопросов о стоимости. Готовый текст уже собран и проверен по нормам ТОПа. Человеку остаётся подставить свои цены на макет и сроки работы, проверить факты про конструкторы и библиотеки шаблонов и опубликовать страницу.

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

• Первый экран — оффер в одном предложении, подзаголовок с выгодой, кнопка целевого действия. Текст оффера — не более 12 слов, иначе он не читается за 3 секунды.
• Блок выгод — 3–6 карточек с иконкой и коротким текстом до 15 слов на элемент.
• Состав услуги или товара — перечень позиций с фото, ценой и кратким описанием, обычно 4–8 позиций на экран.
• Цены — тарифные карточки или таблица с условиями, что входит и что нет.
• Кейсы и портфолио — до 6 примеров работ с результатом в цифрах: сроки, объём, выручка клиента.
• Отзывы — 3–5 отзывов с именем, фото и, желательно, ссылкой на источник для доверия.
• FAQ — 5–8 вопросов с ответами по 30–50 слов, снимающих типовые возражения.
• Форма заявки — 2–4 поля, кнопка отправки, ссылка на политику обработки данных.
• Подвал — телефон, адрес, ссылки на соцсети, карта проезда, реквизиты компании.

Каждый блок landing page работает на одну продажу и одно действие клиента, поэтому лишние элементы снижают конверсию. Хороший макет для вашего бизнеса содержит не больше 8–10 экранов на десктопе. Один элемент не должен повторять функцию другого: если кнопка заявки уже стоит на первом экране, дублировать её нужно только внизу страницы, а не в каждом блоке подряд. Контент выстраивают последовательно: сначала выгода, затем доказательство в виде кейса или отзыва, потом цена и форма. Такой порядок ведёт клиента от знакомства с предложением до принятия решения без лишних переходов между блоками.

Где взять готовый макет лендинга: Figma, конструкторы и библиотеки шаблонов

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

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

Посмотреть готовые шаблоны можно в галереях самих конструкторов — там сортировка по нишам ускоряет выбор. Каждый сервис предлагает свой набор фильтров: по цвету, по типу бизнеса, по числу блоков. Инструмент для сборки без кода подходит, если нужен быстрый запуск, а Figma остаётся удобнее для правок дизайна перед вёрсткой. Выбрать шаблон стоит с запасом гибкости: часть галерей позволяет менять структуру блоков, часть — только цвета и тексты. Прежде чем выбрать конкретный вариант, стоит открыть три-четыре шаблона и сравнить, какой из них ближе к структуре, нужной для бизнеса. Многие сервисы держат отдельный раздел, где собраны бесплатные шаблоны без ограничений по времени использования, и раздел с платными шаблонами премиум-класса, где доступна расширенная анимация блоков.

Как подобрать макет под задачу бизнеса

Сначала определяют цель страницы и целевое действие — заявка, звонок, покупка, регистрация. Затем выбирают тип макета под сценарий.

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

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

Готовое решение подходит небольшой компании с типовой услугой, а сложный проект с уникальным сценарием продажи обычно требует индивидуального макета под конкретный бизнес. Любой шаблон интернет-магазина стоит проверить на число карточек товара, которое он выдерживает без потери скорости загрузки страницы.

Сколько стоит макет лендинга: бесплатно, шаблон или дизайнер

Есть три уровня стоимости на дизайн лендинга.

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

Требования к макету перед вёрсткой: чек-лист

• Готовы макеты для двух ширин: 1440 px и 375 px, желательно ещё 768 px для планшета.
• Настроена единая сетка и одинаковые отступы между блоками.
• Собраны компоненты и стили текста, а не разрозненные надписи на каждом экране.
• Прописаны состояния кнопок и полей: обычное, при наведении, при ошибке.
• Вся графика подготовлена в нужном разрешении, без размытых иконок.
• В блоках стоят реальные тексты, а не заглушки типа Lorem Ipsum.
• Шрифты подключены с лицензией, разрешающей коммерческое использование.
• Продумана логика формы заявки: какие поля обязательны, куда уходят данные.
• Указаны контакты и карта проезда в подвале, если это офлайн-бизнес.
• Если на странице есть видео, оно даёт превью-картинку и не мешает загрузке остальной информации.
• Проверена система ссылок: все переходят на нужный якорь, а не на пустой блог или чужой домен.

Частые ошибки: макет сделан только под десктоп без мобильной версии, кнопки меньше 44 px и неудобны для касания, а тексты в блоках вставлены как картинка, которую нельзя изменить. Такой landing page придётся переделывать после первой правки клиента, поэтому проверку по чек-листу проводят до передачи макета в вёрстку. Если хотите онлайн-запуск без задержек, ещё до старта вёрстки стоит согласовать новый список правок с заказчиком — так исключаются повторные круги согласований. Другой частый случай — макет создан под один сценарий, а бизнес позже хочет добавить большой каталог: тогда проще заранее заложить в структуру место для будущих разделов, чем создать макет заново с иной системой блоков. Адаптивные шаблоны, которые изначально проектировались под разные экраны, легче настроить под новые требования, чем макет, который сделан только под один размер.

Частые вопросы о макетах лендинга

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