СОЗДАЙ СВОЙ LANDING PAGE ПРЯМО СЕЙЧАС! ВЕСЬ ФУНКЦИОНАЛ БЕЗ ОГРАНИЧЕНИЙ - ПРОСТО ЗАРЕГИСТРИРУЙСЯ!
Бесплатно создать

Минималистический дизайн. Советы бывалых

27 июля 2015 г.
Комментариев не добавлено

дизайн лендинга

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

Основные части минимализма в лендинге:

основное действие;
расшифровка продукта или услуги;
альтернатива

Рекомендации по созданию минимализма на целевой странице

ИЕРАРХИЯ СТРАНИЦЫ


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

Советы от дизайнеров:

 

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

На примерах ниже рассмотрим насколько советы применяются на практике:
 

Страница от Numbrs
 

дизайн

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

Страница от Wander
 

дизайн лендинга

На странице есть всего 4 элемента. Надпись дает понять, что сайт в полном объеме доступен только зарегистрированным. СТА кнопка призывает к этой регистрации.

Оставшиеся элементы имеют небольшой вид и не отвлекают от основных.

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

Страница от enthuse.me
 

пример дизайна

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

Страница от IFTTT
 

визуальная иерархия в дизайне

Грамотно используемые цвета, контрастность и яркая СТА кнопка делают свое дело: привлекают к основному.
 

Страница от Basecamp
 

пример целевой страницы

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

Есть ссылка на объяснение, почему же нужно использовать Basecamp.

Также особо важные моменты подчеркивает шрифт.
 

Страница от Path
 

дизайн landing page

Для визуальной иерархии дизайнер использовал цвет, который подчеркнул важность основного элемента (лид-формы), и шрифт - текст разделен на блоги, что облегчает понимание. А ведь пользователи часто ленятся читать большие «простыни».
 

Страница от Contently
 

дизайн продающей страницы

Смысл всего сервиса заключился в трех словах - «Рассказывайте отличные истории». Лаконично, просто, понятно.
 

Страница от Couple
 

создать дизайн

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

Вместо эпилога

Простота - лучшее решение для современных лендинов. Пересмотрите свои целевые страницы и уберите все лишние. Но, конечно, окончательное решение принимайте после тестирования.

Успехов в начинаниях wink

Вернуться назад