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