Веб-дизайн для початківців: як спроєктувати перший лендинг

Крок 1

Структура: одна мета й порядок блоків

Лендинг — це сторінка з однією метою: записатися, купити, залишити заявку. Перш ніж відкривати Figma, сформулюйте мету одним реченням і випишіть блоки текстом у тому порядку, у якому людина має їх прочитати. Типова структура:

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

💡 Люди сканують сторінку, а не читають її повністю. Заголовки й перші слова абзаців мають передавати суть навіть тоді, коли решту пропустили.

Крок 2

Сітка й відступи

Колонкова сітка — каркас сторінки. На десктопі колонок більше, на телефоні менше; оберіть таку кількість, яку зручно ділити на половини й третини. Задайте сітку у Figma на фреймі, обмежте ширину контенту, щоб текст не розтягувався на весь великий монітор, і тримайтеся однієї системи відступів: усередині блоку менші, між блоками — більші.

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

Крок 3

Типографіка й колір

Для лендингу достатньо одного-двох шрифтів із кирилицею і трьох-чотирьох рівнів тексту: великий заголовок, заголовки блоків, основний текст, підписи. Основний текст на сайті не робіть дрібним, а рядок — надто довгим: web.dev нагадує, що за класичною теорією читабельності оптимальна колонка вміщує 70–80 знаків. Кольори — основний, акцентний для кнопок і нейтральні; контраст звичайного тексту з фоном має бути щонайменше 4.5:1 за стандартом WCAG.

💡 Акцентний колір бережіть для головної дії. Якщо кожна друга деталь яскрава, кнопка «Записатися» губиться.

Крок 4

Адаптивність: спочатку телефон

Сайт відкривають на дуже різних екранах, тому макет має перебудовуватися, а не просто зменшуватися. Почніть з вузького фрейму, а потім розширюйте його, доки дизайн не почне «ламатися»: саме там і потрібна точка перелому. Web.dev радить обирати такі точки за вмістом, а не під конкретні моделі пристроїв.

• •колонки на телефоні стають одна під одною, порядок блоків зберігається;
• •кнопки й посилання мають бути зручні для пальця: WCAG 2.2 задає мінімальний розмір цілі 24 на 24 CSS-пікселі, а для головних кнопок краще більше;
• •довгі заголовки, кнопки з довгим текстом і таблиці перевіряйте на найвужчому екрані;
• •у Figma автолейаут і обмеження (constraints) допомагають побачити, як блок поводиться при зміні ширини.

Крок 5

Прототип, передача й публікація

З'єднайте кнопки й якорі у клікабельний прототип і дайте його двом-трьом людям із задачею: «знайдіть ціну і запишіться». Де вони вагаються — там і правки. Далі два шляхи. Передати розробнику: акуратні назви шарів, компоненти, описані стани кнопок і полів, макети для телефона й десктопа; у Figma для цього є Dev Mode, де розробник бачить розміри, відступи й стилі. Опублікувати самостійно: no-code конструктори на зразок Framer, Webflow чи Tilda дають зібрати й викласти сайт без програмування.

💡 Опублікований лендинг за посиланням — сильніший аргумент у портфоліо, ніж картинка. Для натхнення подивіться AI-челендж зі створення лендингу у нашій спільноті.