Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней

14 современных трендов в веб-дизайне и мобильных интерефейсах

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

Маркетолог, заставший взлеты и падения ряда популярных тенденций за последние несколько лет, чувствует вполне объяснимую неприязнь к словам «анимация», «Flash» и «GIF-файлы». Все эти тренды, бывшие популярными когда-то, быстро превратились в ругательные выражения, ну или практически превратились ).

Более того, многие современные лендинги до сих пор страдают от избытка подобных элементов.

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

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

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

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

Ниже мы рассмотрим 14 трендов «движущегося дизайна» (motion design), применимых как для полноценных лендинг пейдж, так и для их мобильных вариантов.

1. Перемещение хедера

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

Перемещение хедера

2. Эффекты загрузки целевой страницы

Равно как и с заголовками, здесь вы тоже можете применить множество различных эффектов загрузки основного контента.

Тестируйте сами ...

3. Бесконечная прокрутка с подгружаемыми модулями

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

Бесконечная прокрутка с подгружаемыми модулями

4. Hovercrafting

Измените выделенное состояние (hover states) элементов на вашей посадочной странице, чтобы пробиться сквозь толпу конкурентов. Сосредоточьтесь на мелких деталях, используя эффект исчезания, размытости, различные шрифты и так далее.

Hovercrafting

5. Динамические/анимированные графики

Зачем беспокоиться о статичных изображениях, когда вы можете сделать график, в динамике показывающий все необходимые соотношения и изменения?

графики

6. Замедленная анимация (Slo-mo)

Некоторые лендинги используют анимационные возможности CSS действительно элегантно — например, едва заметно меняя фон страницы.

Замедленная анимация (Slo-mo)

7. Модульная прокрутка

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

Модульная прокрутка

Пример гостиницы в Берлине ...

8. «Эффект сгиба»

Современные мобильные приложения и лендинги активно используют «эффект сгиба» как вертикально, так и горизонтально.

«Эффект сгиба»

9. Кнопки — индикаторы процесса

Кнопка «Отправить» может выступать еще и в качестве индикатора процесса отправки лид-формы, как в примере ниже.

Кнопки — индикаторы процесса

10. Медленное проявление

Этот эффект лучше всего иллюстрируется примером от The Guardian: на современной панораме проявляется изображение высадки союзных войск — нужно лишь провести мышью по картинке.

появление

11. Анимация переходов в мобильном меню

Ниже — наглядный пример использования метода брендом Paper. Другие хорошие примеры можно найти у Capptivate.

Анимация переходов в мобильном меню

12. Минималистичные или инновационные лид-формы

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

Минималистичные или инновационные лид-формы

13. Стрелки/кнопки для скроллинга

Разнообразные формы прокрутки контента — последний крик моды.

Стрелки/кнопки для скроллинга

14. Слайдовая навигация

Навигация с помощью слайдов становится все более популярным трендом в современном веб-дизайне. Ниже — хороший пример от Medium.

 Слайдовая навигация

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

Высоких вам конверсий!

По материалам econsultancy.com 

19 июля 2014

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".