52. Dare to know

Yarik сделал крышесносную анимацию для приложения погоды!

Классно, что анимация затрагивает не только иконку с планетой, но и поле ввода: создаётся ощущение, будто его заполняет туман

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

53. Кастомизация трекера

Самое запоминающееся здесь — это загрузка календаря. Анимация выглядит оригинально и ненавязчиво — дни складываются, словно кирпичики в единую мозаику.
Плюс удачно сделано превью: в нём видно градацию дней по степени выполнения привычек, так в будущем проще отслеживать прогресс 👍

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

54. Появление контекст-бара

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

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

55. Тестирование чат-бота

Хочу обратить внимание на следующие детали:

1. Двухколоночная верстка — особенно удобна для сложных SAAS интерфейсов. В этом случае очень удобно настраивать параметры бота и сразу видеть отклик. Так, получаем бесшовный сценарий без лишних кликов и переходов

2. Серый фон формы настройки — она визуально выделяется и быстро считывается на фоне чата

3. Отображение тегов у сообщений бота — так легче отслеживать и настраивать технические параметры

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

56. Формирование папок

Для поддержания порядка на канвасе, можно не только группировать объекты, но и объединять их в папки.

Анимация этого процесса выглядит впечатляюще: при приближении выделенных изображений к папке они собираются вместе, а затем мгновенно «прыгают» внутрь!
При этом, это выглядит очень ненавязчиво и добавляет динамичности интерфейсу

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

57. Мгновенный перевод

Нравится анимация, в которой полоска «переводит» текст с китайского на английский. Эта визуальная метафора подчеркивает скорость и мгновенность действия, а также наглядно демонстрирует переход от «до» к «после»
А белый градиент, следующий за линией, дает больше глубины и динамики процессу

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

#анимации #карточка
@references_burrow

58. Разделение для изменения

Приятно находить все больше примеров редактирования какой-либо сущности без использования попапов и диалогов 😂

В данном случае чипс с временем, при клике на кнопку, распадается на 2 редактируемые составляющие: часы, минуты, а также на кнопку сохранения.

Этот прием можно классно масштабировать на более сложные сущности и использовать в формах и экранах с личной информацией

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

#анимации #редактирование
@references_burrow

59. Ховер на карточку

Самое частое дизайн-решение при ховере на сущность — едва заметное изменение фона. Решение бронебойное, но не всегда эстетически привлекательное

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

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

#карточка@references_burrow

60. Закрепление в дропдауне

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

Единственное, что смущает — механика применения этого закрепленного элемента. Кажется, прятать все в одну строчку и не давать возможности развернуть — неправильно

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

#анимации #дропдаун
@references_burrow

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

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

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

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

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

#анимации
@references_burrow

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

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

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

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

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

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

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

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

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

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

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

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

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

65. UI в мелочах

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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