Каким должен быть дизайн лендинг пейдж в 2016 году

2016-09-30_12-17-1312

Мы живем в мире, в котором прогресс не стоит на месте: это касается и интернет-маркетинга, и такого мощного его инструмента, как landing page. То, что работало вчера, не обязательно будет работать сегодня тренды со временем приедаются, а устаревшие шаблоны посадочных страниц не дают нужной конверсии. Поэтому необходимо постоянно быть в тонусе и следить за новинками интернет-маркетинга. И в этой статье мы поговорим о том, каким должен быть дизайн landing page в 2016 году.

Ключевые тенденции дизайна лендинг пейдж в 2016 году

Материальный дизайн

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

Так, в материальном дизайне у объектов появились толщина, тени и свойства, что позволяет ощутить их натуральность, понять положение в пространстве и взаимодействие. Сайты, в свою очередь, стали более эстетичными и, если можно так сказать, “ощутимыми” на подсознательном уровне. Основная цель веб-дизайнеров — сделать сайт приятным для глаз, сохраняя при этом простоту, чтобы пользователь мог легко ориентироваться без дополнительной навигации. В материальном дизайне эта цель реализована по максимуму.

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

Пример посадочной страницы в материальном стиле можно посмотреть тут: shegy.nazwa.pl.

5
Живые фотографии

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

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

Отличный пример дизайна лендинга с использованием живых изображений — одностраничник компании Grain and Mortal (grainandmortar.com) . Помимо того, что разработчики сайта использовали живые фотографии в оформлении своего сайта, в его шапке они разместили видеофон, демонстрирующий рабочий процесс, брифинги и радостных сотрудников, которые явно любят свою работу.

Каким должен быть дизайн лендинг пейдж в 2016 году

 

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

Минимализм

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

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

Хороший пример минималистичной страницы  — это сайты таких компаний, как Dropbox и Mailbox.

Минималистичный лендинг Dropbox:

1

 

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

Если рассмотреть подробнее, то цель лендинга Dropbox — это привести потенциального клиента к регистрации, поэтому кнопка “Sign up” является самым ярким элементом страницы. Чтобы разбавить белый фон дизайнеры использовали неброское изображение, которое, с одной стороны, не дает заскучать, с другой не привлекает к себе излишнего внимания.

Так, специалисты Dropbox, на одном развороте смогли показать:

  1. Что за продукт продвигается;
  2. В чем его уникальное торговое предложение (УТП);
  3. Какие возможности открываются перед клиентом.

Давайте рассмотрим также дизайн landing page компании Mailbox.

2

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

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

Презентация продукта

Я уже слышу возмущения, вроде: “Конечно, я буду рассказывать о своем продукте! Как же его еще продать?”. Но я хочу сказать, что если вы решили написать про преимущества своего продукта и перечислить выгоды для клиента, то вы в 2015, а на дворе уже как бы 2016.

Вместо этого я предлагаю вам показать работу того, что вы продаете с помощью инфографики. Текст  — это хороший инструмент для воздействия на клиента, но каким образом он работает? С помощью символов, из которых складываются слова, люди создают в своей голове те или иные образы. Когда текст крутой, у читателя возникает сочная и подробная картинка того, как работает компания, что она предлагает и почему это ценно. Если образ “правильный”, это приводит к покупке.

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

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

Отличным примером реализации этого тренда может послужить одностраничник компании 1С.

3

 

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

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

Анимация

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

Статические сайты выглядят несколько “сухими” и напоминают страницу в справочнике. Когда не было java, это воспринималось нормально, но сейчас же у нас есть возможность добавить на сайт движение! Человек любит динамику почти на генетическом уровне: мы можем бесконечно смотреть на то, как горит огонь, как течет вода или как кто-то работает, и мы же придумываем такие вещи, как графический эквалайзер, чтобы видеть как движется музыка. Поэтому страницы с элементами анимации всегда будут выгодно отличаться от статичных сайтов конкурентов.

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

В качестве примера, можно рассмотреть дизайн landing page рекламно-консалтинговой группы General Idea (about.general-idea.com)  и обратить внимание на блок, где описывается их история.

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

Вместо подвижного персонажа вы можете снять живое видео о том, как проходит рабочий день в компании. Кстати, вот хороший пример  —  сайт digital-агентства “The Pixel Age” (thepixelage.com)

9

Выбирайте то, что подходит вам больше и действуйте!

Скрытое меню

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

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

Такой пример мы можем наблюдать на fixedgroup.com, в левом верхнем углу страницы.

6
Меню полупрозначное и гармонично смотриться в дизайне landing page. Оно совершенно не отвлекает и создает эффект «чистого макета».

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

Mobile-friendly

Хотя этот вопрос относится скорее к технической части дизайна, но он все равно про дизайн, и о нем стоит поговорить.

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

Думаю, здесь все понятно без слов: современный дизайн landing page должен быть адаптирован под мобильные устройства. От этого зависит удобство пользователей. Если сайт криво выглядит или долго грузится, то его покинут. Не адаптивный макет «отрезает» более 40% трафика. И наоборот, если дизайн посадочной страницы оптимизирован под мобильные устройства, это повышает статус вашей компании в глазах посетителя.

Вот еще один хороший пример «легкого» сайта, оптимизированного под смартфоны и планшеты: hachi-wari.com

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


На этом все. Да помогут вам описанные нами тренды создать продающий шедевр со 100% конверсией! :))

Оцените статью:
Не интересноБаянСреднячокБравоИдеально (голосов 1, средний: 4,00 из 5)
Загрузка...

Хотите создать landing page?

Получите доступ к серии из 8 видео уроков о том, как проверить подрядчика при создании landing page.