Взгляните на эти привлекательные веб-сайты , и вы сразу поймёте, что все движется. От динамических фонов до причудливых переходов страниц и интерактивных иллюстраций — анимация в тренде. Время использовать Lottie!

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

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

Выделитесь среди конкурентов

Evil Twin, технологическое агентство цифрового маркетинга, использует динамическое изображение персонажа на своем WordPress веб-сайте.

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

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

Плохие новости? 

Все остальные тоже могут. В 2021 году в сети было 1,88 миллиарда веб -сайтов , из которых на WordPress приходится ошеломляющие 42% . Это большая конкуренция.

Добавление анимации на ваш сайт может помочь вам выделиться среди множества статических веб-сайтов. Это потому, что движущиеся изображения легче вспомнить , чем стационарные. Например, Evil Twin , технологическое агентство цифрового маркетинга, использует динамическое изображение персонажа на своём веб-сайте WordPress.

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

Расскажите историю своего бренда

Langmobile использует увлекательную анимацию Lottie WordPress, в которой дети учатся и играют .

Вы бы предпочли пару обуви Nike или Adidas?

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

В этом сила истории бренда.

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

И что может быть лучше для эмоциональной связи, чем связь через анимацию? Например, взгляните на Langmobile , сервис изучения языка. На его сайте, работающем на WordPress, используются красочные анимации Lottie , изображающие детей , которые учатся и играют. Движение может стать мощным маркетинговым инструментом для усиления голоса вашего бренда и визуального стиля.

Создавайте эффективные пользовательские интерфейсы

Armadillo использует анимированный значок гамбургера в своем мобильном пользовательском интерфейсе на базе WordPress.

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

• Обеспечьте обратную связь в микровзаимодействиях . Движение может подсказать пользователю, когда произошло успешное (или неуспешное) взаимодействие. Например, это может быть кнопка «сердце», которая становится красной при нажатии, или переключатель, который перемещается при активации.
• Включить состояния наведения. Что вы делаете, чтобы узнать, кликабельно ли что-то? Вы бы навели на него курсор. Анимация элементов, таких как кнопки или ссылки, при наведении на них курсора позволяет вашим пользователям понять, что на них можно щёлкнуть.
• Дайте навигационные подсказки . Движение даёт вашим пользователям подсказки о том, куда идти дальше. Например, возьмём популярное меню-гамбургер, которое вызывается значком (т. е. тремя вертикальными полосами). Обычно меню исчезает в фокусе или скользит с одной стороны экрана, а не появляется внезапно, что может дезориентировать. Значок гамбургера может быть анимирован в значок «закрыть», который сообщает пользователю, что он может щёлкнуть по нему ещё раз, чтобы закрыть меню.

Улучшите показатели вашего сайта на WordPress с помощью Lottie

Креативная студия Edelmade использует анимацию загрузки на своем сайте WordPress.

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

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

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

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

Так как же добавить анимацию Lottie на свой сайт WordPress?

Вот в чем преимущество: вам не нужна команда для разработки или ручного кодирования анимации с нуля.

В LottieFiles есть тысячи бесплатных анимаций , которые вы можете использовать в коммерческих целях на своём сайте. Вы даже можете настроить цвета и текст с помощью редактора Lottie, чтобы они соответствовали вашему бренду. Как только вы найдёте то, что вам нравится, вы можете просто встроить свой Lottie в WordPress , скопировав URL-адрес oEmbed и вставив его в свой редактор сообщений.

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

Так что вперёд, начните творить магию движения с Lottie и WordPress — нам не терпится увидеть, что вы придумаете!