+7 (499) 226-94-90

Ежедневно
с 10:00 до 20:00


me@ldmco.ru

Минимализм при создании landing page

Сложный путь к простоте 

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

К таким несущественным подробностям, например, относятся: 

  • изображения, лишенные смысла; 
  • переизбыток кнопок социального обмена; 
  • невнятные или усложненные системы навигации и др. 

Всё это отвлекает пользователей от главного содержания веб-страницы. 

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

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

Любопытно, что данные приложения отличаются сложностью, но при этом их целевые страницы достаточно просты. 

Для анализа возьмем отдельные примеры минимализации landing page, чтобы иметь представление о шаблонах проектирования и познакомиться с конструктивными идеями и полезными советами веб-разработчиков. 

Концепция одной ключевой идеи 

На минималистичных landing page сразу заметна нацеленность на одну лидирующую задачу (Call to Action).  Таковой, например, может быть: 

  • кликнуть по кнопке «Зарегистрироваться», 
  • ввести в веб-форму адрес электронной почты, 
  • что-нибудь скачать себе на компьютер. 

Только одно строго заданное действие пользователей, которое нужно веб-дизайнеру, лежит в основе идеи сетевого минимализма. 

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

Целевая страница Dropbox минимализм при создании landing page

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

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

При этом наличие основной идеи не исключает альтернативных действий пользователей на целевых страницах Dropbox. Здесь можно найти такие кнопки призыва, как

○ «Скачать приложение», 
○ «Попробуйте бизнес-аккаунт Dropbox», 
○ «Войти в систему» (для зарегистрировавшихся пользователей). 

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

○ Название Dropbox на странице отсутствует. 
○ С работой сайта можно познакомиться с помощью несложных иллюстраций, это служит дополнительной навигацией к кнопке «Зарегистрироваться». 
○ Присутствует лаконичный и простой слоган («Когда ваши файлы здесь, то все в порядке»). 

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

Целевая страница от Mailbox 2015-09-24 15-36-49 Скриншот экрана

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

Первое, что требуется от пользователя Mailbox в Apple App Store, —  это нажать кнопку «Download Mailbox». Кнопка отличается большим размером, она ясно выделяется на общем фоне.

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

На сайте имеется навигационное меню с альтернативными действиями. Но визуально оно не бросается в глаза. 

Секреты минимализма landing page

Главные составные части минималистских целевых страниц состоят из: 

  1. Первичного действия. 
  2. Объяснения содержания продукта (услуги). 
  3. Альтернативных вариантов. 

О грамотной визуальной иерархии 

Очень важно создавать правильную визуальную иерархию. Грамотный порядок распределения важных и второстепенных компонентов привлекает внимание к самым значимым элементам.

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

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

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

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

Положительный образец визуальной иерархии в формате минимализма показывает дизайн лендинга Numbrs. 2015-09-24 15-47-07 Скриншот экрана

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

Важность первичного действия 

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

Нажатия на строго определенную кнопку? 
Заполнения веб-формы? 
Оценки Вашей страницы Facebook? 

Необходимо выбрать только одно лидирующее первичное действие. После этого следует объединение всех остальных элементов. Такой дизайн landing page будет работать на выполнение главного действия. 

Enthuse.me – этот сайт являет собой хороший пример целевой страницы.enthuse-me

Здесь первое действие изображено выпуклой кнопкой. Вот разновидность отличной визуальной иерархии. В ней сразу же понятно, что первичным действием служит нажатие на кнопку «Начать». 

Грамотный подход к цвету и оформлению 

При создании минималистских сайтов в арсенале веб-дизайнеров имеется не так много инструментов. Главными среди них являются оформление и цвет. 

Примером исключительно разумного подхода в использовании цвета и оформления служит минимализм целевой страницы Basecamp.2015-09-24 15-55-32 Скриншот экрана

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

Чтобы обратить внимание на действительно важные вещи в landing page, хорошими приемами служат крупный шрифт и перемены в цветах дизайнерских элементов. 

Что дает сжатое содержание текста? 

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

Текстовые сообщения на минималистских landing page должны быть короткими и легкими для восприятия. Чем короче текст, тем скорее посетитель сделает ожидаемое начальное действие. 

Contently — это сайт, работа которого может быть описана тремя словами: «Расскажите отличные истории». Данное содержание глубоко и полно отражает деятельность веб-сервиса.

Благодаря небольшому объему текста на целевой странице у посетителей сайта остается мало шансов на изменение своего решения относительно выполнения действия.
2015-09-24 15-59-48 Скриншот экрана

Простое описание товара (услуги) 

Существует немало методов для эффективной демонстрации работы продукта или услуги. Самое главное здесь — добиться простоты объяснения. 

В качестве иллюстрации данной концепции рассмотрим некоторые способы. 

Использование приложением Couple видео, объясняющего работу продукта.
2015-09-24 16-02-57 Скриншот экрана

Здесь присутствует понимание, что видеопоказ продукции вызывает повышение конверсии.

Чтобы раскрыть видео, требуется нажать на кнопку «Watch the Video». Это действие приводит к отображению в модальном окне видеосюжета с YouTube. Модальное окно легко закрывается, и пользователь может не смотреть всё до конца, прежде чем совершить действие.

На этом примере ясна концепция, которую следует применить к вторичному действию — постепенному раскрытию.

Достоинством использования видео является возможность не смотреть всё сразу. Его можно показать лишь в случае, когда пользователю определенно хочется видеть его.

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

Интерактивное описание продукта.2015-09-24 16-05-27 Скриншот экрана

Это другой распространенный способ охарактеризовать продукт. Он используется на минималистичной целевой странице Apple Mac Pro.

В начале объяснения применяется быстрая анимация. Она привлекает внимание и намекает, что на веб-странице посетителя ждет интерактивная анимация. 

2015-09-24 16-06-29 Скриншот экранаФото с высоким фоновым разрешением на Wallmob служит примером того, каким способом используются важные изображения. На фоновом фото показана суть Wallmob — место продажи программ к Вашему мобильному устройству. 

Секрет успеха в простоте 

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

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

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

Приезжайте к нам в гости!

Москва, Зеленоград, ул. Юности 8, 11 этаж (весь этаж — мы)

Позвонить вам ?

Мы перезвоним вам как только так сразу, уже бежим к телефону !

Вы отвлеклись?

Получите уникальное коммерческое предложение на почту до конца дня!
Бесплатно!

Стойте!

Все еще не определились с выбором?
Получите уникальное коммерческое предложение на почту до конца дня!
Бесплатно!

Спасибо за заявку!

Мы свяжемся с вами в ближайшее время!