Дизайн лендинга — это визуальное оформление страницы, которое помогает посетителю за несколько секунд понять предложение и подводит его к действию: заявке, звонку, заказу. Не подбор модных шрифтов и красивых картинок: картинка, которая не работает на эту задачу, — просто картинка.
Путь до готового лендинга: распаковка бизнеса, ЦА и конкурентов → прототип и продающие тексты → дизайн (вы читаете этот этап).
Что такое дизайн лендинга и чем он отличается от «просто красиво»
Дизайн идёт последним не случайно. К этому моменту известно, кто клиент, какие у него боли и возражения, какая структура у страницы и что написано в каждом блоке. Дизайнер не придумывает смыслы на ходу — он их оформляет. Этот подход мы называем смысловым дизайном: каждый элемент отвечает не на вопрос «как сделать красивее», а на вопрос «что должен понять и сделать посетитель в этом месте страницы».
Разница между двумя подходами к дизайну — в таблице.
| Критерий | Дизайн как украшение | Дизайн как инструмент продаж |
|---|---|---|
| Точка старта | Референсы «красивых сайтов» из подборок | Готовый прототип и тексты, уже проверенные на смысл |
| Первый вопрос | «Как сделать стильно?» | «Что должен понять посетитель за 3 секунды?» |
| Роль графики | Создаёт настроение, атмосферу | Заменяет абзац текста — поясняет смысл схемой или иконкой |
| Расстановка акцентов | По вкусу дизайнера | По важности блока для решения клиента о заявке |
| Кнопка заявки | Одна из многих, стилистически «в тон» | Выделена контрастом, рядом сняты сомнения |
| Как оценивают результат | «Нравится / не нравится» | По конверсии и понятности предложения |
Обе версии могут выглядеть эстетично. Разница в том, ради чего сделан каждый элемент — ради впечатления или ради заявки.
Визуальная иерархия: что человек видит за первые секунды
Визуальная иерархия — это порядок, в котором посетитель считывает страницу: что замечает первым, что вторым, а что пропускает вовсе. Задаёт этот порядок не текст, а размер, контраст, цвет и свободное пространство вокруг элемента. Крупный заголовок и контрастная кнопка притягивают взгляд раньше, чем мелкий абзац рядом.
Паттерны считывания
Взгляд движется по странице не хаотично, а по узнаваемым траекториям. Для лендинга чаще всего работают два паттерна:
- Z-паттерн — для первого экрана с небольшим количеством элементов: взгляд идёт слева направо по заголовку, затем по диагонали вниз, к кнопке или изображению справа. Подходит для оффера, где за секунды нужно донести «что это» и «что делать».
- F-паттерн — для блоков с плотным текстом: человек читает начало первых строк, а дальше просматривает только левый край. Отсюда правило: самое важное слово в заголовке и в пункте списка ставим в начало строки, а не в конец.
Нужный паттерн закладываем ещё на прототипе, а в дизайне усиливаем размером, цветом и расположением элементов — чтобы взгляд «спотыкался» о ключевые аргументы и кнопку.
Мобильная версия
С телефонов на лендинги часто приходит больше посетителей, чем с компьютеров — точную долю смотрим в Метрике конкретного проекта. Поэтому адаптив — не «уменьшенная копия» десктопа, а отдельная задача: на маленьком экране меняются и порядок блоков, и приоритеты.
- оффер и кнопка заявки попадают в зону, куда легко дотянуться большим пальцем;
- длинные абзацы дробим: на маленьком экране «стена текста» отпугивает быстрее, чем на десктопе;
- второстепенные блоки (развёрнутые кейсы, подробный FAQ) сворачиваем в аккордеон, чтобы страница не превращалась в бесконечный скролл;
- мелкие ссылки и узкие кнопки, рассчитанные на клик мышью, увеличиваем под палец.
Мобильную версию рисуем отдельными макетами для каждого ключевого экрана, а не отдаём на автоматическое сжатие десктопной.
Графика, которая усиливает смысл
Какая графика нужна лендингу, решили ещё на прототипе: что показать схемой вместо абзаца, где нужна иллюстрация процесса, а где — фото реального объекта. Как формируется этот список — в статье про смысловой прототип.
На дизайне отвечаем на другой вопрос — как эта графика нарисована:
- иконки и пиктограммы — рисуем в едином стиле под проект, а не собираем набор из стоков: разнобой в толщине линий и манере рисования заметен сразу;
- инфографика и схемы — переводим описание процесса (этапы работы, структура тарифа, устройство продукта) в последовательность, которую можно считать за пару секунд, не читая текст;
- иллюстрации — там, где нет подходящих реальных фото: абстрактные понятия, процессы «внутри» продукта. Без шаблонных 3D-рендеров, которые уже стоят на десятках чужих сайтов;
- фотографии — по возможности реальные, а не стоковые: объекты, команда, готовые работы. На доверие они работают сильнее любой иллюстрации.
Стиль фиксируем в начале проекта и ведём через весь лендинг: одна толщина линий, одна палитра акцентов, одна манера отрисовки иконок. Так страница выглядит цельной, а не собранной из разных источников.
Элементы, подталкивающие к целевому действию
Довести посетителя до заявки помогают несколько элементов — они повторяются почти на каждом продающем лендинге.
- Контрастная кнопка. Кнопка целевого действия отличается от остальных элементов цветом, а не только подписью. Если на странице десять одинаково ярких кнопок, ни одна не работает как акцент.
- Понятная подпись на кнопке. Не «Отправить», а конкретное действие: «Получить расчёт», «Заказать бесплатный аудит». Человек должен понимать, что произойдёт после клика.
- Снятие сомнений рядом с формой. Возле формы ставим то, что убирает последний барьер: срок ответа, бесплатность консультации, отсутствие обязательств.
- Форма захвата без лишних полей. Чем меньше полей, тем чаще форму заполняют до конца. Адрес, должность, комментарий убираем, если на первом контакте без них можно обойтись.
- Повторные точки входа. Кнопка заявки встречается по длине страницы несколько раз, а не только в начале и в конце: решение человек принимает в разных местах, и там же должна быть возможность его оставить.
- Доказательства рядом с решением. Отзывы, кейсы, логотипы клиентов ставим не отдельным блоком «для галочки», а там, где посетитель взвешивает — например, перед формой.
Как проходит разработка дизайна лендинга
Прототип и тексты согласованы — дальше разработка дизайна лендинга идёт по шагам.
- Дизайн-концепция первого экрана. Прорабатываем стиль, палитру и графику на самом заметном экране — он задаёт визуальный язык всему лендингу.
- Согласование концепции. Клиент утверждает направление до того, как дизайнер возьмётся за остальные экраны. Так правки не превращаются в переделку всей страницы.
- Дизайн остальных экранов по прототипу. Оформляем блоки по утверждённой структуре и текстам, без импровизации по содержанию.
- Отрисовка графики. Иконки, схемы, инфографика, обработка фотографий под утверждённый стиль.
- Адаптивные версии. Макеты для мобильных и планшета — с пересмотром приоритетов блоков, а не механическим сжатием.
- Правки и передача в вёрстку. Вносим замечания в рамках числа итераций, зафиксированного в договоре, готовим макеты и спецификации для верстальщика.
Срок этапа зависит от количества экранов и объёма индивидуальной графики — точный срок называем после оценки конкретной задачи. Ориентир по проекту целиком: сайт от распаковки до запуска мы делаем от 20 дней в базовом тарифе и от 30 дней в расширенном — дизайн занимает часть этого срока. От вас нужны фирменные материалы, если они есть (логотип, брендбук, фото), и обратная связь по макетам в оговорённые сроки: задержка с правками сдвигает запуск так же, как задержка на нашей стороне.
Стоимость зависит от количества экранов, объёма индивидуальной графики (иконки и схемы под проект дороже готового иконпака), числа адаптивных версий и количества итераций. Отдельной строкой прайса дизайн мы не продаём — он входит в работу над сайтом целиком. Тарифы и форма расчёта — на странице продающего сайта, там же все три этапа методологии.
Примеры: как это выглядит на реальных проектах
Разберём на реальном проекте: сайт для компании КомерПоливМонтаж, которая проектирует и монтирует системы автополива в Московской области. Делали на Tilda в сжатые сроки — нужно было успеть до начала сезона. Порядок этапов это не изменило: сначала интервью с владельцем и анализ конкурентов, потом текстовый прототип, и только затем дизайн.
Вместо фразы «выполняем монтаж качественно» на сайте — стандарт проверки: перед сдачей компания прогоняет систему по 22 критериям. Это пример из раздела про графику: инфографика заменяет абзац — направления проверки считываются быстрее, чем описание процесса текстом.
Блок с этапами работы построен по визуальной иерархии: порядок шагов от заявки до запуска системы считывается по номерам и коротким подписям — сплошной текст про процесс монтажа читать не нужно.
Здесь работает принцип из раздела про элементы, подталкивающие к действию: доказательство стоит рядом с решением. Вместо обещаний посетитель видит реальные объекты с ценами и сроками. Как искали отличия компании от конкурентов и что легло в основу прототипа — в полном разборе кейса. Другие примеры дизайна лендинга — в разделе кейсов.
Что вы получаете на выходе
После этапа дизайна у вас на руках:
- макеты всех экранов в Figma — десктопная версия по утверждённому прототипу;
- адаптивные версии — отдельные макеты для мобильных и планшета, с пересмотренным порядком блоков там, где это нужно;
- UI-кит — палитра, шрифтовые стили, состояния кнопок и полей форм, собранные в компоненты;
- исходники графики — иконки, схемы, инфографика в редактируемом виде, а не только «запечённые» в макет;
- права на использование — макеты и графика принадлежат вам, доступ к исходникам передаём вместе с проектом;
- материалы для вёрстки — размеры, отступы и состояния элементов, по которым верстальщик собирает страницу без угадывания по картинке.
Частые вопросы
Сколько стоит дизайн лендинга?
Отдельной цены «за дизайн» у нас нет: он входит в работу над сайтом целиком — от распаковки до запуска. Сумма зависит от количества экранов, объёма индивидуальной графики и числа адаптивных версий. В базовом тарифе дизайн собираем на готовых блоках конструктора, индивидуальный макет — в расширенном. Тарифы и расчёт под вашу задачу — на странице продающего сайта.
Сколько времени занимает разработка дизайна лендинга?
Срок зависит от количества экранов и объёма графики — точную оценку даём после разбора задачи. Для ориентира: весь сайт от распаковки до запуска мы делаем от 20 дней. Чаще всего сроки сдвигает не работа студии, а долгое согласование правок на стороне клиента.
Можно ли заказать только дизайн лендинга, без прототипа?
Технически можно, но по умолчанию мы так не работаем. Без прототипа дизайнер придумывает структуру, тексты и визуал одновременно — и правок становится больше: вместо «поправить цвет кнопки» приходится переделывать блоки целиком, потому что поменялась логика подачи. Прототип дешевле и правится быстрее готового макета, поэтому сначала закрываем его, а потом берёмся за визуал.
В чём делаете макеты и отдаёте ли исходники?
Макеты — в Figma, передаём их вместе с исходниками графики: иконками, схемами, инфографикой в редактируемом виде. Права на использование материалов остаются у вас.
Сколько итераций правок включено в дизайн лендинга?
Количество фиксируем в договоре на старте. Мелкие правки в рамках согласованных структуры и текстов вносим по ходу работы. Изменение самой структуры на этапе дизайна — это возврат к прототипу, а не правка визуала.
Нужен ли отдельный дизайн лендинга, если сайт будет на Tilda или 1С-Битрикс?
Платформа — это инструмент вёрстки и администрирования, а не источник дизайна. И на Tilda, и на 1С-Битрикс страницу можно собрать по индивидуальному макету: дизайн разрабатываем до вёрстки, а не выбираем готовый шаблон платформы. Исключение — базовый тариф, где сайт сознательно собираем на готовых блоках конструктора, чтобы быстрее и дешевле запуститься.
Хотите узнать, что мешает вашему лендингу конвертировать — заполните форму ниже, разберём бесплатно. Начать методологию с начала — распаковка бизнеса, ЦА и конкурентов, все три этапа и расчёт стоимости — на странице «Продающий сайт».