Предыдущий перевод (Landing page, которая работает), посвященный дизайну качественных посадочных страниц набрал больше 150 000 просмотров. С тех пор прошло уже много времени и подход к дизайну изменился – все больше становится минималистичных страниц, о которых и пойдет речь в статье.

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

Бессмысленные фото из фотостоков, отталкивающие текстуры в фоне, извилистая навигация, социальные кнопки, виджеты блог постов и другие “навороты” отвлекают пользователей от целей, которые были заложены в дизайне.

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

И хотя мы делаем сайты, которые визуально проще чем их предшественники, они добиваются куда больших результатов.

Несколько примеров минималистичных LP


Чтобы удостовериться, что мы понимаем одно и тоже давайте взглянем на примеры минималистичных посадочных страниц (далее – LP):


Mailbox


TinyLetter


Dropbox


IFTTT

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

Но сложность LP никак не связана со сложностью приложения.

Давайте изучим несколько замечательных примеров минималистичных LP и выведем подходы к дизайну, советы и идеи.

Минималистичные LP: Большая идея


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

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

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

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

Примеры LP: Dropbox

LP Dropbox главный пример хорошего минималистичного дизайна, который направлен на то, чтобы пользователь легко заметил единственный призыв к действию – зарегистрироваться.



Единственный элемент, на котором сделан акцент – это кнопка “Зарегистрироваться”.

Да, на LP Dropbox есть и второстепенные действия – скачивание десктопного приложения, авторизация или тур по сайту. Но дизайн не делает на них акцент и не мешает новым пользователям выполнять главное действие – регистрироваться.

Все несущественные элементы либо убраны из дизайна, либо никак не акцентируются:
  • Название сайта (Dropbox) не присутствует на LP; оказалось, что даже название приложения несущественный элемент
  • Чтобы объяснить как работает Dropbox используется простой рисунок, который так же служит для привлечения внимания к кнопке регистрации
  • Слоган «Your stuff, anywhere» очень короткий и простой

Dropbox сделали уверенный выбор действия, которое должен совершить пользователь и дизайн LP подчеркивает это действие.

Примеры LP: Mailbox

Mailbox это приложение, которое помогает пользователям эффективно работать с почтой на смартфонах. Его LP еще один хороший пример минималистичного дизайна.

Главное действие – переход на страницу приложение в App Store.



Справа от призыва к действию располагается кликабельный скриншот реального приложения, который объясняет суть Mailbox.

В меню сайта есть и альтернативные действия, но визуально они никак не выделяются.

Примеры LP: Karma

Karma это еще один отличный пример красивого минималистичного дизайна LP.

Главное действие на этой странице – клик по кнопке “Купить сейчас”, которая дублируется в шапке страницы и в центре. Цвет, стиль и текст обеих кнопок совпадает, чтобы создать связь между ними.



Альтернативное действие, которое может совершить пользователь – кликнуть на кнопку “Подробнее” (Learn more). Но эта кнопка прозрачная и имеет меньший визуальный вес, чтобы не отвлекать от главной кнопки “Купить сейчас” (Buy now).

Короткое описание сверху кнопок заключает в себе уникальное ценностное предложение: общественная раздача WiFi.

В данном примере фоновая фотография имеет большое значение – она показывает как выглядит продукт и дает наглядное представление о размере устройства (рука, держащая устройство, является своего рода подсказкой).

Основные компоненты минималистичной LP


Должно быть Вы уже заметили 3 повторяющихся элемента дизайна минималистичных LP:
  1. Главное действие
  2. Объяснение, что представляет собой продукт/сервис
  3. Альтернативные действия

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

Советы по дизайну минималистичных LP


В этом разделе мы рассмотрим некоторые советы и идеи, в основе которых лежат ключевые компоненты LP, описанные выше

Фокус на создание хорошей визуальной иерархии

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

Визуальная иерархия – это продуманное расположение элементов дизайна, при которой соблюдается порядок просмотра элементов (т.е. пользователи сначала обращают внимание на самые важные элементы).

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



В приведенном примере обратите внимание, как размер, расположение, контраст, визуальная сложность и пустое пространство используются для формирования визуальной иерархии.

Примеры LP: Numbrs

На примере минималистичного дизайна Numbrs можно разобрать принципы визуальной иерархии.

Описание приложение (1) и кнопка призыва к действию (2) это два наиболее выделяющихся элемента на странице.



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

Как видно, название продукта (4) и альтернативные действия (5) гораздо ниже в визуальной иерархии.

Примеры LP: Wander

Другой пример хорошей визуальной иерархии можно увидеть на LP Wander.

Зайдя на страницу, Вы увидите всего 4 элемента.



Самым главным элементом иерархии является надпись, которая объясняет, что проекту нужны новые пользователи (1). Под надписью находится кнопка-призыв к дейтсвию, предлагающая пользователям залогиниться (2).

Значительно ниже в визуальной иерархии находятся альтернативные действия – например, кнопка “Мне нравится” на Facebook, которая так же отображает текущее количество лайков, убеждая пользователей совершить главное действие (зарегистрироваться).

Самый нижний элемент в иерархии – просмотры социальных профилей проекта.

Создание визуальной иерархии в Вашем дизайне


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

Убедитесь, что главное действие это наиболее видный элемент


Сначала нужно определиться с тем, какое действие должны совершать пользователи. Клик по определенной кнопке? Лайк страницы в Facebook? Заполнить форму?

Выберите единственное главное действие и сосредоточьтесь только на нем, дизайн страницы должен акцентировать внимание только на этом действии.

Примеры LP: enthuse.me

Хороший пример странички, где главное действие ярко выделено – LP enthuse.me:



Примеры LP: IFTTT

Заметьте, как бросается в глаза призыв к действию на LP IFTTT:



Используйте цвета и типографику стратегически


Веб-дизайнеры, создающие минималистичные LP имеют ограниченный инструментарий – цвет и типографика самые главные в нем.

Примеры LP: Basecamp

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



Зеленый цвет используется для главного призыва к действию. Синий используется для второстепенных призывов к действию (авторизация или просмотр 25 причин, по которым стоит использовать сервис).

Размеры шрифта и вариации в цветах элементов правильно распределяют внимание между элементами LP.

Примеры LP: Path

Следующий пример – LP Path, где цвет и отличные шрифты используются для создания правильной визуальной иерархии.

Примечательный зеленый цвет используется для главного действия (заполнение формы):



Разница в размере шрифта, цвете текста и расположении правильно разбивает LP на разные области внимания.

Используйте как можно меньше текста


Сейчас известно, что пользователи редко читают текст на страницах. Логично предположить, что на LP продукта, ��оторый пользователь видит в первый раз, его терпение еще меньше.

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

Примеры LP: Contently

Описать суть Contently можно в трех словах – “Рассказывайте хорошие истории” (Tell Great Stories). Сразу становится очевидно, что это сервис, суть которого направлена на контент. Количество текста на странице сведено к минимуму, уменьшая вероятность того, что пользователь собьется с пути к совершению действия.



Примеры LP: Shipment

Хорошим примером коротких текстов на LP является Shipment. Всего 5 слов – ”Делитесь и рецензируйте Ваш дизайн” (Share and review your design) – нужно пользователю, чтобы полностью понять, чем Shipment может быть полезным.



Объясняйте суть продукта/сервиса быстро


Существует много способов демонстрации, как работает продукт/сервис. Единственное правило тут – простота.

Пример видео объяснения: Couple

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

Видео постепенно появляется при клике на иконку в центре экрана:



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



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

Пример интерактивного описания: Apple Mac Pro

Минималистичная LP Apple Mac Pro демонстрирует еще один популярный подкод к описанию продукта – интерактивный тур.



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

Пример описания с помощью статичного фото: Wallmob

Фото с большим разрешением на LP Wallmob это образец использования фото для передачи какого-то сообщения.



Оно наглядно демонстрирует, что такое Wallmob – кассовое приложение для мобильного устройства.

Сложная простота


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

Убирая лишние элементы, Вы получаете возможность направить Ваш дизайн (а также внимание пользователей) только на те элементы, которые реально важны.