Статьи
5 мин на чтение
383

Как сделать идеальный дизайн лендинга

Улучшенный UX на целевой странице

Лендинг не похож на другие страницы сайта. Его цель не в том, чтобы побудить пользователей изучать новый контент и вовлекать их. Задача в том, чтобы обратиться к определённой группе пользователей с конкретным продуктом и превратить их в покупателей. Поэтому дизайн и макет вашего лендинга должны это отражать.

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

Блок «Первый экран»
Блоки «Характеристики»
Блок «Призыв к действию»

Блок «Первый экран»

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

Логотип
Заголовок
Описание
Призыв к действию
Изображение

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

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

Выравнивание по левому краю VS по центру

Самый распространённый вариант — макет с выравниванием по левому краю. Текстовые элементы располагаются слева, а изображение — справа. Главное преимущество такого макета в том, что он привлекает больше внимания к тексту, чем к изображению. А недостаток — ограниченное пространство, поэтому вы не сможете использовать текст или изображения на всю ширину страницы.

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

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

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

Блоки «Характеристики»

После первого экрана идут блоки с характеристиками. Они содержат соответствующие иконки и подробную информацию о характеристиках продукта в форме сетки или списка. Цель состоит в том, чтобы объединить различный дизайн блоков с характеристиками и создать разнообразный стиль на странице, который будет удерживать внимание пользователей.

Выравнивание по центру VS по левому краю

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

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

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

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

3 VS 2 колонки

Вы также можете использовать трёхколоночный макет. В таком макете акцент делается на трёх ключевых характеристиках. Иконки хорошо выделяются на фоне. Ниже вы также можете добавить изображение.

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

Другой вариант дизайна — двухколоночный список характеристик. Здесь нет возможности добавить изображение, потому что этот макет предназначен для перечисления всех характеристик с наиболее низким приоритетом. Этот блок идёт последним, потому что в нём больше всего текста и он наименее привлекательный.

Блок «Призыв к действию»

В самом конце лендинга находится блок «Призыв к действию». Он содержит заголовок, описание и кнопку. Его цель — ещё раз подчеркнуть ценность продукта и превратить пользователя в покупателя.

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

Анатомия лендинга

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

Перевод статьи How to Design the Best Layout for a Landing Page из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!