03

Фаза 2 · Сборка

Дизайн и конверсия

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

0 / 8пунктов этапа выполнено

01Зачем это нужно

70–80% трафика приходит с телефонов. Дизайн, который не ведёт к действию, — просто картинка. Конверсия растёт от ясного оффера, удобной формы и видимого доверия, а не от количества эффектов.

Задача этапа — спроектировать каждый экран так, чтобы у человека всегда был очевидный следующий шаг к контакту.

02Как сделать пошагово

1

Соберите первый экран

Оффер + выгода + кнопка действия — всё видно без скролла на телефоне.

2

Проектируйте mobile-first

Сначала узкий экран, потом десктоп. Проверяйте на реальном устройстве, не только в DevTools.

3

Сделайте форму-квиз

Несколько простых шагов вместо «простыни» полей — конверсия заметно выше. Каждое лишнее поле снижает её.

4

Дайте несколько каналов связи

Кликабельный телефон и форма — в первую очередь. Из мессенджеров — российские (MAX, VK Мессенджер); Telegram держите как дополнительный, не единственный (в РФ работает нестабильно). WhatsApp требует VPN — не основной. На мобильном — плавающий sticky-CTA.

5

Усильте доверие

Отзывы, цифры, фото «как это происходит», этапы работы. Честный дефицит («календарь заполняется») — если это правда.

6

Не ломайте клики декором

Анимации и частицы — строго pointer-events:none и в своих границах, с проверкой на слабых телефонах.

03Пример

Первый экран на мобильном

┌─────────────────────────┐
│ Логотип            ☰    │
│                         │
│ Научное шоу для         │  оффер с ключом
│ детских праздников      │
│ «вау» у детей,          │  выгода
│ спокойствие у вас       │
│                         │
│ [  Оставить заявку  ]   │  CTA ≥ 44px
│  ☎ позвонить · форма    │  доп. каналы
└─────────────────────────┘

Человек за две секунды понимает, что это, что он получит и что нажать. Всё остальное — ниже по скроллу.

04Грабли этого этапа

Осторожно Форма-«простыня». Длинная форма с кучей полей отпугивает — люди бросают её на половине. Дробите на шаги.
  • Декор поверх кнопок. Красивые частицы без pointer-events:none перехватывают тапы — кнопка «не нажимается».
  • Проверка только в DevTools. На реальном телефоне всё иначе: и скорость, и попадание пальцем.

05Инструменты

  • FigmaМакет экранов, прежде всего мобильных.
  • DevTools + реальный телефонПроверка вёрстки и хит-областей вживую.
  • Квиз-формаГотовый движок или простой самопис на несколько шагов.

ИИИИ на этом этапе

В Claude дизайне можно собрать рабочий прототип первого экрана и формы-квиза, перебрать несколько вариантов оффера и текста кнопок — и тут же увидеть их вживую, а не описывать словами. Это резко ускоряет поиск варианта, который реально конвертит.

✓Чек-лист этапа

Заложить в макет

  • Первый экран.Оффер + выгода + кнопка действия, видны без скролла на мобильном.
  • Мобильная версия — приоритет.70–80% трафика с телефонов. Проверять на реальном устройстве, не только в DevTools.
  • Многошаговая форма / квиз.Вместо «простыни» полей — выше конверсия.
  • Несколько каналов связи.Кликабельный телефон и форма — в первую очередь. Из мессенджеров — российские (MAX, VK Мессенджер); Telegram как дополнительный. WhatsApp в РФ — только через VPN, не делайте основным.
  • Плавающая панель / sticky-CTA.На мобильном связь всегда под рукой.
  • Элементы доверия.Отзывы, цифры, фото «как это происходит», поэтапность («от заявки до результата — 4 шага»).
  • Честный дедлайн/дефицит в оффере.«Календарь на месяц заполняется» — если это правда.
  • Декор не ломает клики.Частицы/анимации — только pointer-events:none и с проверкой на слабых телефонах.