Как сделать лендинг в Figma: руководство для начинающих дизайнеров

Что такое лендинг и зачем он нужен

Лендинг — одностраничный сайт, который рассказывает о событии, преимуществах продукта или услуги, привлекает внимание к специальным предложениям. В таких сайтах делают сильный упор на конверсию: важно, чтобы пользователь совершил целевое действие. Чем больше людей позвонили, заказали услугу, зарегистрировались, тем лучше.

Лендинги создают, когда нужно:

• анонсировать или продать билеты на событие: конференцию, вебинар или концерт;
• презентовать новый продукт или курс;
• рассказать о рекламных акциях и спецпредложениях;
• сделать «визитку» для бизнеса или портфолио эксперта.

Почему Figma — лучший инструмент для создания лендингов

Figma — самый популярный инструмент для создания дизайна сайтов. Даже на бесплатном тарифе можно сделать полноценный дизайн-макет сайта, а базовые функции программы осваиваются за пару недель.

Чтобы с макетом было комфортно работать, в Figma используют сетки, стили текста и цвета, компоненты и плагины.

В Figma удобно работать в команде: менеджеры, разработчики, клиенты и другие дизайнеры могут оставлять комментарии прямо в макете. Это помогает обсуждать правки конкретных частей дизайна и избегать недопонимания. История правок сохраняется, а изменения видны в реальном времени. Так можно быстро вернуться к предыдущим версиям и контролировать процесс работы.

Когда нужно показать клиенту или разработчику логику работы сайта или путь пользователя, дизайнер настраивает в Figma прототип и микроанимации. 

Еще Figma помогает легко передать дизайн в разработку: для верстальщиков есть специальный режим DevMode, где собраны необходимые инструменты и плагины. В этом режиме разработчик сразу видит отступы, цвета, стили текста и даже подсказки с частями кода. 

Читайте также:

Гайд по работе с иконками в Figma

Подготовка к созданию лендинга

Перед тем как работать с визуальной частью макета, дизайнеру важно разобраться, зачем нужна страница, для кого ее создают и какое целевое действие пользователя будет главным.

Определение целей и задач сайта

Работа над сайтом начинается с вопросов: какую задачу он будет решать, чем будет полезен пользователю и как поможет бизнесу увеличить показатели. Четкая цель помогает понять, что показать на странице и к какому действию вести пользователя.

Определение и анализ целевой аудитории

Лендинг создают для конкретной аудитории: то, что заинтересует и привлечет художников, вряд ли подойдет директорам фабрик. Дизайнеру важно понять, какие люди будут пользоваться сайтом, что для них важно, какие у них проблемы и как сайт поможет эти проблемы решить.

Целевая аудитория напрямую влияет на формат и структуру сайта, выбор стиля, типографики и подход к тексту: тон общения и стиль подачи.

Анализ конкурентов

Анализ конкурентов помогает понять, какие решения уже проверены рынком, как выделиться среди похожих предложений и как сделать дизайн понятнее и привлекательнее для пользователей.

Дизайнеры смотрят, как конкуренты подают информацию, какие блоки используют, как оформляют заголовки и как делают акценты на преимуществах. Еще важно отмечать сильные и слабые стороны их страниц: что удобно, что вызывает вопросы, где можно сделать проще.

Составление структуры страницы

С помощью структуры дизайнер определяет, какие блоки в каком порядке расположить и какую информацию они будут нести. При составлении структуры полезно заранее нарисовать схематичный макет на бумаге или в Figma: так будет наглядно видно, как пользователь будет двигаться по странице. 

Ниже рассказываем об основных блоках лендингов.

Заголовок и ключевое сообщение

Заголовок — первое, что видит пользователь, поэтому он должен сразу объяснять суть продукта или услуги. Он отвечает на вопрос: «Что здесь предлагают и зачем мне это нужно?»

Ключевое сообщение показывает главную выгоду предложения. Оно должно быть конкретным, коротким и ясным, чтобы пользователь сразу понял, что получит, если оставит заявку.

Вот несколько советов по созданию сильных заголовков:

1. Используйте простой язык и понятные формулировки.
2. Сразу обозначьте выгоду или решение проблемы.
3. Не перегружайте заголовок лишними деталями. 

Блок с преимуществами 

Блок объясняет, чем продукт лучше, чем будет полезен пользователю и как решит его проблему. Обычно показывают 3–4 основных преимущества, в которых коротко и конкретно описаны главные ценности предложения. Текст для наглядности и легкости восприятия подкрепляют иконками, иллюстрациями или цифрами.

Блок доверия и отзывы

Блок доверия подкрепляет уверенность пользователя в продукте или сервисе. Здесь размещают логотипы партнеров, сертификаты и награды, которые подтверждают опыт и надежность компании. Конкретные цифры с количеством клиентов, выполненных проектов или средними оценками пользователей повышают доверие.

Чтобы сделать впечатление еще убедительнее, добавляют живые подтверждения со стороны аудитории — отзывы, рекомендации, оценки. Настоящие отзывы с именем и ссылкой на источник выполняют роль социального доказательства и создают ощущение прозрачности.

Призыв к действию

Призыв к действию еще называют Call-to-Action или коротко — CTA. Это кнопка или форма, благодаря которой пользователь совершает целевое действие: оставляет заявку, покупает продукт, регистрируется. 

Текст кнопки пишут просто и однозначно, но при этом убедительно: «Заказать», «Получить курс», «Попробовать бесплатно». Кнопка и форма должны визуально выделяться с помощью цвета, размера и свободного пространства вокруг. 

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

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

Как сделать лендинг в Figma: пошаговое руководство 

Шаги, о которых писали ранее, — анализ ЦА и конкурентов, составление структуры страницы, работа с текстами — удобно выполнять прямо в Figma, где всё наглядно видно на одном экране. Чтобы понятнее организовать работу в Figma, дизайн-файл разделяют на страницы.

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

Референсы связывают со структурой: к каждому блоку, элементу или приему собирают по несколько примеров, а затем располагают рядом с варфреймом. Так их удобнее соотносить со своим проектом.

Фрейм — основа макета, где размещают весь контент. Обычно дизайн лендинга начинают с создания фрейма шириной 1440 px, а потом определяют контентную область. Это нужно, чтобы на узких экранах важная информация не обрезалась. В среднем контентная область равна 1280 px. Это значит, что контент будет занимать эту ширину, а по бокам макета будут отступы 80 px. 

Макет лендинга собирают по блокам: в них добавляют заголовки, карточки, кнопки и изображения. Сетку определяет контент. Сначала можно составить примерную композицию из элементов дизайна, определить их расположение, пропорции, свободное пространство вокруг — и только потом выровнять по сетке. 

Самая популярная сетка состоит из 12 колонок. Она делится на 2, 3, 4 и 6 частей, поэтому универсальна и помогает организовать контент любого объема и формата.

Такая сетка помогает гибко и разносторонне работать с композицией: размещать информацию асимметрично, работать с пропорциями и создавать нестандартные, выразительные, динамичные макеты.

Система отступов задает четкий ритм интерфейса. Дизайнеры используют шаг в 4 или 5 пикселей, чтобы расстояния между элементами были кратными этим числам. Так дизайнеру проще подбирать отступы, а в макете появляется порядок и логика.

Разработчику тоже гораздо комфортнее верстать такой макет, потому что работа получается предсказуемой и понятной. Чтобы измерить отступ до следующего элемента или границы фрейма, нужно выделить объект, зажать клавишу Alt или Option и навести мышкой на необходимую часть макета.

Чтобы упростить работу с типографикой, стоит выбрать одну универсальную гарнитуру, например Inter. Базовым размером текста обычно выбирают 16 px с межстрочным интервалом 120%. От этого значения можно построить систему типографики, увеличивая кегль в 1,5–2 раза для заголовков и подзаголовков. Обычно хватает 4–5 стилей, чтобы определить необходимые уровни иерархии текста на сайте. 

Системе типографики удобно задать стили текста — так дизайнеру будет проще и быстрее редактировать или применять параметры текста. Позже можно заменить Inter на другую гарнитуру и подобрать удачные шрифтовые сочетания.

Работу с цветом удобно начинать с монохромной палитры с одним основным цветом. Это помогает не отвлекаться и грамотно расставлять акценты. Когда акценты расставлены, дизайнер может подобрать нужную палитру или использовать цвета бренда, с которым работает. Если подобранную палитру добавить в стили Figma, это здорово поможет сократить время на работу с цветом и проектом в целом.

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

В прототипе настраивают работу кнопок, микроанимации и переходы. Он позволяет проверить и продемонстрировать логику взаимодействия пользователя с сайтом и то, как он будет перемещаться по странице.

Советы по дизайну лендинга

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

Воздух между элементами помогает глазу отдыхать и воспринимать информацию без перегрузки. Чем больше в макете свободного пространства, тем проще пользователю сосредоточиться на главном.

Анимация делает лендинг живым и приятным в использовании. Однако нужно использовать ее аккуратно, чтобы не отвлекать пользователя от важных деталей сайта.

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

Тестирование и доработка лендинга

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

Тестируемым предлагают простое задание — представить, что они хотят записаться на курс, и отметить, куда бы они кликнули. Если человек теряется или не понимает, что делать, макет требует доработки. Вопросы стоит задавать в открытой форме: например, «Что именно вызвало трудности?» или «Что понятно из заголовка?».

Даже простое тестирование помогает понять, что пользователь видит сразу, где возникают вопросы, а какие элементы работают не так, как задумано.

Передача макета в разработку

Аккуратно организованные макеты комфортно верстать, это правило хорошего тона в отношениях с коллегами. А если дизайнер собирает свои макеты на конструкторах сайтов или кодом, ему самому будет проще ориентироваться в проекте. 

Чтобы разработчик быстро и корректно сверстал лендинг, дизайнер подготавливает макет: группирует и понятно подписывает слои, оставляет комментарии, собирает UI-кит. 

Также дизайнер прорабатывает состояния кнопок, форм и кликабельных элементов. Ссылки на анимации и интерактив тоже оформляет так, чтобы у разработчика не оставалось вопросов. 

Чтобы сайт отображался и работал корректно на разных устройствах, дизайнер создает адаптивные макеты. Если этого не сделать, разработчик сверстает их по-своему, но результат может выйти не всегда удачным. 

Главное о дизайне лендингов в Figma

1. Лендинг — одностраничный сайт, главная задача которого — привести пользователя к целевому действию: регистрации, оформлению заявки или покупке. Его создают, когда нужно рассказать о рекламных акциях, анонсировать мероприятие, презентовать услуги бизнеса или продукт.
2. Figma — самый популярный инструмент для создания дизайна сайтов, где есть всё необходимое для комфортной и быстрой работы: сетки, стили, компоненты и плагины. Еще в Figma удобно работать в команде и передавать макеты в разработку. 
3. Дизайнер сначала определяет, зачем нужен лендинг, кто его целевая аудитория, как сайт поможет решить проблемы бизнеса и пользователя, и разбирает сильные и слабые стороны конкурентов.
4. Структура лендинга помогает выстроить контент так, чтобы пользователь быстро понял суть продукта и совершил нужное действие. В начале страницы размещают заголовок и ключевое сообщение — они сразу объясняют, что предлагает компания и какую выгоду получает пользователь. Блок с преимуществами показывает ценность продукта, а блок доверия и отзывы усиливают уверенность в предложении. 
5. Призыв к действию делают акцентным и заметным. Он помогает пользователю совершить целевое действие: оформить заявку, заказать или зарегистрироваться. Еще на странице размещают блоки с тарифами, FAQ, акциями и контактами.
6. В хорошем дизайне нет лишних деталей: используют только то, что поможет пользователю достичь цели. Важные блоки выделяют цветом и размером, между ними оставляют достаточно свободного пространства, чтобы облегчить восприятие. Анимацию используют умеренно, чтобы она дополняла опыт и не отвлекала от главного. Текст и дизайн работают вместе: простые формулировки и чистый визуал делают страницу понятной и вызывают доверие.
7. Чтобы протестировать лендинг в простых условиях, достаточно показать его нескольким людям и посмотреть, как они реагируют на несложные вопросы и задания. Это помогает определить, правильно ли расставлены акценты и как сделать опыт пользователей понятнее. 
8. Чтобы дизайн-макет быстро и корректно перевести в код, дизайнер подготавливает его для передачи в разработку: организовывает слои, оставляет комментарии, собирает UI-кит. Также дизайнер отрисовывает состояния кликабельных элементов и создает адаптивные макеты, чтобы сайт правильно работал и отображался на разных устройствах.
9. Работу над лендингом удобно вести в Figma: в одном файле можно анализировать аудиторию, продумывать структуру и работать над дизайном. Чтобы получился сильный дизайн, собирают референсы — они помогают определиться с любыми составляющими дизайна: композицией, цветом, типографикой, анимацией. 
10. Макет строят на основе фрейма шириной 1440 px с контентной областью 1280 px, чтобы на разных экранах всё отображалось корректно. Сетка и система отступов с шагом 4–5 px поддерживают порядок и ритм макета. Для типографики и цвета добавляют стили, а для повторяющихся элементов — компоненты. В прототипе настраивают анимации и переходы, чтобы проверить логику взаимодействия пользователя с сайтом.