Дизайн лендингу: як зробити перший екран, блоки й кнопку

Крок 1

Відвідувач, його питання й одна дія

Як побудувати сітку, адаптив і передати макет розробнику, ми розбирали в гайді Веб-дизайн для початківців. Тут — про інше: як зробити так, щоб сторінку зрозуміли і натиснули кнопку. Почніть з трьох рядків тексту, ще до Figma:

• •хто приходить: наприклад, людина, яка загуглила «курси кераміки у Львові для дорослих»;
• •з яким питанням: чи підійде мені, скільки коштує, коли, де, чи складно новачку;
• •одна дія: записатися на пробне заняття. Не «підписатися, подзвонити й завантажити каталог» одночасно.

💡 Для практики візьміть вигаданий, але реалістичний бриф: майстерня кераміки, курси англійської, сезонна подія у вашому місті. Чітко позначте в кейсі, що це навчальний проєкт.

Крок 2

Заголовок і перший екран

Людина вирішує, чи залишитися, дуже швидко. NN/g показує, що люди гортають сторінки, але на верхню частину, видиму без прокрутки, дивляться більше, ніж на нижню. Тому перший екран має відповісти на питання «чи я туди потрапив?». Якщо на сторінку ведуть з реклами, це важливо й для Google: у Google Ads одна зі складових показника якості — досвід на цільовій сторінці, тобто наскільки вона релевантна й корисна людям, які натиснули оголошення.

• •заголовок повторює суть запиту людини її ж словами: «Кераміка для дорослих у Львові: перше заняття без досвіду»;
• •підзаголовок — одне-два речення: для кого це і чим корисно;
• •головна кнопка з дієсловом, що описує результат: «Записатися на пробне заняття», а не «Детальніше»;
• •візуал показує сам продукт чи процес, а не абстрактну стокову картинку.

💡 Контраст кнопки й тексту з фоном перевірте за WCAG: щонайменше 4.5:1 для звичайного тексту. Акцентний колір бережіть для головної дії.

Крок 3

Блоки як відповіді на сумніви

Випишіть усі питання й сумніви, які можуть зупинити людину перед кнопкою, і впорядкуйте їх від найважливішого. Кожен сумнів — окремий блок. За дослідженням NN/g, люди сканують текст, тому заголовки блоків мають передавати суть: найважливіші слова — на початку, щоб навіть перші два слова давали зрозуміти, про що розділ. Типові сумніви й блоки:

• •«а що саме я отримаю?» — що відбувається на занятті, у курсі, у сервісі, крок за кроком;
• •«а чи впораюся?» — для кого це, що потрібно мати з собою, що буде, якщо не вийде;
• •«а скільки й коли?» — ціна, розклад, адреса чи формат. Якщо точну ціну показати не можна, поясніть, від чого вона залежить і як її дізнатися;
• •«а чи можна вам довіряти?» — відгуки, фото з занять, приклади робіт. Лише справжні: вигадані відгуки й цифри руйнують довіру і до сторінки, і до вас як дизайнера;
• •останні дрібні питання — у блоці FAQ, а внизу — повторна кнопка.

Крок 4

Кнопка і форма заявки

Найслабше місце багатьох лендингів — форма. NN/g зібрала перевірені рекомендації для вебформ, і на лендингу вони працюють так само:

• •коротко: лише ті поля, без яких заявку не обробити. Кожне зайве поле — ще одна причина передумати;
• •одна колонка, підпис безпосередньо над полем;
• •не замінюйте підписи текстом-підказкою всередині поля: NN/g пояснює, що він заважає перевірити й виправити введене;
• •поясніть формат заздалегідь, наприклад для телефону;
• •помилки — конкретні, біля поля, позначені не лише червоним кольором, а введені дані не стираються;
• •після надсилання — екран чи повідомлення: що буде далі і коли з людиною зв'яжуться.

💡 Кнопка, що повторюється внизу та після ключових блоків, має вести на ту саму дію з тим самим текстом. Різні формулювання змушують гадати, чи це одне й те саме.

Крок 5

Швидкість і перевірка на людях

Найкращий перший екран не допоможе, якщо сторінка довго відкривається. Google на web.dev радить, щоб найбільший елемент першого екрана (Largest Contentful Paint) з'являвся за 2,5 секунди або швидше. Для дизайнера це означає: важкі фото й відео на першому екрані — під питанням, а зображення мають бути стиснуті. Далі — перевірка зрозумілості:

• •покажіть людині перший екран на 5 секунд і заберіть: «Про що ця сторінка? Що тут можна зробити?»;
• •дайте задачу на всю сторінку: «Дізнайтеся ціну й запишіться» — і мовчки дивіться, де людина вагається;
• •перевірте сторінку на справжньому телефоні, а не лише у вікні браузера на моніторі;
• •змінюйте одне за раз і перевіряйте знову.

💡 Для натхнення подивіться AI-челендж зі створення лендингу в нашій спільноті. А свій перший екран покажіть там на фідбек: «що ви зрозуміли за 5 секунд?» — найкорисніше питання для лендингу.