Spring toggle
A spring, not a tween. It overshoots a hair and settles, so it feels physical.
spring 520 / 30 04.5 / МОУШН ДЛЯ ВЕБУ ТА ІНТЕРФЕЙСІВ← Моушн-графіка
Інтерфейси, щовідчуваються живими.
Історії прокручування, мікровзаємодії та переходи між сторінками, що роблять сайт зрозумілішим і незабутнім, без втрат у швидкості чи доступності.
ПОДИВІТЬСЯ НА РЕМЕСЛО
Моушн-лабораторія: сім взаємодій, яких можна торкнутися
Справжній, робочий рух інтерфейсу, а не відео. Перемикайте, наводьте, перетягуйте й натискайте. Усе тут поважає налаштування зменшеного руху.
04Depth
0%
- Brief
- Boards
- Animate
- Ship
Зроблено студією Roaswell, щоб показати, як ми працюємо. Це не робота клієнта і не справжній бренд.
ЩО ВИ ОТРИМАЄТЕУсе, що потрібно,
Усе, що потрібно,
щоб запуститися.
Чітко визначені результати, погоджені до початку роботи, щоб обсяг ніколи не ставав сюрпризом.
01
Принципи руху
Токени easing, часу й spring, щоб кожна взаємодія відчувалася частиною одного продукту.
02
Прокручування та переходи між сторінками
Послідовності скролу, що ведуть історію, і переходи між маршрутами, що скеровують увагу, як на цьому сайті.
03
Бібліотека мікровзаємодій
Кнопки, перемикачі, меню, картки й форми, що реагують із метою.
04
Продакшн-код або експорт
Чистий CSS і JavaScript або експорт Lottie і відео, готові до вашого стеку.
05
Варіанти для доступності
Альтернативи зі зменшеним рухом і поведінка фокуса закладені одразу, а не латаються пізніше.
06
Бюджет продуктивності
Рух вимірюється відносно часу завантаження й затримки взаємодії до того, як потрапить у реліз.
ЯК ЦЕ ПРОХОДИТЬВід брифу
Від брифу
до готового.
Чотири етапи, кожен із чітким результатом, тож ви завжди знаєте, що створюється і навіщо.
Аудит
З’ясувати, де рух щось прояснить, а де лише додасть шуму.
Визначити принципи
Задати словник easing і часу, щоб рішення більше не приймалися кожного разу заново.
Прототип у браузері
Будувати в реальному середовищі, щоб те, що ви затверджуєте, було тим, що вийде.
Випустити і виміряти
Релізити з бюджетом продуктивності й дивитися, що користувачі роблять насправді.
ДЕ ЦЕ ПЕРЕТИНАЄТЬСЯОдна студія.
Одна студія.
Одна система.
Моушн працює найкраще, коли бриф дають дані, а результат живе там, де бюджет.
ЗАПИТАННЯДобрі запитання,
Добрі запитання,
чесні відповіді.
Не знайшли потрібне? Запитайте нас напряму, і відповість сеньйор.
Чи сповільнить анімація наш сайт?
Ні, якщо зроблена правильно. Ми задаємо бюджет продуктивності, анімуємо найдешевшими властивостями й тестуємо на реальних пристроях.
Ви пишете код?
Так. Ми можемо віддати готовий до продакшну код або передати специфікації та експорт вашій команді для впровадження.
А що з доступністю?
Кожен рух має альтернативу зі зменшеним рухом, а поведінка клавіатури та зчитувачів екрана проєктується разом з анімацією.
Чи працює це з нашою CMS або фреймворком?
Ми працюємо з більшістю сучасних стеків. Розкажіть, що у вас, і ми підтвердимо найкращий підхід.
Чи можна побачити, як це працює?
Ви на це дивитеся. Послідовності скролу, лічильники й появи по всьому сайту зроблені за тим самим підходом.