45. Концепт ввода в GPT
Не всегда же рассматривать только продуктовые референсы! Вот и я так подумала и принесла вам невероятно красивый шот😂
Очень нравится:
— следование метафоре: UI-ный прием подчеркивает лейбл инпута. Свет, выходящий из курсора, отлично подчеркивает магию — то, с чем ассоциируется ИИ
— детализация: помимо приятного градиента, автор сохранил физику источения света и добавил маленькие летающие мушки
💜 Источник: ссылка
#ИИ
@references_burrow
Не всегда же рассматривать только продуктовые референсы! Вот и я так подумала и принесла вам невероятно красивый шот
Очень нравится:
— следование метафоре: UI-ный прием подчеркивает лейбл инпута. Свет, выходящий из курсора, отлично подчеркивает магию — то, с чем ассоциируется ИИ
— детализация: помимо приятного градиента, автор сохранил физику источения света и добавил маленькие летающие мушки
#ИИ
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
❤32
46. Анимация папок
Случайно нашлись два референса, которые так хорошо дополняют друг друга!❤️
Речь пойдет об отображении содержимого папки — ведь это прекрасный пример скевоформизма.
По ховеру на контейнер вложенные файлы ненавязчиво выглядывают, добавляя интерактивность. Также автор выносит логотипы компаний на папку, что упрощает навигацию.Однако, что если, если пользователь работает исключительно с продуктами одной компании?
А чтобы красиво анимировать показ файлов, можно обратиться ко второму примеру. Он предлагает эффект немного «отгибающего» края папки, который добавляет больше реальности и глубину интерфейсу
💜 Источник: папки в темной теме и анимация файлов
#анимации #скевоморфизм #карточка
@references_burrow
Случайно нашлись два референса, которые так хорошо дополняют друг друга!
Речь пойдет об отображении содержимого папки — ведь это прекрасный пример скевоформизма.
По ховеру на контейнер вложенные файлы ненавязчиво выглядывают, добавляя интерактивность. Также автор выносит логотипы компаний на папку, что упрощает навигацию.
А чтобы красиво анимировать показ файлов, можно обратиться ко второму примеру. Он предлагает эффект немного «отгибающего» края папки, который добавляет больше реальности и глубину интерфейсу
#анимации #скевоморфизм #карточка
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤20
47. Анимация совершения транзакции
Нашла 2 референса на тему завершения транзакции в криптокошельке😐
Хочу отметить следующее:
— Физика процессов: при переходе к следующему шагу контейнер предыдущего шага как будто передаёт импульс, запуская анимацию следующего. Эффект смотрится свежо и динамично
— Объединение шагов в иконку успеха
— Взрывающийся градиент успеха: яркий градиент, который визуально "взрывается" при завершении операции, добавляет эмоциональности интерфейсу
💜 Источник: анимация шагов и анимация транзакции
#анимации #карточка
@references_burrow
Нашла 2 референса на тему завершения транзакции в криптокошельке
Хочу отметить следующее:
— Физика процессов: при переходе к следующему шагу контейнер предыдущего шага как будто передаёт импульс, запуская анимацию следующего. Эффект смотрится свежо и динамично
— Объединение шагов в иконку успеха
— Взрывающийся градиент успеха: яркий градиент, который визуально "взрывается" при завершении операции, добавляет эмоциональности интерфейсу
#анимации #карточка
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤28👍1
This media is not supported in your browser
VIEW IN TELEGRAM
48. Glass effect в Figma
До чего же зрелищный и яркий эффект!
Здесь автор использовал его на видео с цветами, сгенерированных в Midjorney🌸
💜 Источник: ссылка
#glassmorphism #карточка
@references_burrow
До чего же зрелищный и яркий эффект!
Здесь автор использовал его на видео с цветами, сгенерированных в Midjorney
#glassmorphism #карточка
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
❤30🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
49. Перелистывание журнала
Очередной пример сквоморфизма🔭
Я думаю, почти каждый хоть раз в жизни вел или начинал вести личный дневник! А создатели Yume — приложения для ведения записей — вдохновились механикой из реального мира и успешно перенесли её в цифру.
Так, каждый дневник открывается как маленькая записная книжка, где можно пролистать странички и найти нужную для начала записей. Получилось живо, уютно и по-настоящему
💜 Источник: ссылка
#скевоморфизм
@references_burrow
Очередной пример сквоморфизма
Я думаю, почти каждый хоть раз в жизни вел или начинал вести личный дневник! А создатели Yume — приложения для ведения записей — вдохновились механикой из реального мира и успешно перенесли её в цифру.
Так, каждый дневник открывается как маленькая записная книжка, где можно пролистать странички и найти нужную для начала записей. Получилось живо, уютно и по-настоящему
#скевоморфизм
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
❤11
This media is not supported in your browser
VIEW IN TELEGRAM
50. Сайдбар на магните
Приемы, основанные на физике процессов и гравитации, встречаются редко, но всегда выглядят эффектно и модно!
В браузере Dia боковой сайдбар «магнитится» и фокусится, когда к нему приближается переносимая вкладка. Такая анимация вносит дианимку и игру.
Также хочу заметить, при смене стейта сайдбар реалистично движется вслед за элементом! Это выглядит очень правдоподобно и свежо
Берем на заметку!
💜 Источник: ссылка
#анимации #скевоморфизм
@references_burrow
Приемы, основанные на физике процессов и гравитации, встречаются редко, но всегда выглядят эффектно и модно!
В браузере Dia боковой сайдбар «магнитится» и фокусится, когда к нему приближается переносимая вкладка. Такая анимация вносит дианимку и игру.
Также хочу заметить, при смене стейта сайдбар реалистично движется вслед за элементом! Это выглядит очень правдоподобно и свежо
Берем на заметку!
#анимации #скевоморфизм
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18🔥4👎1
This media is not supported in your browser
VIEW IN TELEGRAM
51. Группировка элементов на канвасе
Группировка — отличный способ избавиться от хаоса на холсте и структуировать идеи.
Здесь автор применяет ненавязчивую анимацию, будто элементы, притягиваясь друг к другу, складываются в единую папочку. Также удачно, что при раскрытии группы, она изолируется от остального содержимого — таким образом внимание пользователя сосредоточенно именно на ней🥰
💜 Источник: ссылка
#анимации
@references_burrow
Группировка — отличный способ избавиться от хаоса на холсте и структуировать идеи.
Здесь автор применяет ненавязчивую анимацию, будто элементы, притягиваясь друг к другу, складываются в единую папочку. Также удачно, что при раскрытии группы, она изолируется от остального содержимого — таким образом внимание пользователя сосредоточенно именно на ней
#анимации
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29❤12
This media is not supported in your browser
VIEW IN TELEGRAM
52. Dare to know
Yarik сделал крышесносную анимацию для приложения погоды!
Классно, что анимация затрагивает не только иконку с планетой, но и поле ввода: создаётся ощущение, будто его заполняет туман
💜 Источник: ссылка
#анимации #glassmorphism
@references_burrow
Yarik сделал крышесносную анимацию для приложения погоды!
Классно, что анимация затрагивает не только иконку с планетой, но и поле ввода: создаётся ощущение, будто его заполняет туман
#анимации #glassmorphism
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17❤7
This media is not supported in your browser
VIEW IN TELEGRAM
53. Кастомизация трекера
Самое запоминающееся здесь — это загрузка календаря. Анимация выглядит оригинально и ненавязчиво — дни складываются, словно кирпичики в единую мозаику.
Плюс удачно сделано превью: в нём видно градацию дней по степени выполнения привычек, так в будущем проще отслеживать прогресс👍
💜 Источник: ссылка
#анимации
@references_burrow
Самое запоминающееся здесь — это загрузка календаря. Анимация выглядит оригинально и ненавязчиво — дни складываются, словно кирпичики в единую мозаику.
Плюс удачно сделано превью: в нём видно градацию дней по степени выполнения привычек, так в будущем проще отслеживать прогресс
#анимации
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
❤17🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
54. Появление контекст-бара
Когда выделяешь объект, в нижней части экрана появляется контекстное меню, которое аккуратно расширяется от центра по мере добавления новых изображений.
Анимация выглядит очень мягко и ненавязчиво!
💜 Источник: ссылка
#анимации #меню
@references_burrow
Когда выделяешь объект, в нижней части экрана появляется контекстное меню, которое аккуратно расширяется от центра по мере добавления новых изображений.
Анимация выглядит очень мягко и ненавязчиво!
#анимации #меню
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
❤26🔥6👍2
55. Тестирование чат-бота
Хочу обратить внимание на следующие детали:
1. Двухколоночная верстка — особенно удобна для сложных SAAS интерфейсов. В этом случае очень удобно настраивать параметры бота и сразу видеть отклик. Так, получаем бесшовный сценарий без лишних кликов и переходов
2. Серый фон формы настройки — она визуально выделяется и быстро считывается на фоне чата
3. Отображение тегов у сообщений бота — так легче отслеживать и настраивать технические параметры
💜 Источник: ссылка
#форма #ИИ
@references_burrow
Хочу обратить внимание на следующие детали:
1. Двухколоночная верстка — особенно удобна для сложных SAAS интерфейсов. В этом случае очень удобно настраивать параметры бота и сразу видеть отклик. Так, получаем бесшовный сценарий без лишних кликов и переходов
2. Серый фон формы настройки — она визуально выделяется и быстро считывается на фоне чата
3. Отображение тегов у сообщений бота — так легче отслеживать и настраивать технические параметры
#форма #ИИ
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍1
This media is not supported in your browser
VIEW IN TELEGRAM
56. Формирование папок
Для поддержания порядка на канвасе, можно не только группировать объекты, но и объединять их в папки.
Анимация этого процесса выглядит впечатляюще: при приближении выделенных изображений к папке они собираются вместе, а затем мгновенно «прыгают» внутрь!
При этом, это выглядит очень ненавязчиво и добавляет динамичности интерфейсу
💜 Источник: ссылка
#анимации
@references_burrow
Для поддержания порядка на канвасе, можно не только группировать объекты, но и объединять их в папки.
Анимация этого процесса выглядит впечатляюще: при приближении выделенных изображений к папке они собираются вместе, а затем мгновенно «прыгают» внутрь!
При этом, это выглядит очень ненавязчиво и добавляет динамичности интерфейсу
#анимации
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
❤12👍4🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
57. Мгновенный перевод
Нравится анимация, в которой полоска «переводит» текст с китайского на английский. Эта визуальная метафора подчеркивает скорость и мгновенность действия, а также наглядно демонстрирует переход от «до» к «после»
А белый градиент, следующий за линией, дает больше глубины и динамики процессу
💜 Источник: ссылка
#анимации #карточка
@references_burrow
Нравится анимация, в которой полоска «переводит» текст с китайского на английский. Эта визуальная метафора подчеркивает скорость и мгновенность действия, а также наглядно демонстрирует переход от «до» к «после»
А белый градиент, следующий за линией, дает больше глубины и динамики процессу
#анимации #карточка
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18
This media is not supported in your browser
VIEW IN TELEGRAM
58. Разделение для изменения
Приятно находить все больше примеров редактирования какой-либо сущности без использования попапов и диалогов😂
В данном случае чипс с временем, при клике на кнопку, распадается на 2 редактируемые составляющие: часы, минуты, а также на кнопку сохранения.
Этот прием можно классно масштабировать на более сложные сущности и использовать в формах и экранах с личной информацией
💜 Источник: ссылка
#анимации #редактирование
@references_burrow
Приятно находить все больше примеров редактирования какой-либо сущности без использования попапов и диалогов
В данном случае чипс с временем, при клике на кнопку, распадается на 2 редактируемые составляющие: часы, минуты, а также на кнопку сохранения.
Этот прием можно классно масштабировать на более сложные сущности и использовать в формах и экранах с личной информацией
#анимации #редактирование
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
❤36🔥1
59. Ховер на карточку
Самое частое дизайн-решение при ховере на сущность — едва заметное изменение фона. Решение бронебойное, но не всегда эстетически привлекательное
В данном примере край иконки пулл-реквеста дополнительно подсвечивается зеленым, создавая эффект глубины🪷
💜 Источник: ссылка
#карточка@references_burrow
Самое частое дизайн-решение при ховере на сущность — едва заметное изменение фона. Решение бронебойное, но не всегда эстетически привлекательное
В данном примере край иконки пулл-реквеста дополнительно подсвечивается зеленым, создавая эффект глубины
#карточка@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8👍1
This media is not supported in your browser
VIEW IN TELEGRAM
60. Закрепление в дропдауне
Очень классная анимация айтема в дропдауне: по клику он, подпрыгивая, отображается в начале списка. Выглядит живо, ненавязчиво — самое то, чтобы применить у себя в проектах (:
Также закрепленный элемент выделяется на фоне остальных с помощью серого фона
Единственное, что смущает — механика применения этого закрепленного элемента. Кажется, прятать все в одну строчку и не давать возможности развернуть — неправильно
💜 Источник: ссылка
#анимации #дропдаун
@references_burrow
Очень классная анимация айтема в дропдауне: по клику он, подпрыгивая, отображается в начале списка. Выглядит живо, ненавязчиво — самое то, чтобы применить у себя в проектах (:
Также закрепленный элемент выделяется на фоне остальных с помощью серого фона
Единственное, что смущает — механика применения этого закрепленного элемента. Кажется, прятать все в одну строчку и не давать возможности развернуть — неправильно
#анимации #дропдаун
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
❤15👍5🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
61. Анимация реконнекта
Нравится, когда отображенным элементам дают вторую жизнь и трансформируют под необходимое состояние.
Хороший пример показан в Linear — здесь дизайнеры анимировали иконку статуса вместо замены её на лоадер.
Такая механика не привлекает внимания пользователя к внутреннему процессу, но при этом дает логичный и аккуратный отклик системы😍
💜 Источник: ссылка
#анимации
@references_burrow
Нравится, когда отображенным элементам дают вторую жизнь и трансформируют под необходимое состояние.
Хороший пример показан в Linear — здесь дизайнеры анимировали иконку статуса вместо замены её на лоадер.
Такая механика не привлекает внимания пользователя к внутреннему процессу, но при этом дает логичный и аккуратный отклик системы
#анимации
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤6👍5
This media is not supported in your browser
VIEW IN TELEGRAM
62. Свечение на мониторе
Недавно команда OpenAI представила новый нейросетевой браузер — Atlas.
В нем есть классный визуальный эффект: при ховере на стартовый экран, за его пределами появляются лучи, похожие на солнечный свет.
Честно говоря, такой приём вижу впервые. Но уже возникало ощущение, будто экран ноутбука сломался и поплыл✌️
А что вы думаете? Как вам такой эффект?
💜 Источник: ссылка
#анимации #ИИ
@references_burrow
Недавно команда OpenAI представила новый нейросетевой браузер — Atlas.
В нем есть классный визуальный эффект: при ховере на стартовый экран, за его пределами появляются лучи, похожие на солнечный свет.
Честно говоря, такой приём вижу впервые. Но уже возникало ощущение, будто экран ноутбука сломался и поплыл
А что вы думаете? Как вам такой эффект?
#анимации #ИИ
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14❤5💔3
63. Инлайн анимации
Становится все популярнее встраивать анимации инлайново в контейнер.
И это прекрасно, ведь так интерфейс становится чище без большого количества всплывашек и других отвлекающих элементов🐱
Принесла два таких примера — состояние после отправки отзыва и появление дополнительных опций.
Они прекрасны своей простотой и функциональностью, отлично подходят как для мобилы, так и для веба
💜 Источник: раз и два
#анимации
@references_burrow
Становится все популярнее встраивать анимации инлайново в контейнер.
И это прекрасно, ведь так интерфейс становится чище без большого количества всплывашек и других отвлекающих элементов
Принесла два таких примера — состояние после отправки отзыва и появление дополнительных опций.
Они прекрасны своей простотой и функциональностью, отлично подходят как для мобилы, так и для веба
#анимации
@references_burrow
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤33