Нора референсов

Настроение анимации

Казалось бы, что разница между изингами еле уловима или они совсем ни на что не влияют, но! При ближайшем рассмотрении и сравнении становится ясно, что этими настройками можно передать настроение экшена и определить, каким он будет: веселым или грустным

💜Источник: раз и два

#анимации
@references_burrow

Экран онбординга

До чего восхищают нетипичные экраны онбординга в мобильных приложениях! Всегда эмоциональные, яркие и очень запоминающиеся

💜Источник: ссылка

#анимации #вайбкод
@references_burrow

Паспорт пользователя

Визуализация аккаунта через метафору физического паспорта не нова, и простое повторение формы не вызывает столько эмоций.

Что удивляет на этом примере — это уровень детализации, начиная от плавной анимации «открытия» паспорта, заканчивая голографией.

И самое интересное — все это превратилось в жизнь благодаря вайбкоду (и снова он). Автор использовал Codex GPT 5.2 , а кто-то в комментариях даже поделился промптом 😍

В какое интересное время живем 🍿

💜Источник: ссылка

#анимации #вайбкод
@references_burrow

Шейдерные анимации

Автор реализует симуляторы физических явлений через шейдеры. Одно из них — переливающеяся жидкость в стакане. Выглядит очень захватывающе!

🔀Чтобы самостоятельно поиграться с этими анимации у себя на смартфоне, нужно скачать приложение на тест-флайт: ссылка
⭐️Посмотреть исходный код анимаций можно на гитхабе: ссылка
💜Источник: ссылка

#анимации
@references_burrow

Параллакс в карточке

Интерфейсные заимодействия на основе законов физики стирают грань между пользователем и приложением, делая его более реальным и эмоциональным. Интерфейс перестает быть плоским

Кажется, такой прием можно классно адаптировать под экраны для произведения яркого первого впечатления ❤️‍🩹

#анимации
@references_burrow

💜Источник: ссылка

Анимация смены категории в пайчарте

Динамичная анимация, подкручивающая график под нажатую категорию трат, которая еще круто подсвечивается!

Сначала показалось, что такое взаимодействие слишком яркое, но учитывая, что просмотр статистики — не самое частое действие, такой UI кажется уместным 👀

#анимации
@references_burrow

💜Источник: ссылка

Дорогие, поздравляю вас с наступившими Праздниками! Желаю всего самого красивого и покорения новых карьерных и личностных высот 🤟
Искренне благодарю вас за то, что остаетесь со мной на этом канальчике


А в эту рабочую неделю врываемся с новым референсом: концепт верхнего меню на MacOS

💜Источник: ссылка

69. Лоадеры

Использование кастомного лоадера, связанного с контекстом интерфейса, вместо привычного кружка делает приложение стильным, имхо

💜Источник: ссылка
#анимации

68. Превью карт

Понравился левый экран с деталями банковской карты — на нем представлен классный приём выделения объекта на однотонном фоне.

Карта будто светится изнутри, как северное сияние, создаёт эффект глубины и акцент на нейтральном фоне, без активного использования бордеров.

Что можно улучшить в рамках разгона:
— анимация сияния на карте сделает её более живой и эмоциональной
— плавный переход бирюзового фона в операции сделает экран более гармоничным
— контраст на экране замороженной карте, сообенно на кнопке разморозки, сделают страницу более легкой к восприятию и пониманию CTA

💜Источник: ссылка
#карточка

67. Первое впечатление

Редко встретишь такие приложения, которые с первого захода забирают все твое внимание и не оставляют без эмоций.
В Genie AI дизайнеры постарались сделать целое представление вместо базового онбординга — такое не оставляет равнодушным

💜Источник: ссылка
#анимации #онбординг

66. Бесшовный онбординг

Иконки статусов активности плавно перестраиваются с экрана онбординга на выбор и настройку

💜Источник: ссылка
#анимации
@references_burrow

65. UI в мелочах

Все мы привыкли, что индикаторы загрузки по типу лоадеров — яркие четкие элементы, но а что, если добавить немного блюра?

Тогда получится достаточно интересный эффект мягкости, идеально подходящий для карточек и маленьких контейнеров

💜Источник: ссылка
#анимации
@references_burrow

64. Анимация вместо скелетона

Наткнулась на занимательную концепцию — использование анимацию пересчета данных вместо скелетона.

С одной стороны, тема достаточно бодрая, так как делает интерфейс разнообразнее и живее

Но с другой стороны, есть серьезные переживания, что эта механика при неправильном использовании сделает интерфейс заметно тяжелее и хаотичнее

Поэтому делаю вывод, что такое взаимодействие стоит использовать в каких-то больших элементах, которые являются главным якорем

💜Источник: ссылка
#анимации
@references_burrow

63. Инлайн анимации

Становится все популярнее встраивать анимации инлайново в контейнер.
И это прекрасно, ведь так интерфейс становится чище без большого количества всплывашек и других отвлекающих элементов 🐱

Принесла два таких примера — состояние после отправки отзыва и появление дополнительных опций.

Они прекрасны своей простотой и функциональностью, отлично подходят как для мобилы, так и для веба

💜Источник: раз и два

#анимации
@references_burrow

62. Свечение на мониторе

Недавно команда OpenAI представила новый нейросетевой браузер — Atlas.

В нем есть классный визуальный эффект: при ховере на стартовый экран, за его пределами появляются лучи, похожие на солнечный свет.

Честно говоря, такой приём вижу впервые. Но уже возникало ощущение, будто экран ноутбука сломался и поплыл ✌️

А что вы думаете? Как вам такой эффект?

💜Источник: ссылка

#анимации #ИИ
@references_burrow

61. Анимация реконнекта

Нравится, когда отображенным элементам дают вторую жизнь и трансформируют под необходимое состояние.

Хороший пример показан в Linear — здесь дизайнеры анимировали иконку статуса вместо замены её на лоадер.

Такая механика не привлекает внимания пользователя к внутреннему процессу, но при этом дает логичный и аккуратный отклик системы 😍

💜Источник: ссылка

#анимации
@references_burrow