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

Все примеры лендингов в материале выполнены командой BYYD. Мы разрабатываем посадочные страницы бонусом для клиентов.

1. Показывайте, не только пишите

Люди обладают вниманием золотой рыбки. Согласно данным Тони Хейла из Chartbeat, у веб-сайта есть только 15 секунд, чтобы привлечь внимание. Поэтому, ваш сайт должен и быстро загружаться, и привлекать внимание визуальными эффектами. Используйте изображения и фотографии, чтобы передать информацию или историю бренда.

На этом лендинге технические характеристики кондиционеров подкреплены фото товара и тем, как он выглядит в интерьере.

Смотреть лендинг

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

2. Следуйте принципу: меньше — лучше

Макеты и разделы не должны быть загроможденными. Минимализм фокусирует внимание на главном и выглядит более профессионально.

Вот, как применить этот совет на практике: включите «белые пятна», чтобы разредить элементы и помочь посетителям легче усваивать информацию. Если вы беспокоитесь о том, что страница таким образом будет выглядеть менее эффектно, добавьте ярких оттенков — эта тенденция веб-дизайна 2019 года приобретает массовую привлекательность. 

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

3. Адаптивный дизайн очень важен

90% веб-сайтов малого бизнеса не предназначены для размера экрана мобильных устройств.

Характеристики адаптивного дизайна

  • Сайт адаптируется к любому размеру экрана
  • Быстро загружается
  • На сайте гибкие изображения и макет
Лендинг разработан специально для мобильных устройств.

Смотреть лендинг

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

4. Соблюдайте последовательность

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

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

Дизайн посадочной страницы отвечает принципам бренда и товара, растительная тематика соответствует УТП бренда.

Смотреть лендинг

Чтобы поддерживать последовательный дизайн на вашей домашней странице, обратите внимание на 3 пункта.

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

5. Используйте базовые оттенки

Цвет лендинга культивирует настроение и индивидуальность. Какие тенденции в цветах существуют? 

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

Смотреть лендинг

6. Делайте анимацию

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

Что такое микро-взаимодействия? Они удивляют пользователя и создают привлекательный повод. Могут быть представлены в виде GIF, автоматической прокрутки, анимации и всплывающих окон. 

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

Смотреть посадочную страницу с анимацией

Есть 3 причины, почему анимация и микро-взаимодействия вам нужны:

  • Они вызывают моментальный восторг пользователя.
  • Могут служить визуальными метафорами для усиления эффекта обмена сообщениями о бренде.
  • Могут направить пользователя сделать следующие шаги. 

7. Попробуйте уникальные макеты

Иногда деконструированные, ломаные макеты очень кстати.

Попробуйте следующие идеи

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

Смотреть лендинг

8. Добавьте ретро-элементы

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

Стиль шрифтов на лендинге соответствуют сказочной тематике фильма.

Смотреть лендинг

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

9. Учитывайте дальнейший пользовательский опыт в дизайне посадочной страницы

Макет страницы должен не только предвосхищать потребности пользователей, но и развиваться. Стройте его, отвечая на вопросы «Куда посетители нажмут?», «Что они хотят узнать?»

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

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

Смотреть лендинг

По материалам: leadpages.net