Чтоб блестело и сверкало: когда уместно использовать анимацию на сайте - The 23 design
Гоголевская, 6а
093 332 26 23

Чтоб блестело и сверкало: когда уместно использовать анимацию на сайте

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

Преимущества анимации

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

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

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

Недостатки анимации

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

Когда уместно?

Избыток анимации на сайте государственного, образовательного учреждения или ТНК будет отвлекать от основного материала. Хотя анимирование отдельных кнопок, наоборот, поможет пользователю быстрее сориентироваться на сайте.

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

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

Анимацию можно применить в следующих случаях:

  • Занять пользователя во время загрузки страницы. Такая анимация называется прелоудером (pre-loader) и, чем интересней она выглядит, тем незаметней проходит время при загрузки данных.

Во время работы над сайтом для Ивана Дорна мы применили анимацию, напоминающую элемент граффити.

 

  • Для описания процессов, которые пользователю нужно повторить.

В сайте для Good morning, Granola мы использовали анимацию, чтобы описать процесс приготовления гранолы, так как на то время это был относительно новый продукт.

 

  • Каркасное отображение страницы строится по принципу постепенного заполнения пространства контентом. Этот прием создает ощущение быстрого выполнения действий. Такая ненавязчивая анимация особенно актуальна для сайтов СМИ и каталогов.

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

 

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

Для сайта Джамалы было принципиальным приобретения билетов онлайн. Анимировання надпись «Купить» указывает на возможность взаимодействия с кнопкой.

 

  • Не стоит недооценивать развлекательную функцию анимации. Она особенно актуальна для детских продуктов.

Мы примении ее для сайта полезных сладостей от Bob Snail. Здесь анимация создает игривое настроение. Кроме того, в нее задействованы элементы брендинга. Фирменная улитка Боб лучше запоминается пользователем именно благодаря яркой анимации.

 

 

Таким образом, анимация является полезным элементом веб-дизайна. Однако ее нужно применять, основываясь на объективных причинах, а не желании сделать сайт более «подвижным».  В таком случае она не только улучшит внешний вид страницы, но и сделает пользовательский опыт более приятным.

29 июня 2017, Четверг

А про это слышали?