5 способів покращити дизайн завдяки Lottie-анімаціям

Анімації в UX/UI — то є велика сила. Адже саме вони здатні виділити ваш дизайн серед інших, покращити досвід користувачів та змусити їх якнайдовше залишатися на сторінці.

Далі розповімо, як саме Lottie можна використовувати у вебпроєктах. 

Зазвичай користувачі залишаються на сторінці менше ніж хвилину

Тож задача дизайнера — максимально втримати їхню увагу та зробити подорож сайтом максимально зручною та цікавою. Зокрема і за допомогою анімованих елементів. 

1. Зачепіть увагу візуальним сторітелінгом

Анімація — чи не найкращий інструмент, аби розповідати бренд-історії. При цьому робити це влучно та цікаво. Спробуйте додати анімовану графіку на перші екрани і зробити її центральним візуальним елементом оповіді. 

2. Заохотьте гортати сторінку далі

Досить часто користувачі втрачають інтерес до сторінки і не прогортають далі перших екранів. Допомогти з цим як раз може анімація, яка триматиме увагу людини від сторінки до сторінки. Наприклад, як невеликі інтерактивні хмарки на сторінці морозива Mr.Pops.

3. Додайте руху на сторінки очікування

Хороший вебдизайн визначають деталі. Наприклад, коли про користувача піклуються під час завантаження сторінок. Або ж — коли креативно оформлюють блок «Сторінку не знайдено». В кожному з цих випадків Lottie-анімація може стати чудовим вибором.

4. Додайте інтерактивності іконкам

Анімовані іконки можуть стати маленькою, але цікавою фішкою вашого дизайну. 

По-перше, вони привертають увагу під час подорожі сайтом. По-друге, здатні ефективніше розкрити зміст, який ілюструє іконка.

5. Анімуйте зворотний зв’язок

Використання Lottie-анімації для оформлення зворотного зв’язку в реальному часі допомагає користувачам бачити результати дій, які вони виконують на сторінці. 

Тож в цьому випадку анімація є не лише естетичним рішенням, але й важливою складовою зручності взаємодії.

3 ресурси, де можна знайти натхнення з UI-анімацій

✸ Viewport — сайт, де можна зберегти референси та натхнення з UI-дизайну: від застосунків до вебплатформ.

✸ DetailsMatter — онлайн-галерея, де зібрані різноманітні цікаві мікровзаємодії з користувачем у застосунках та вебсайтах.

✸ Web Interections Gallery — колекція анімованих вебелементів з усього інтернету. 

Опануйте lottie-анімації вже цієї суботи!

3 серпня ми проводимо практичний воркшоп по анімаціях, де ви зможете власноруч розробити lottie-анімацію в After Effects і зробити перший крок до анімованих інтерфейсів у портфоліо. Реєструйтеся за посиланням та забирайте своє місце на воркшопі.