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

Итак, какие анимированные элементы лендинга будут пользоваться особой популярностью?

  1. Всплывающие окна (pop-up)
  2. Интерактивность
  3. GIF-файлы для демонстрации продукта
  4. 3D параллакс-скроллинг
  5. Нестандартная загрузка

Рассмотрим их более подробно.

Всплывающие окна (pop-up)

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

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

Всплывающее окно появляется после нескольких секунд нахождения на лендинге

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

Интерактивность

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

Проверьте влияние пассивного дизайна (серый цвет) против интерактивного (оранжевый цвет) согласно данным Demand Metric. 

LeadDoubler предлагает интерактивный калькулятор, чтобы привлечь своих посетителей: 

Создание интерактивной викторины втягивает ваших посетителей. Согласно исследованиям Скотт Бринкер из MarketingLand, ресурс BuzzFeed получает миллионы репостов в Facebook через интерактивные викторины, такие как «Какая работа вам действительно подходит?», они побили все рекорды социального обмена. На самом деле 10 лучших материалов Buzzfeed были именно викторинами.

GIF-файлы для демонстрации продукта

Эта тенденция особенности анимации, которая просто и легко демонстрирует ваше предложение продукта.

Вот пример из Languages, который сочетает в себе мобильное приложение и демо-версию продукта в GIF: 

3D параллакс-скроллинг

Эффект параллакса оживит изображения и станет стильным дополнением вашей посадочной страницы. Вот довольно очевидный пример на странице Lix Pen: 

Нестандартная загрузка

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

Вот пример из Food of the Food. 

Источник