Тултип | UX UI

Компании ценят продуктовых дизайнеров, которые могут выйти за рамки макетов и сделать что-то не только про интерфейс — например, оформить пост в соцсети для своей компании или вообще продумать брендбук (если вы в стартапе, то все возможно). Для того, чтобы сделать подобные задачи нужно чувствовать, что такое бренд и, как он общается со своими пользователями — какие использует визуальные приемы, метафоры, формы и какой посыл хочет донести

В общем, к чему я. Нашел классный ресурс posts.design Тут можно посмотреть, как разные компании оформляют свои коммуникации в соцсетях.

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

💬 Тултип

Где найти качественные рефы на UI анимации?

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

Несколько сайтов, где можно подсмотреть хорошие примеры UI-анимаций и motion-паттернов:

60fps → 60fps.design
Design Spells → designspells.com
SeeSaw → seesaw.website
Spotted In Prod → spottedinprod.com
Viewport UI → viewport-ui.design
Motion Zajno → motion.zajno.com
Inspora Design → inspora.design
Motionin Design → motionin.design
Recent Design → recent.design
Post Design → posts.design
CollectUI → collectui.com

Хорошая практика, кстати, — это не просто смотреть на такие рефы, а открыть афтер и попробовать повторить то, что даже не представляешь, как сделать. По мере того как делаешь, становится понятно, что не так всё и сложно)

Где ещё ищете такие рефы? Делитесь 😠

💬 Тултип

B2TF — это небольшой каталог мобильных приложений с ретро / vintage-эстетикой : кассеты, старые камеры, калькуляторы, физические приборы, skeuomorphism и т. п. Неплохо для вдохновения 😌

Смотреть

💬 Тултип

Добавил рулетку в Базу знаний 🎲

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

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

Крутить бесплатно 7️⃣7️⃣7️⃣

💬 Тултип

Скелетон, лоадер или ничего?

Если загрузка занимает меньше ~400 мс, лучше ничего не показывать. Пользователь, скорее всего, даже не успеет заметить ожидание, а появившийся на долю секунды лоадер или скелетон только добавит мельтешения.

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

При этом стоит можно красиво избежать ситуации, когда скелетон появляется на милисекунду и выглядит как лишний пердеж в интерфейсе. Для этого стоит задать минимальное время отображения после появления — допустим, 600 ms

Если загрузка занимает несколько секунд и прогресс можно посчитать, лучше задуматься о progress bar — пользователю важнее понимать, сколько ещё ждать, чем просто видеть бесконечную анимацию

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

Небольшая подборка, чтобы углубиться в тему

Как проектировать скелетоны

Как выбрать оптимальный загрузочный экран

Как помочь пользователю ждать

Microsoft Fluent — Wait UX

UK Intelligence Community Design System — Skeleton

Nielsen Norman Group — Skeleton Screens

💬 Тултип

400+ полезных ресурсов для дизайнеров на одной доске

Последние три года я собирал полезные материалы на огромной доске в Miro. По сути, это карта компетенций из пяти сфер: UX, UI, исследования, продукт и коммуникация.

Теперь я перенёс всё на отдельный сайт. Можно перемещаться по карте, заходить в разные направления и искать нужное среди кучи сайтов, сервисов, библиотек и статей 🥸

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

Смотреть доску 🖥

💬 Тултип

Как вайбкодинг помогает на работе | Сложные прототипы

Вайбкодинг очень круто помогает при создании сложных и приближенных к реальности прототипов.
Сейчас мой пайплайн при проектировании выглядит так: пока я собираю макеты, Codex уже параллельно делает прототип будущего решения, используя дизайн-систему и текущие драфты. Затем я докручиваю прототип до финального варианта, который мы апрувнули, и выхожу с ним на тестирование пользователями.

Во время тестов собираю обратную связь и прямо между сессиями дорабатываю какие-то вещи. А в конце уже на основе готового прототипа финализирую макеты.

Прототип в Codex vs прототип в Figma:
1. Вы чаще задумываетесь над логикой решения, потому что своё решение приходится объяснять Кодексу. Так проще заметить разные нестыковки и корнер-кейсы.
2. Переделывание прототипа проходит очень быстро: все изменения можно просто наговорить Кодексу голосом и подождать, пока он их внесёт.
3. Можно реализовать максимально сложную логику с добавлением, редактированием и удалением различных сущностей.
4. Легче получить апрув от разработки на какие-то свистоперделки, потому что у вас уже есть рабочая реализация в коде, а логика решения выглядит более проработанной.
5. Можно накинуть Яндекс Метрику на прототип, отдать его пользователям на удалённое тестирование и смотреть результаты в Вебвизоре.

А вам вайбкодинг помогает в работе или пока что только развивает СДВГ? 🤪

💬 Тултип

Как вайбкод помогает на работе | Часть 1

Первый поинт — это передача в разработку кастомных компонентов.

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

Начали искать решение и пришли к идее сделать кнопку подвижной: пользователь сможет перетащить её в удобное место, после чего она примагнитится к ближайшему краю экрана.

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

Раньше для такой задачи пришлось бы отдельно собирать анимацию в Lottie или Rive, а затем объяснять разработчикам, как всё должно работать. В этот раз я отрисовал концепты в Figma, а интерактивную версию собрал уже в Codex.
Вся анимация работает на чистом CSS, без сторонних библиотек.

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

💬 Тултип