В продолжение темы о тенденциях дизайна лендингов в 2017, мы расскажем об анимированных элементах посадочных страниц, которые будут актуальными в новом году. В прошлых двух статьях мы упоминали о макетах лендингов и визуальном контенте.
Итак, какие анимированные элементы лендинга будут пользоваться особой популярностью?
- Всплывающие окна (pop-up)
- Интерактивность
- GIF-файлы для демонстрации продукта
- 3D параллакс-скроллинг
- Нестандартная загрузка
Рассмотрим их более подробно.
Всплывающие окна (pop-up)
Всплывающие и приветственные окна становятся все более популярными. Это анимированный способ привлечь аудиторию после того, как они уже прибыли на вашу страницу.
Совет: В зависимости от содержания вашей посадочной страницы, всплывающее предложение должно точно соответствовать контенту лендинга.
Аналогичным образом, после нескольких секунд просмотра веб-сайта Muse приветственное окно заполняет весь экран целевой страницы, так, что у пользователя нет выбора и ему придется ознакомиться с предложением, это выглядит следующим образом:
Интерактивность
Вы увидите более интерактивный дизайн на посадочных страницах. Это способ, чтобы привлечь внимание клиентов сначала, а затем переместить их глубже в процесс выбора.
Проверьте влияние пассивного дизайна (серый цвет) против интерактивного (оранжевый цвет) согласно данным Demand Metric.
LeadDoubler предлагает интерактивный калькулятор, чтобы привлечь своих посетителей:
Создание интерактивной викторины втягивает ваших посетителей. Согласно исследованиям Скотт Бринкер из MarketingLand, ресурс BuzzFeed получает миллионы репостов в Facebook через интерактивные викторины, такие как «Какая работа вам действительно подходит?», они побили все рекорды социального обмена. На самом деле 10 лучших материалов Buzzfeed были именно викторинами.
GIF-файлы для демонстрации продукта
Эта тенденция особенности анимации, которая просто и легко демонстрирует ваше предложение продукта.
Вот пример из Languages, который сочетает в себе мобильное приложение и демо-версию продукта в GIF:
3D параллакс-скроллинг
Эффект параллакса оживит изображения и станет стильным дополнением вашей посадочной страницы. Вот довольно очевидный пример на странице Lix Pen:
Нестандартная загрузка
Чем более навороченными и интерактивными становятся проекты, тем больше эта тенденция становится необходимой, в то время как люди ждут загрузки страницы, не заставляйте их скучать — развлеките.
Вот пример из Food of the Food.