Анімація на сайті робить його повільним
Робимо векторну анімацію у Lottie (формат JSON, який програється в браузері й застосунку) і оптимізуємо вагу. Перевіряємо швидкість на слабкому телефоні, перш ніж віддати.
Анімація інтерфейсу, яка пояснює продукт і не гальмує сторінку
Ми робимо легку анімацію для сайтів і застосунків у Lottie та Rive. Кнопки, завантаження, переходи й ілюстрації, що реагують на дії користувача. Файли важать мало, працюють на телефоні й передаються вам разом з вихідниками.
Кошторис і строки після брифу
Кому підходить
- Власники сайтів і лендінгів, яким потрібні живі акценти без важкого відео
- Команди мобільних і вебзастосунків, де треба анімувати стани інтерфейсу
- Стартапи, яким треба пояснити продукт коротким анімованим сюжетом
- Магазини й сервіси, яким потрібні мікроанімації в кошику, формах і онбордингу
Які задачі вирішуємо
Розробник каже, що дизайнерську анімацію неможливо повторити в коді
Одразу проєктуємо під обрану технологію: Lottie, Rive або CSS. Передаємо файли, які підключаються кількома рядками коду, і коротку інструкцію для розробника.
Інтерфейс сухий, користувачі не розуміють, що відбувається після натискання
Додаємо анімацію станів: наведення, завантаження, успіх, помилка. Користувач бачить реакцію системи й менше помиляється.
Вже платили за анімацію, а вихідників немає, змінити не можна
Усі вихідні файли, проєкти й доступи належать вам за погодженими умовами. Правки в майбутньому може робити будь-хто.
Що входить у роботу
- Аналіз інтерфейсу й вибір, де анімація допомагає, а де заважає
- Підбір технології: Lottie для простих сцен, Rive для інтерактивних станів, що реагують на дії користувача
- Розкадрування та тест руху (простий чорновий варіант до фінальної графіки)
- Анімація іконок, кнопок, лоадерів і переходів між екранами
- Інтерактивні стани в Rive: наведення, натискання, прогрес
- Оптимізація ваги файлів і перевірка на слабких пристроях
- Версії для світлої й темної теми, якщо вони потрібні
- Підключення на сайт або передача інструкції розробнику
- Передача вихідників і ліцензій на шрифти та ресурси, що ми використали
Оберіть обсяг роботи
Пакет допомагає описати задачу. Кошторис і строки погоджуємо після брифу та уточнення вимог.
01
Старт
Сайт або лендінг, якому потрібні кілька живих акцентів
- До 5 мікроанімацій (іконки, кнопки, лоадер)
- Формат Lottie або CSS
- Оптимізація ваги
- Файли й інструкція для підключення
02
Інтерфейс
Застосунок або сервіс з кількома екранами й станами
- До 15 анімацій станів і переходів
- Lottie та Rive на вибір
- Світла й темна теми
- Тест на iOS, Android і в браузері
- Передача вихідників
03
Сюжет продукту
Продукт, який треба пояснити коротким анімованим сюжетом
- Сценарій і розкадрування
- Анімація 1–2 ключових сцен для головної або онбордингу
- Інтерактивна версія в Rive за потреби
- Легка версія для мобільних
- Підтримка під час інтеграції
Як працюємо
Бриф і вимоги
Ви описуєте задачу й поточний процес. Уточнюємо вимоги, обираємо перший етап і готуємо кошторис.
Пілот із вимірним КПІ
Робимо одну анімацію на реальній сторінці. Разом домовляємося, що міряємо: вага файлу, швидкість завантаження, клікабельність елемента.
Розкадрування й тест руху
Погоджуємо швидкість, пластику й стиль руху до фінальної графіки. Так правки коштують менше.
Анімація та оптимізація
Доводимо рух, стискаємо файли, перевіряємо на слабких пристроях і в різних браузерах.
Передача та інтеграція
Підключаємо на сайт або передаємо файли з інструкцією. Оплата йде етапами, усі файли й доступи ваші.
Межі роботи
- Не обіцяємо зростання продажів від самої анімації: ми міряємо вагу, швидкість і поведінку на сторінці в межах пілота
- Не робимо складну 3D-анімацію і відеопродакшн у цьому пакеті: це окрема задача й інша ціна
- Не додаємо анімацію всюди: якщо вона заважає читати чи сповільнює сайт, ми її приберемо чи спростимо
Часті питання
Чим Lottie відрізняється від Rive?
Lottie відтворює готову анімацію, як коротке відео з векторів. Rive вміє більше: анімація реагує на дії користувача й має стани. Для простих акцентів вистачає Lottie, для інтерфейсів із логікою краще Rive.
Чи сповільнить анімація мій сайт?
Добре зроблена векторна анімація важить мало. Ми оптимізуємо файли й перевіряємо їх на слабкому телефоні. Якщо ефект впливає на швидкість, спрощуємо його.
Що потрібно від мене для старту?
Дизайн-макет або посилання на сайт, фірмові кольори й шрифти, та приклади руху, які вам подобаються. Якщо макета немає, ми можемо зробити його в окремій послузі.
Чи можна анімувати вже готовий сайт?
Так. Ми дивимося на поточну верстку й підбираємо рішення, яке підключається без переробки сайту. Іноді треба невеликі правки коду, ми скажемо про це наперед.
Кому належать файли?
Передачу коду, матеріалів і доступів погоджуємо до старту та фіксуємо в умовах роботи. Окремо описуємо сторонні ліцензії й сервіси, якщо вони потрібні.
Як це вписується в сайт, клієнтів і автоматизацію?
Анімація допомагає сайту пояснити пропозицію й вести людину до дії. Це підвищує зручність сторінок, куди ми приводимо трафік. Для автоматизації вона показує стани форм, ШІ-чатів і кабінетів.
Почнемо з вашої задачі
Опишіть бізнес, бажаний результат і поточний процес. Після брифу уточнимо вимоги та підготуємо кошторис.