Дизайн и реальная жизнь 🧳
Как бы вы решали эту задачу?
AGIMA.design
AGIMA.design
@AGIMAdesign
3 118 подписчиков
120 постов
Посты
Пока Фигма эволюционирует то ли в новый Адоб, то ли в старый Корел, Скетч, как ледник, спокойно и планомерно идет своей дорогой. Лет пять назад они изобрели Smart Layout, а на днях наконец-то развили его в Stacks (полный changelog).
Пишут, что у них всё хорошо: небольшая команда, самоокупаемый продукт, и планы двигаться дальше.
Давно тут не было странных скинов для Winamp! 👽
Вообще, давным-давно, возможно, это было ещё до изобретения интернета, мы делали что-то похожее. Но, конечно, это работает только в развлекательных целях. Пользоваться такими интерфейсами каждый день — так себе удовольствие.
А так если? 🍔
Показывать значения сразу для трёх графиков: норм заход? 🧐
Wassily Kandinsky's Dance Curves, 1926 💃
Кажется, что-то похожее уже было на канале — но красиво же!
Японская студия с яростными ховерами и классными бесшовными переходами в кейсы.
Вчерашний пост с анонсом новых фич (которые, надо сказать, выглядят круто) от CPO Figma — и самый залайканный комментарий к нему 🤪
Коллеги тут запускают конкурс на создание маскота для RUNIT. Приходите участвовать 😉
RUNIT — это наш фестиваль IT и спорта, и ему нужен какой-нибудь обаятельный персонаж.
Это может быть кто угодно: гепард со смартфоном, ноутбук в кроссовках или супергерой в зеленом костюме. Главное — чтобы он олицетворял дух RUNIT: бег, движение, динамика и современные технологии.
Всего будет три призера, каждый получит подарок: за третье место 20к рублей, за второе — 30к, за первое — 50к.
Ну и приятный бонус: перс-победитель будет представлять фестиваль перед всей его многотысячной аудиторией.
Присылайте варианты на Illustrators.ru. Там же и все условия
Миленькие анимации иконок:
И немного о важности хорошего UX writing. ⌨️
Ещё один пример странного разлетающегося скролла.
А ещё тут забавный крутящийся лого и внезапный футер из капсул.
Ну и вообще ребята из агентства явно не отказали себе в возможности побеситься на своем сайте: в каждом разделе свои приколы: пляшущие майки в shop например
https://innoceanberlin.com/
О, к предыдущей анимашке попалась статья на медиум, о том как команда WISE делала анимацию для «отправить деньги калькулятор»
Если коротко, то долго, нудно и скрупулёзно:
– Разделили проект на 27 интерактивных состояний.
– Сначала разбили анимации по типу взаимодействия (переходы, пустые состояния и т.д.).
– Организовали взаимодействия по частоте использования (часто используемые — в приоритете).
– Создали motion tokens — стандартизированные значения для длительности, плавности и типов движения.
– Для каждой анимации описали:
— триггер (что запускает анимацию),
— длительность,
— кривую движения (easing),
— изменяемые свойства (положение, масштаб, прозрачность и др.).
– Декомпозировали все движущиеся элементы и описали их поведение по отдельности.
– Нарисовали таймлайны — визуальные шкалы времени для всех движений элементов на экране.
– Сделали style frames — статичные кадры с обводкой контейнеров компонентов для лучшего понимания их движения.
– Использовали единую терминологию между дизайнерами и разработчиками (чёткие названия элементов).
– Обеспечили поддержку доступности через настройку уменьшения движения (inclusive motion).
– Прототипы собирали в After Effects, чтобы быстро тестировать и согласовывать анимации.
– Передавали анимации разработчикам через:
— motion specs: текстовые описания триггера, длительности, easing-кривых, свойств движения,
— таймлайны: диаграммы синхронизации анимаций,
— style frames: пошаговые визуальные схемы компонентов,
— motion tokens: стандартные параметры для быстрой интеграции в код.