Дизайн лендинга: одна страница ради одного действия
Из девяти форматов дизайна этот — единственный, где страница подчинена одному действию целиком. Блок, который не ведёт к кнопке, здесь не украшают, а вычёркивают, и спор об этом идёт на прототипе, пока он стоит часы. Второе отличие важнее первого: на лендинге считаются не экраны, а варианты первого экрана — по одному на каждое обещание, с которым к вам приходят. Набор компонентов на одной странице не окупается, и мы его не навязываем: за системой экранов — на соседнюю страницу
- Одно действие на странице: всё остальное либо ведёт к нему, либо уходит из макета
- Мобильный макет рисуется первым — с телефона приходит большинство
- Вариантов первого экрана столько, сколько у вас групп объявлений
Справа — то, что чаще всего просят добавить «чтобы страница не выглядела пустой». На лендинге такие блоки не делают его солиднее: они отодвигают кнопку вниз и добавляют человеку поводов уйти, не дойдя до неё.
Путь до кнопки — и что на нём рисуется
Лендинг устроен проще сайта ровно в одном смысле: у человека здесь нет выбора, куда пойти. Зато у него есть пять мест, где можно выйти, и на каждом решает не красота, а то, получил ли он ответ. Поэтому макет рисуется по шагам этого пути, а не по списку «какие блоки бывают на лендингах».
-
Видит объявление или ссылку
До страницы он ещё не дошёл, но обещание уже получил — в объявлении, в посте, в сообщении от знакомого. Это обещание и есть техническое задание на первый экран: не мы придумываем, что там написать, а оно.
Что рисуем: столько вариантов первого экрана, сколько разных обещаний вы даёте
до страницы -
Открывает первый экран
На телефоне это полоска высотой в ладонь. В неё должны поместиться предмет, кому это и первое действие. Всё, что в неё не поместилось, человек увидит только если решит листать, — а решает он это за пару секунд.
Что рисуем: мобильный экран первым, десктоп достраивается из него
секунды -
Ищет то, чего не хватает для решения
Обычно это цена или её порядок, срок, условия и подтверждение, что так уже делали. Порядок блоков здесь важнее их оформления: блок с ценой, стоящий после блока «о компании», читают заметно реже — до него просто не доходят.
Что рисуем: порядок блоков на прототипе, до первой картинки
минуты -
Доходит до формы
Здесь решает не дизайн кнопки, а то, сколько человек отдаёт и что получает взамен. Поля, которые нужны отделу продаж, и поля, которые нужны человеку, — разные списки, и это место, где их приходится мирить.
Что рисуем: форму во всех состояниях: пусто, ошибка, отправка, успех
от полуминуты -
Видит, что произошло после отправки
Шаг, который на лендингах чаще всего не нарисован вовсе: вёрстка показывает серую надпись «спасибо», и человек остаётся без ответа на вопрос «что дальше». Между тем это единственный экран, который видят все, кто до вас дошёл.
Что рисуем: экран после отправки: когда ответим, что подготовить, куда написать, если срочно
после заявки
Шаги с первого по третий — это спор о структуре, а не о картинке. Поэтому они целиком укладываются в прототип: переставить блок там стоит разговора, а в готовом макете — перерисовки соседних. На разборе мы проходим этот путь вместе и вслух, и довольно часто на третьем шаге выясняется, что чинить надо текст, а не дизайн.
Три ошибки первого экрана, которые видно без данных
Все три встречаются в макетах, за которые уже заплачено, и все три обнаруживаются до всякой статистики — на своём же телефоне за пять минут. Мы разбираем их первыми, потому что чинятся они текстом и порядком блоков, а не новым дизайном.
-
Заголовок про компанию, а не про предложение
«Надёжный партнёр с индивидуальным подходом» — фраза, которую конкурент может поставить себе без единой правки. Человек пришёл с задачей, а ему рассказывают про того, кто её решает. На первом экране это стоит дороже всего: дальше просто не листают
Ставим в заголовок предмет и результат, а название компании — туда, где оно и нужно: в шапку. Проверка простая — закройте логотип и спросите, понятно ли, что здесь продают
-
Кнопка ниже сгиба на телефоне
Макет рисовали на широком экране, и там всё помещалось. На телефоне заголовок занял четыре строки вместо двух, подзаголовок — ещё три, и кнопка уехала за край. Человек видит текст без единого действия и уходит листать дальше — или не листать
Рисуем мобильный макет первым и проверяем его на телефоне в руке, а не в уменьшенном окне браузера. Это разные вещи: в окне нет ни клавиатуры, ни панели браузера, ни пальца, закрывающего треть экрана
-
Обещание из объявления не повторено на странице
В объявлении сказано «ремонт холодильников на дому за день», на странице — «бытовая техника: продажа, монтаж, обслуживание». Формально всё честно, а человек не узнаёт то, ради чего нажал, и возвращается в выдачу. В отчётах такое читается как плохое качество трафика, хотя пришли ровно те люди
Берём обещания из ваших объявлений и делаем столько вариантов первого экрана, сколько их есть. Остальная страница остаётся общей — меняется верх, а не макет целиком
Четвёртой ошибки в этом списке нет намеренно. «Мало анимации», «несовременно», «не хватает воздуха» — это оценки, а не находки: их нельзя ни проверить, ни опровергнуть, и работать по ним мы не беремся. Всё, что здесь названо, проверяется вами самостоятельно и до разговора с нами.
Проверьте свой лендинг сами — семь проверок с телефона
Делать их нужно с личного телефона, по мобильному интернету и не с той страницы, которую вы открывали вчера: она загрузится из памяти и будет быстрее, чем есть. Ничего никуда не отправляется, отметки остаются в этом браузере.
Вердикт появится после первой отметки. Считается он от числа непройденных строк: семь проверок не описывают лендинг целиком, зато любая непройденная стоит разговора до сметы.
Сходится 0 из 7
Проверка ручная, и автоматической её не сделать: ни один скрипт не скажет, узнал ли человек в заголовке своё обещание. Зато после этих семи пунктов вы будете знать, о чём спрашивать любого подрядчика, — включая нас.
Начните с разбора первого экрана
Полчаса, бесплатно и без доступов: нужен только адрес страницы и ссылка на объявление, по которому на неё идут. Результат остаётся у вас, даже если работать вместе мы не станем.
Открываем ваше объявление и вашу страницу рядом и читаем их подряд, как читает человек. Это самая частая находка и самая дешёвая: она чинится текстом, без единой правки в макете.
На живом устройстве, а не в уменьшенном окне. Где оказалась кнопка, что перекрыла клавиатура, сколько строк занял заголовок и виден ли хоть один довод до первой прокрутки.
Если находки чинятся текстом и порядком блоков, мы так и скажем — и назовём, что переписать. Продавать макет там, где хватает вечера работы, невыгодно нам самим: следующий разговор будет коротким.
Разбор ведёт основатель, не менеджерПолчаса голосом или перепиской — как вам удобнее. Никакой презентации студии: смотрим вашу страницу и ваше объявление.
Написать в TelegramКому одна страница, а кому — нет
Лендинг выигрывает там, где решение принимается за один заход и на один вопрос. Как только вопросов становится несколько и они разные, одна страница начинает мешать: она заставляет читать чужое, чтобы добраться до своего.
- Есть одно предложение и одно действие, которого вы ждёте: заявка, звонок, запись
- На страницу идёт реклама, и обещание в объявлении известно заранее
- Решение принимается за один заход: человеку не нужно советоваться и изучать неделю
- Верстать есть кому — свой разработчик, ваш подрядчик или конструктор, в котором работают ваши люди
- Услуг несколько и цены у них разные. На одной странице они конкурируют друг с другом, и выигрывает самая дешёвая — это система экранов
- Есть каталог и выбор по характеристикам. Тогда предмет работы — состояния карточки и каталога, это соседний формат
- Сделка длинная, и человеку нужно изучать вас неделями: документы, расчёты, отраслевые примеры. Одной страницы для этого мало
Правая колонка написана всерьёз. Нарисовать лендинг на любую из этих задач мы можем, и он будет красивым, — но работать будет хуже, чем честный многостраничник, и через полгода вы вернётесь за вторым макетом. Лучше сказать это до счёта.
Почему первый экран рисуется под объявление, а не под вкус
Это единственное место, где дизайн лендинга отличается от дизайна любой другой страницы механически, а не на словах. Человек приходит сюда не просто так: у него в голове уже есть фраза, за которую он нажал.
Три звена, и разрыв в любом из них стоит одинаково дорого.
- объявление обещает конкретное «Ремонт холодильников на дому», «Бухгалтерия для ИП на УСН», «Тур в Дагестан на майские». Это обещание сформулировали не вы на макете — его сформулировал тот, кто настраивал рекламу, и человек нажал именно на него
- заголовок повторяет его словами человека Не синонимом и не «шире, чтобы охватить всех». Буквально теми же словами: человек сверяет не смысл, а совпадение, и делает это раньше, чем начинает читать. Отсюда и число вариантов первого экрана — оно равно числу разных обещаний, а не числу страниц
- кнопка просит ровно то же Обещали расчёт — кнопка про расчёт, а не «оставить заявку». Разрыв здесь работает как мелкий обман: человек видит, что его привели не туда, куда звали, и закрывает страницу, даже если предложение ему подходит
Проверить это можно без нас и без данных: откройте объявление и страницу в соседних вкладках и прочитайте подряд. Если между ними приходится делать мысленный шаг, его придётся делать и покупателю. А ещё отсюда следует неочевидное: при новой кампании меняется верх страницы, а не макет целиком. Поэтому варианты первого экрана входят в ту же работу и не считаются новым проектом.
Сколько стоит: от 45 000 ₽, срок 2–3 недели
Своей цены у формата нет и быть не может: первая смета направления — это и есть одна страница, сделанная как следует. Сумма подставлена сюда из того же канона, по которому считается родительская страница, поэтому две цифры на сайте разойтись не могут. Если экранов окажется больше одного, смета станет второй, и мы скажем об этом на разборе — все три ступени описаны на странице направления
- Прототип: структура, порядок блоков и логика формы — до первой картинки
- Тексты по вашей фактуре: реальные, а не «Заголовок в две строки»
- Дизайн всех блоков страницы, а не только первого экрана
- Мобильный макет отдельным файлом, нарисованный первым
- Состояния формы и экран после отправки — то, что обычно дорисовывают на вёрстке
- Передача разработчику: исходники, экспорт, описание поведения текстом рядом с макетом
- Вёрстка и публикация. Макет в браузере сам собой не соберётся — это разработка лендинга, и дизайн там внутри
- Съёмка, фотосессия и обработка фотографий: зависят от города, объёма и того, кто снимает, — называем после разбора
- Иллюстрации, трёхмерная графика и анимационные ролики — другая работа и другие исполнители
- Платные шрифты и стоковые изображения: это не наша работа, а покупка лицензии, и лицензия оформляется на вас
- Доработки после сдачи — по часам: 3 000 ₽ вне договора и 2 000 ₽ в абонементе
Варианты первого экрана отдельным проектом не считаются. Это та же страница с другим верхом, и рисуются они внутри той же работы — ровно столько, сколько у вас групп объявлений. Отдельной строкой их выставляют там, где считают экраны; мы считаем работу.
Три возражения, которые звучат почти всегда
Первое — про деньги, второе — про этапы, третье — про здравый смысл. Отвечаем на них так же, как ответили бы на разборе, и в одном случае соглашаемся с возражающим.
«Дизайн одной страницы стоит почти как весь лендинг под ключ»
Стоит, и цифры в прайсе действительно соседние: дизайн посадочной — от 45 000 ₽, лендинг под ключ в разработке — от 50 000 ₽. Только это не две цены за одно и то же, а две разные строки сметы. Лендинг под ключ за эти деньги собирается на готовом решении, настроенном под вас, и при условии, что тексты и фотографии ваши; рисованного с нуля дизайна там нет — он появляется во второй смете разработки. Здесь же вы покупаете сам рисунок: прототип, все блоки, отдельный мобильный макет, состояния и исходники, которые можно отдать любому верстальщику. Сравнивать надо строку со строкой, а не цифру с цифрой; на странице направления это разобрано таблицей
«Прототип на одну страницу — лишний этап, давайте сразу макет»
Понятное желание: прототип выглядит как черновик, за который платят как за работу. Но спор о том, что показывать раньше — цену или отзывы, — случится в любом случае. Вопрос только в том, где: на прототипе он стоит разговора, в готовом макете — перерисовки соседних блоков, потому что у каждого из них уже есть размер, цвет и место. Мы не продаём прототип отдельно и не берём за него отдельных денег: он внутри первой сметы. Если структура у вас уже есть — своя схема, старый лендинг, который переносите, — этот этап становится короче, и мы скажем об этом до счёта.
«Возьмём готовый шаблон и поменяем тексты — выйдет дешевле»
Выйдет, и довольно часто это правильное решение — мы говорим так прямо, когда страница живёт ровно столько, сколько живёт гипотеза. Проверить спрос, собрать предзаказы, отработать один поток трафика на неделю — рисовать под это с нуля дорого и незачем. Шаблон перестаёт быть выгодным в двух случаях: когда обещаний несколько и верх страницы приходится менять под каждое, и когда шаблон диктует порядок блоков, а ваш путь к решению устроен иначе. Тогда экономия оборачивается тем, что страницу переделывают трижды — и суммарно дороже. Кейсов «до и после» мы к этому не прикладываем: дизайн отдельной услугой студия раньше не продавала, и выдуманного роста конверсии здесь не будет.
Эта страница — один из девяти форматов дизайна
Всё общее для дизайна вообще осталось на родительской странице и здесь не повторяется: три сметы направления, состав работ, гарантии, что остаётся у вас после сдачи и главный вопрос — брать дизайн отдельной строкой или сразу разработку. Если вы попали сюда из поиска и ещё не выбирали, начать стоит оттуда.
Там же лежит ответ на вопрос про исходники: файл в Figma передаётся вам с правами редактирования, а не картинками. Это общее правило студии, и повторять его на каждом формате незачем. Дизайн сайтов и интерфейсов
Когда дизайн лендинга вам не нужен
Четыре ситуации, в которых мы отговариваем. Три из них означают не «обойдитесь без макета», а «вам нужна другая работа» — и мы называем, какая именно, на разборе и до счёта.
-
Если собирать страницу некому
Файл в Figma не открывается в браузере. Чтобы макет заработал, его надо сверстать, посадить на движок, подключить форму, аналитику и домен. Без своего разработчика и без подрядчика отдельный дизайн окажется половиной пути, оплаченной целиком. Вам в разработку лендинга — дизайн там внутри, и отдельная смета на макет не понадобится.
-
Если страница живёт ровно столько, сколько живёт гипотеза
Проверить спрос на новую услугу, собрать предзаказы, отработать один поток трафика за неделю. Такие страницы переделываются без сожалений и умирают вместе с гипотезой — рисовать их с нуля дорого. Дешевле собрать на готовом решении, а рисованный макет заказывать тогда, когда станет понятно, что гипотеза жива.
-
Если нужен не макет, а поток заявок
Страница — только одна деталь воронки, и самая заметная из них. Если сейчас непонятно, откуда придут люди, сколько будет стоить обращение и что с ним делать дальше, новый макет этого не решит: он сделает красивым то место, до которого пока никто не доходит. Такой вопрос закрывает лидогенерация — там страница считается внутри работы, а не отдельно.
-
Если страница работает, но «надоела»
Самая дорогая гипотеза и заодно риск уронить то, что работало. Сначала замер: чаще теряет один экран и одна форма, а не вся страница. Что именно теряет, покажет аудит сайта — письменный, с записями и точкой отсчёта. Разбор при этом остаётся бесплатным, и довольно часто он заканчивается словами «почините вот это сами».
Во всех четырёх случаях мы называем, что делать вместоОтказ без продолжения — потерянное время обеих сторон. Отдельная страница собирает такие случаи по всем услугам студии.
Когда вам это не нужноКому в соседний формат, а не сюда
Форматы дизайна различаются не сложностью и не ценой, а предметом работы: что именно рисуется и от чего считается смета. Если ваш вопрос звучит не про одну страницу и одно действие, честнее сказать это здесь, чем в середине проекта.
Нижние границы всех направлений собраны на странице цен. Если не понимаете, какой формат ваш, это решается за полчаса: на разборе мы называем не сумму, а предмет работы — что именно будет нарисовано и кто это потом соберёт.
Дизайн лендинга: что стоит знать до заказа
Чем дизайн лендинга отличается от дизайна обычной страницы
Технически — ничем: те же сетки, та же типографика, та же работа с контрастом. Отличие в ограничении, которое лендинг накладывает на решения. У человека здесь нет меню, нет соседних разделов и нет способа уточнить что-то в другом месте: всё, что он узнает о вас, он узнает на этой странице и в этом порядке. Поэтому порядок блоков перестаёт быть вопросом вкуса и становится вопросом последовательности доводов.
Из этого следует практическое правило, по которому мы работаем: спор о структуре выносится в прототип и закрывается до первой картинки. Прототип выглядит скучно и именно поэтому полезен — на нём видно логику, а не оформление, и его можно показать сотрудникам и клиентам, не объясняя, что «цвета ещё поменяются». Правка на этом этапе стоит разговора, а в готовом макете — перерисовки соседних блоков.
Второе следствие — про длину. «Длинный лендинг» и «короткий лендинг» — не свойства жанра, а следствие того, сколько вопросов человек задаёт перед решением. Если их два, страница на четыре блока будет лучше страницы на двенадцать; если их десять, короткая страница просто отправит человека искать ответы у конкурента. Мы считаем блоки от списка вопросов, а не от привычной длины.
Почему мобильный макет рисуется первым
Потому что большинство людей приходит с телефона, а телефон — это одна колонка и высота в ладонь. Переход от широкого экрана к узкому не масштабирование, а пересборка: то, что стояло рядом и читалось вместе, встаёт друг под друга, и порядок чтения меняется. Если макет рисовали на широком экране, мобильная версия получается производной от чужих решений и почти всегда теряет главное — действие в первом экране.
Когда мобильный макет рисуется первым, ограничение работает в вашу пользу: в узкую колонку помещается только то, что заслужило место. Десктоп достраивается из него, и там место есть всегда. Проверяется результат на живом телефоне — с клавиатурой, с панелью браузера и с пальцем, который закрывает треть экрана. В уменьшенном окне браузера ничего этого нет, поэтому проверка там ничего не доказывает.
Отдельно про состояния формы. Пусто, ошибка, отправка, успех — четыре экрана, которые человек видит ровно в тот момент, когда решает, остаться или уйти. Их забывают чаще всего, и тогда их придумывает верстальщик, обычно серым текстом по центру. У нас они нарисованы и входят в первую смету.
Сколько вариантов первого экрана нужно и почему это не отдельный проект
Столько, сколько у вас разных обещаний. Если реклама ведёт на страницу по трём группам запросов и каждая обещает своё, человек должен увидеть сверху именно своё — иначе он не узнает то, за что нажал, и вернётся в выдачу. В отчётах это выглядит как плохой трафик, хотя трафик был ровно тот, который нужен.
Технически это не три страницы, а одна с тремя верхами: меняется заголовок, подзаголовок и иногда картинка, остальное остаётся общим. Поэтому варианты входят в ту же работу и не выставляются отдельной строкой. Считать их проектами выгодно тому, кто считает экраны; мы считаем работу, а работа здесь одна.
Если страниц действительно несколько и они разные по содержанию, это уже не лендинг, а система экранов — и считается она иначе, на соседней странице. Если же верстать макет некому, честный ответ — разработка лендинга: дизайн входит в неё, и отдельная смета не понадобится. Три сметы направления с составом каждой описаны на странице дизайна
Вопросы про дизайн лендинга
Шесть вопросов, которые задают именно про одну страницу. Общие — про договор, оплату и гарантии — собраны на отдельной странице, а про дизайн вообще написано на странице направления
Остался вопрос?
Написать в Telegram, отвечаем за 30 минутДизайн одной страницы — от 45 000 ₽, срок 2–3 недели. Это первая смета направления, и меняется она не от длины страницы, а от того, сколько у неё непохожих экранов: как только их становится больше одного — например, появляется отдельная страница для другой услуги, — считается уже вторая смета. Внутри одной страницы цена не растёт от числа блоков: восемь блоков или четырнадцать — это одна и та же работа, отличается только объём рисования. Варианты первого экрана под разные объявления тоже внутри.
Нет — в этом формате вы покупаете макет, а не работающую страницу. Мы передаём исходники, экспорт и описание поведения, отвечаем на вопросы вашего верстальщика до сдачи, но сами в браузере ничего не собираем. Если собирать некому, мы скажем об этом на разборе и отправим в разработку лендинга: там страница делается целиком, вместе с дизайном. До договора, а не после сдачи файла.
Столько, сколько у вас разных обещаний в рекламе. Это не щедрость, а устройство работы: верх страницы меняется, остальное остаётся общим, и рисование второго и третьего варианта занимает часы, а не дни. Мы спрашиваем про ваши группы объявлений на разборе — до сметы, чтобы потом не выяснилось, что «ещё надо под три кампании». Если групп станет больше уже после сдачи, доработка считается по часам: 3 000 ₽ вне договора и 2 000 ₽ в абонементе.
Вам, и это правило всей студии, а не условие формата. Файл в Figma передаётся на ваш аккаунт с правами редактирования и историей версий — не картинками и не PDF. Шрифтовые лицензии, если нужны платные шрифты, оформляются тоже на вас. Смысл простой: продолжить работу можно с любым другим дизайнером, не возвращаясь к нам. Рынок этим грешит — макет отдают экспортом, а исходник остаётся у студии, и каждая следующая правка снова идёт через неё.
Рисуем отдельным макетом и первым. На лендинге это важнее, чем где-либо: с телефона приходит большинство, а именно на телефоне кнопка чаще всего уезжает ниже экрана. Сжатый десктоп выглядит в презентации прилично и ломается на живом устройстве — с клавиатурой, с панелью браузера и с пальцем, закрывающим треть экрана. Проверяем мы тоже на телефоне в руке, а не в уменьшенном окне.
Такое случается в основном там, где структуру не обсуждали, — поэтому мы и утверждаем прототип до картинки: на нём видно, что и в каком порядке будет на странице, и спорить там дёшево. Дальше действует правило, которое мы говорим заранее: «мне не нравится зелёный» — не критерий, а «на этом экране человек должен понять цену, а её не видно» — критерий. Две итерации правок входят в первую смету, и этого хватает почти всегда. Если после них согласия нет, мы честно говорим об этом, а не рисуем четвёртый вариант за ваш счёт.
Пришлите страницу и объявление — скажем, что чинить
- Полчаса разговора: читаем ваше объявление и ваш первый экран подряд, как читает человек
- Скажем честно, хватит ли переписать заголовок или тут правда нужен новый макет
- Если возьмёмся — от 45 000 ₽, срок 2–3 недели, исходники в Figma ваши
Заявка принята
Посмотрим вашу страницу своими глазами и вернёмся в течение рабочего дня. Если срочно — напишите в Telegram.
Или напишите сразу:
Telegram · отвечаем лично за 30 минут