Тренды веб-анимации. 2021
Веб-анимация — это бодро, весело, почти всегда удобно (или архинеудобно, всякое бывает) и вот прямо сейчас очень модно.
Мы постарались разобраться, какие движущиеся картинки моднее прочих. Изучили статьи про тренды 2020-2021 годов, перерыли awwwards.com, посмотрели проекты, которыми хвастаются дизайнеры и программисты.
Собака Павлова
2021
ИНТЕРФЕЙСЫ
Советская семья смотрит телевизор.
Иллюстрация из журнала «Знание – сила». Ноябрь 1953 г.
Иллюстрация из журнала «Знание – сила». Ноябрь 1953 г.
0. Зачем это все?
Удобство. Иногда анимация — отличный инструмент, помогающий понять, какие кнопки жать, куда идти, на что смотреть.
Красота. Анимация может быть чисто декоративной. Просто способ привлечь и удержать внимание пользователя.
История. И, наконец, иногда анимация рассказывает историю, создавая эмоциональную связь между интерфейсом и пользователем.
1. Сторителлинг
С этим трендом как-то сложно: про него много говорят, но в качестве примера таскают из статьи в статью одну и ту же картинку, причем не очень-то и новую. Хотя действительно хорошую:
Хочется все-таки пример поновее, в который можно ткнуть пальцем и сказать — о, история пробежала.
Отличный образец: статьи на Kayma Stories.
По мере прокрутки статьи (например, вот этой) в правом поле возникают и меняются элементы анимации, складываясь в короткую, но вполне внятную историю.
Примеры с кодом для тех, кто хочет сделать что-то похожее:
2. Анимация загрузки
Пока страница грузится, пользователь может переключиться на другой сайт, а вернувшись, забыть, зачем вообще приходил.
Быстрый интернет породил нетерпеливых пользователей, и анимация загрузки, удерживающая их внимание, снова в тренде.
1. Анимация с процентами не только развлекает ожидающего загрузки пользователя, но и сообщает ему, что ждать осталось недолго. Это касается и прогресс-баров, но насколько мы увидели, прямо сейчас веб-дизайнеры предпочитают полосочкам цифры.
2. Загрузочные картинки не обещают пользователю ничего конкретного, зато неплохо справляются с задачей развлечь и удержать.
3. И все-таки прогресс-бары. Старая добрая полоса загрузки.
Что мы думаем обо всем этом. Модно, не модно, но если сайт грузится дольше пары секунд, анимация загрузки обязательна.
3. Эффекты курсора
Эффекты курсора были безумно популярны еще в прошлом веке — и уже тогда безнадежно устарели. Ну что ж, кто сказал, что в моду нельзя войти дважды?
В списках трендов 2021 года курсорные эффекты не замечены, но едва ли не каждый второй сайт на https://www.awwwards.com/ привязывает какую-нибудь анимацию к движению курсора. Например:
Некоторые примеры бессмысленны, беспощадны и противоречат здравому смыслу:
Что мы думаем обо всем этом. Звонили из девяностых, просили вернуть тренд.
Примеры с кодом для тех, кто подумал «Хорошо бы такое сделать» (или «Да я это еще на Бейсике писал_а»):
4. Кинетическая типографика
Динамические буквы, проще говоря. Для тех, кому просто буквы — это скучно.
Что мы думаем обо всем этом. Интересная типографика в движении помогает удержать внимание пользователя на тексте, но мешает его прочесть. Уместна для коротких предсказуемых текстов. Если кинетическая типографика — способ похвастаться, что автор умеет в AfterEffect и заодно выразить ненависть к буквам, то лучше не надо.
Примеры с кодом. А сделать это можно, например, вот так:
5. Ховер-эффекты
Пользователь смотрит туда, куда навел курсор. Или наоборот. Делать интересно именно там — идея довольно очевидная и вполне разумная. Поэтому ховер-эффекты никогда не выйдут из моды.
Что мы думаем обо всем этом. Делаем что-нибудь по наведению мышки. А без мышей — не делаем. Одобряем. Ненавязчиво и спокойно.
Сделай сам. Эффекты наведения — один из простейших для реализации видов анимации. Кажется, любой конструктор сайтов позволяет добавлять ховер-эффекты. Но можно и своими руками, если хочется. Несколько примеров простых эффектов наведения:
6. Скролл в безумных направлениях
Кажется, стало очень модно перематывать экран не туда, куда ожидает пользователь. Влево, вправо, вверх, по диагонали, со сменой направления.
Вот так примерно:
Больше картинок не покажем из соображений гуманности. Но их тьмы.
Что мы думаем обо всем этом. Без комментариев.
Не прощаемся. Во второй части поговорим о стилях и стилистических приемах web-анимации.
Статья также опубликована на vc.ru
20 августа 2021
Другие статьи
У дизайнеров по всему миру есть свежие идеи, интересные исследования и жизнеспособные прототипы, как решать проблемы пассажиров городских и пригородных автобусов.
Изучаем на кейсах, как UX-дизайнеры улучшили складские процессы, повысили эффективность сотрудников, увеличили конверсию, создали доверие на рынке и автоматизировали процессы.
Мы снова предложили нашим читателям задать анонимные вопросы про дизайн. Отвечают Евгений Романовский и Ольга Павлова.