Слідом за flat-ілюстраціями в тренди дизайну увірвалася анімація. Вона почала з'являтися на дедалі більшій кількості платформ, набувати різних форм і швидко розвиватися. Настав момент, коли вона перестала бути тільки прикрасою, а стала додавати сторінкам інтерактиву, взаємодіяти з користувачем.
Ні, стаття не про те, що заанімовані котики захоплять світ. Ми поговорили з фахівцями з Artjoker: Яніною - дизайнеркою і Наталією - керівницею відділу product-дизайну, щоб розповісти про те, як анімація може вплинути на успішність проєкту.
Навіщо потрібна анімація?
Для будь-якого бізнесу важлива ефективність застосовуваних інструментів - це цілком природний і правильний підхід. Щоб не потрапити в халепу, фахівці оцінюють те, наскільки вкладення співвідноситимуться з можливими результатами.
Здавалося б - яка користь від котика, який махає лапкою під час натискання. Все до смішного просто - люди люблять взаємодію і готові гратися з цим котиком. Вони запам'ятають його надовго, а потім ще й розкажуть друзям. "Анімація часто використовується для вау-ефекту. Наприклад, є завдання: "Зробити креативний дизайн сайту". Як завжди, слово "креативний" кожен розуміє по-своєму. У таких завданнях ми опрацьовуємо не тільки графіку. Сильно допомагає анімація сайту.
Мені подобається приклад із кішечкою, що ворушиться, із застосунку відомого багатьом банку. Ти починаєш взаємодіяти з їхнім продуктом і не очікуєш будь-якого руху. На початку вона статична, а потім раптово починає нявкати і водити вушками. Взаємодія користувача з дизайном - це дуже круто. Інтерактив - те, що завжди чіпляє",- підтвердила Наталія.
Яніна кивнула і продовжила відповідь колеги: "Так, це не нудна статична графіка, а вже інтерактивчик, через який все має живенький вигляд. Анімація дійсно може використовуватися для привернення уваги та залучення користувача. Ще вона потрібна, щоб показати як працює якась фіча".
Як зрозуміти, що анімація необхідна?
Якщо ваш сайт смертельно нудний, користувач не розуміє, що йому потрібно робити або впритул не помічає великих червоних кнопок, настав час щось змінювати. Зрозуміло, ресурс із поганим юзабіліті або неякісним дизайном не врятувати за допомогою пташок, що летять. Варто спочатку виділяти достатню кількість часу, сил і фінансів на створення сайту, щоб апгрейднути його анімацією й отримати платформу з максимально приємним користувацьким досвідом.
Яна продовжила: "Статичною картинкою ти не поясниш людині, що має на увазі певна ілюстрація або фотографія. Потрібно показувати історію, флоу роботи. Також анімація може знадобитися для привернення уваги до ключового об'єкта. Якщо говорити про вау-ефект, він не завжди необхідний, але іноді його використання має крутий вигляд".
Чи може анімація виступати інструментом для підвищення конверсії?
Використання анімації - це тонкий лід. Вона може робити сайт цілісним, більш сучасним, допомагати орієнтуватися і виступати чудовим помічником у поліпшенні юзабіліті. Водночас, велика кількість ефектів, швидше за все, дезорієнтує користувача або відтягне всю увагу на себе. Мало просто зробити анімацію на сайті - важливо, щоб ефекти доповнювали і підтримували ідею, а не відволікали від контенту і мети, яку переслідувала людина, переходячи за посиланням.
"Одразу на думку спав сайт дизайн-агентства - якщо потенційні клієнти бачать, що у хлопців крутий дизайн і анімація, у них точно підвищиться конверсія. Також корисно, якщо за допомогою ефектів ми краще пояснимо користь продукту, особливості його використання або інші деталі", - доповнила Яніна.
Окрема згадка - це питання зі швидкістю завантаження сторінок веб-ресурсу. CSS-анімацію часто використовують для прелоадерів, які допомагають скоротити час до "першого контакту" користувача з контентом, що істотно знижує відсоток відмов. Безліч людей просто закривають вкладку, якщо сайт вантажиться довше трьох секунд. Анімація може допомогти в цьому або погіршити ситуацію - залежно від професіоналізму виконавця.
Наскільки анімація впливає на юзабіліті?
Створення анімації для вебсайту - це процес, який має проходити під гаслом: "Не нашкодь". Доповнюючи картинку ледве помітними деталями - переходами, пульсацією, появою тіні або інакше додаючи інтерактиву, можна викликати у відвідувача інтерес і відчуття цілісності, завершеності.
"Добре, коли за натисканням кнопочки слідує відповідна дія. Існують різні види ефектів. Можна поставити просто фон, що крутиться-літає, але є завдання і на взаємодію користувача з дизайном. Тоді кнопка перетворюється на новий елемент, потім з'являється напис - це супер-пупер", - підтвердила дизайнерка.
Чи актуальна Flash-анімація?
Якщо ви вирішили зробити флеш анімацію для сайту в 2019 році, щось пішло не так. Ця технологія давно мертва і її пора списувати з рахунків. Яна поділилася своєю історією: "По-моєму, цією технологією зараз взагалі ніхто не користується. Пам'ятаю, у нас ще в універі була розробка флеш анімації, а потім нам через два роки сказали: "Усе, хлопці, згортаємося", - давно це було... Flash мертвий. Усі використовують After Effects".
Усе, хлопці й дівчата, згортаємося.
На зміну великоваговому і проблемному флешу прийшли інструменти CSS, які істотно спростили роботу з графікою і знизили вагу сторінок. Ще у 2017 році, Adobe - розробники технології, заявили про намір відключити її підтримку у 2020 році. Після цього перестануть виходити оновлення, а браузери не будуть зчитувати цю технологію. Можна сміливо заявляти, що створення флеш анімації для сайту - минуле століття.
Наскільки поширена 3D-анімація в Інтернеті?
Створення 3D-анімації потребує більше ресурсів - як часових, так і фінансових. Крім цього, її використання накладає ще більшу відповідальність на фахівця, який займається оптимізацією веб-платформи. Усе тому, що сторінка з 3D може важити набагато більше, ніж з 2D-анімацією, а значить віддаляти час "першого контакту" користувача з контентом і підвищувати ризик відмови. Але цього не відбувається, якщо використовувати відповідні інструменти розробки і кинути сили на оптимізацію.
Створити 3D-анімацію на сайті можна в програмах:
- after effects;
- 3ds max (в основному використовується для розробки ігор);
- Cinema 4D.
"Якщо на сайті є 3D-анімація, чуваки взагалі офігенно круті. Як на мене, вона частіше зустрічається на сайтах дизайн-агентств і в продуктовому дизайні. Наприклад, створюється об'ємна модель велосипеда, щоб показати його в русі. 3D-анімація поширена, але більше як графічний елемент - об'ємна картинка/ілюстрація або просто об'єкт як бекграунд. Принаймні, саме це мені зустрічається", - доповнює Яна.
Якщо на сайті є 3D-анімація, чуваки взагалі офігенно круті.
Насамкінець зазначимо, що для створення якісного продукту важливі навіть не тренди анімації 2019, а доречність і те, наскільки обрані ефекти покращують користувацький досвід. Їхня роль в успішності проекту буває і позитивною, і негативною. У першому випадку - можна поліпшити юзабіліті, продемонструвати турботу про користувача або можливості команди, зробити сайт ненудним і незабутнім. Другий випадок можливий лише в разі непрофесійно виконаної роботи, що призводить до довгого завантаження або дезорієнтації відвідувачів - щоб не допустити подібного, варто звертатися до професіоналів, попередньо переглянувши портфоліо.
Якщо ж ви розглядаєте цей напрямок як хобі, можна почати з того, щоб створити гіф анімацію. Це гранично легко і здійсненно в стандартних програмах, на кшталт Photoshop. На подібних принципах будується і створення ефектів для веб-ресурсів, тому такий експеримент ідеальний як перший крок.
А вже повноцінно створити gif анімацію для сайту можна за допомогою:
- Photoshop
- Principle
- After Effects
- Cinema 4D (для 3D-анімації).
У нашому блозі також можна дізнатися про останні тренди веб-дизайну, розібратися в різних аспектах маркетингу і зрозуміти, що містить у собі розробка сайту.
