Виды анимаций на сайтах. Кринж, который стоит увидеть и не повторять. Часть 2

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

Как и в предыдущий раз, разделила каждый вид анимации на 3 группы и расскажу подробно про каждый из них:

Хорошая и красивая.
Можно, но осторожно.
Астанавитесь!

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

Хорошая

Приятная успокаивающая анимация. Плавное появление названия компании, логотипа или приветствие, как при включении телефона.

https://superlist.com/

Можно, но осторожно

Красивая графика и отдельное окно приветствия, после которого нужно что-то нажать, чтобы перейти к основной части сайта — только если вы на 100% уверены в том, что это необходимо. Такая анимация может стать вашей фишкой, а может погубить.

Творческая студия цифрового производства Active Theory https://activetheory.net/

Остановитесь

Сложная анимация в стиле путешествия по мультивселенной из фильма “Доктор Стрэндж” запутает, утомит и приведет к уходу с сайта. Профессиональные дизайнеры оценят, клиенты — нет.

https://virtualself.co/

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

Хорошая

Плавная прокрутка с разбивкой элементов = успех.

Магазин товаров для дома moheim https://moheim.com/

Можно, но осторожно

Бывают фишки, которые смотрятся интересно, но нужно быть осторожным с их использованием.

Промосайт к фильму House of Gucci https://www.welcometothehouseofgucci.com/

Остановитесь

Безумные и непредсказуемые движения страницы, которые меняют свое направление. Элементы неожиданно возникают и перемещаются в разные стороны. Любопытно, но неудобно.

https://achate.flow.ninja/

Частая смена направлений может свести с ума и отпугнуть. Агентство типографики https://typographyprinciples.obys.agency/

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

Хорошо

Органичная плавная анимация. Например, легкое увеличение изображения или информация о товаре при наведении.

Сайт с коллекцией бесполезных вещей https://www.theuncomfortable.com/

Можно, но осторожно

Много информации, сильное увеличение или анимация без наведения. Первые пару раз интересно, а потом приедается и оставляет негативный опыт.

https://mill3.studio/en/

Остановитесь

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

Студия дизайна https://yetimotion.com/

С вами была Лена, UX/UI/Motion-дизайнер, которая использует хорошую анимацию в своих работах.

Подписывайтесь, вступайте в сообщество Юзабилити, в планах — много интересных материалов.
Присоединяйтесь к авторам сообщества. За хорошие статьи по теме Юзабилити я предлагаю 4000-10000 рублей за материал. Свяжитесь со мной, предложите темы, чтобы начать зарабатывать.
Всегда рада нетворкингу с UI/Motion-дизайнерами и Front-end — вы знаете где меня найти.

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

Делитесь — сбивает ли вас иногда с толку слишком непредсказуемая анимация скроллинга?