Тултип | UX UI

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

💬 Тултип

Плагин в Figma, который я использую каждый день — SBOL Typograph. Проставляет неразрывные пробелы и убирает висячие предлоги, а также обогащает текст буквой ё, кавычками «ёлочками» или „лапками“. Респект команде Сбера 💳

📱 Внедряем в свой воркфлоу тут

💬 Тултип

Очень приятный портфель. Отзывчивый интерфейс, прям хочется потыкаться. Самое главное — ничего лишнего 👌

Потыкать 👉

💬 Тултип

Как собрать качественную ленту в тг по дизайну?

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

В нашей ленте Ваня из Т Банка 💛устраивает дизайн-челленджи, Руслан из БКС 💎 рассказывает про прототипирование с помощью Claude Design, а Ксюша из Meta* — о том, на что обращает внимание при найме дизайнеров в корпорацию

Опытные дизайнеры из ❤️ 🌾 🧲 👍 и других топовых команд рассказывают про рабочие процессы, делятся опытом и лайфхаками

Каждый точно найдёт здесь что-то полезное для себя 😙

Добавить Дизайн Ленту



*Та самая, деятельность которой запрещена в РФ

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

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

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

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

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

💬 Тултип

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

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

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

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

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

💬 Тултип

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

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

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

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

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

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

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

💬 Тултип

Делюсь приятной новостью

Уже 3 месяца я работаю в Альфа Банке ❤️ Тружусь над аналитическим продуктом Альфа Метрика

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

💬 Тултип

Насколько твой макет грузит мозг?

Интерфейс может выглядеть аккуратно, но при этом заставлять пользователя запоминать лишнее, бояться ошибок и каждый раз искать нужное действие. В Контуре собрали чек-лист, который поможет проверить продукт на когнитивную нагрузку — сохраняйте и прогоняйте по нему свои макеты 🥸

Чекаем здесь

💬 Тултип

Где искать скиллы для агентов?

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

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

mcpservers.org
skills.sh
officialskills.sh
skillsmp.com
skillsdirectory.com

Сохраняй себе и делись с другими ✨

💬 Тултип

Еще один полезный плагин для работы — Изи спека. Выбираешь компонент и он составляет подробное описание его верстки и состояний для разработчика.

Есть несколько режимов: обычная спека для описания элемента, «Живая Спека» для быстрых замеров прямо на канвасе, «Апдейт» для сравнения состояния «до» и «после», «Заметки» для комментариев к элементам и «Замеры» для точечного описания отдельных параметров — например, ширины, высоты, отступов или расстояний между элементами

📱 Попробовать тут

💬 Тултип

Сделал виджет для фигмы

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

Механика простая: добавляете виджет в макет и проходите по чек-листу

Внутри две части:
Дизайн-чек — помогает проверить решение на логику и смысл, а также убрать все лишнее

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

Виджет помогает сделать решение более собранным: не просто красивым, а осмысленным, понятным и нормально подготовленным к передаче в разработку. Чтобы меньше ловить лишние вопросы и быстрее двигаться

Забирайте в свои макеты и делитесь фидбеком — буду докручивать ✍️

Посмотреть виджет 🖥

💬 Тултип

Порой хочется просто полистать красивую дизайнерскую ленту без конкретной цели — просто поймать вдохновение, посмотреть хорошие работы и немного отвлечься от бесконечных историй про Claude Code, агентов и «сделал аналог YouTube за 5 минут».

Для таких случаев сохранил себе searchsystem.co — приятная подборка работ и референсов, в которой можно зависнуть на вечер

💬 Тултип

Дизайн чек и технический чек

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

Технический чек — это уже другая история. Главный вопрос: достаточно ли информации, чтобы команда разработки реализовала решение без догадок?
Тут я насобирал несколько заметок на эту тему:
— Чеклист при финализации макетов: сетки, адаптивность, графика, анимации, UI-kit и все состояния компонентов
— Как правильно передавать макеты в разработку от Лемана Тех
— Ещё один взгляд на тему передачи макетов
— Пошаговый гайд от Selectel

Всё это одинаково полезно как при проверке чужого, так и при самопроверке своих творений

Есть ли у вас свой чеклист при проверке макетов? Делитесь в комментах 👀

💬 Тултип