Видео этого урока скоро появится
Конспект урока доступен ниже
Структура сайта: секции, которые продают
Спроектируешь скелет лендинга: оффер, выгоды, отзывы, ответы на частые вопросы и призыв к действию. Научишься править отдельные секции точечными промптами, не ломая остальную страницу, и поймёшь, в каком порядке посетитель читает сайт.
Конспект урока
- 1
Сначала скелет, потом красота
Попроси Lovable вывести список секций и их порядок текстом и утверди его до вёрстки. Переставлять пункты в списке дешевле, чем перекраивать готовую страницу.
- 2
Порядок, в котором читают
Рабочая последовательность: оффер с конкретным результатом, доказательства, выгоды, отзывы, ответы на возражения, призыв к действию. Посетитель смотрит первый экран и сразу листает вниз до цены и кнопки.
- 3
Один промпт на одну секцию
Называй секцию явно: «в блоке отзывов сделай три карточки с фото и именем». Без адреса правки агент трогает соседние блоки.
- 4
Мелочи правим мышкой
Опечатку, размер шрифта или оттенок кнопки быстрее поменять в Visual Edits прямо на предпросмотре. Промпт тратится на логику, а не на запятые.
- 5
Призыв повторяется дважды
Кнопка нужна на первом экране и в конце страницы, обе ведут к одной и той же форме. Человек решается в разные моменты, и искать кнопку он не станет.
- 6
Проверка на телефоне
В мобильной ширине посмотри, не разъезжаются ли заголовки, хватает ли кнопке размера под палец и не прячется ли важное под тремя экранами прокрутки.
Практика
Разложи свой лендинг на шесть секций в правильном порядке и перепиши первый экран так, чтобы в заголовке стоял конкретный результат для клиента, а не название компании.
Сделал? Отметь урок пройденным и переходи дальше