Анализ анимации мобильных приложений, чек-лист дизайн-менеджера на первые полгода в компании, симулятор собеседований для UX/UI-дизайнеров: главное в дизайне за май
Традиционный дайджест Юрия Ветрова.
Material Design 3 в версии Expressive показали раньше срока — обычно все анонсы вокруг Android случаются на флагманской конференции Google I/O. Сделал обзор важного для дизайнеров.
Jeff Sauro и Jim Lewis подробно описывают особенности измерений и использования четырёх интерфейсных метрик из их каталога на более чем 70 возможных. Это процент успешного завершения сценариев, SEQ, время выполнения сценария и UX-Lite.
Инструкция Colin Matthews по созданию прототипов для проверки продуктовых гипотез с помощью ИИ-инструментов. Он показывает, как сгенерировать компоненты разными способами и дальше собирать из них прототипы.
Сайт анализирует анимацию мобильных приложений и позволяет покадрово рассмотреть, что происходит при переходах. В тему — галерея примеров эффектной анимации в мобильных приложениях SIP:
Ann DePaolo рассказывает, как устроены сессии дизайн-критики в IBM (они называют их D&UX Review) и почему в них комфортно участвовать даже не дизайнеру.
Мощный пример работы с локализацией в дизайн-системе в Figma от Rebecca Hemstad и Mark Malek из SAS. Помимо работы с текстом они адаптировали базовые токены вроде размеров, чтобы учесть особенности разных языков.
Симулятор собеседования для дизайнеров интерфейсов. Помогает подготовиться к настоящему, даёт советы по улучшению резюме.
Новости инструментов дизайна:
- Figma: Появился режим Draw для работы над векторными иллюстрациями. Он отличается основной панелью инструментов и упрощённой работой со слоями. Ещё — Grid для создания гибких сеток. Он работает по принципу CSS Grid и позволяет легко привязывать объекты к ячейкам.
- Figma MCP: Свой сервер для подключения через протокол MCP, который помогает ИИ-продуктам и сервисам общаться между собой. Например, редакторы кода VS Code с Copilot, Cursor, Windsurf и Claude Code могут собрать код на основе макетов. Помимо сборки прототипов это упрощает работу с дизайн-системой — вот, например, быстрое создание компонента в Storybook на основе его версии в Figma. MCP — одна из самых крутых вещей, которая случилась с интернетом за последние годы, и Microsoft считает этот протокол новым HTTP за его простоту и масштабируемость.
- Figma Sites: Конструктор сайтов, который заходит на территорию Webflow и Framer Sites. Можно добавить эффекты при прокрутке и наведении, свои курсоры. Есть интеграция с инструментом анимации Rive.
- Figma Make: Инструмент алгоритмического дизайна, который генерирует дизайн и код для него. Он может превратить макет в интерактивный прототип с анимацией, загрузить в него реальные данные и добавить адаптивность. Можно выделить любой элемент и описать словами, что хочется доработать в нём. Он также связан с Figma Sites, чтобы опубликовать готовый проект.
- Figma Buzz: Инструмент работы с множеством маркетинговых материалов, который облегчает создание всевозможных размеров и языковых версий. Основная идея — можно создать шаблоны макетов, контент в которых можно редактировать простыми полями ввода. А ещё — автоматически сделать сразу серию изображений на основе данных из таблицы. Ну и, само собой, можно генерировать изображения по текстовому запросу.
- Everywhere.Tools: Коллекция простых утилит для дизайнеров, делающих разные визуальные эффекты.
- Dithering Shader Demo: Дизеринг 3D-объектов в браузере.
- Magic Patterns: Инструмент алгоритмического дизайна может создать прототип сайта на основе текстового запроса, скриншота или просто скопировать существующий сайт. Он создаёт библиотеку компонентов, которые также можно генерировать и дорабатывать по текстовому запросу. Есть расширение для браузера, где можно выделить элемент на экране и создать компонент для него.
- Sketch: Athens Release. Они изменили схему названий релизов. В новом появились stacks (аналог auto layout в Figma), виды контейнеров frame как в Figma и graphics (для иконок, иллюстраций и другой графики), а также развитие командной строки.
- Google Stitch: Инструмент алгоритмического дизайна создаёт дизайн и код для сайтов и мобильных приложений по макету или текстовому описанию. Они позиционируют его как способ сделать прототип или набросок продукта, а дальше дорабатывать его в профессиональном инструменте (кстати, можно экспортировать в Figma).
- Cartwheel: Инструмент алгоритмического дизайна позволяет анимировать поведение манекена по текстовому описанию, панели настроек, библиотеке готовых движений или видео-примеру. Можно менять его одежду и в целом детали образа, загружать свою модель или генерировать её на основе изображения. А также дотюнивать детали анимации.
- Control: Инструмент алгоритмического дизайна позволяет вайб-кодить эффектные сайты с анимацией.
- Google Flow: Инструмент Google для создания фильмов на базе новой модели Veo 3. Он позволяет генерировать объекты и персонажей, а потом строить сцены из них и управлять камерой.
- Spline Hana: Инструмент анимации добавил возможность работать с интерактивными двухмерными концептами.
Allen Pike анализирует интерфейсные паттерны ИИ-чат-ботов, которые делают общение с ними более гибким и интерактивным, чем простой обмен сообщениями.
Журнал DOC пишет о концептах, простоте и целостности в интерфейсах и дизайне в целом.
Raghav Byala рассказывает об упрощении интерфейса для работы с анимацией в Adobe Express. Как они искали баланс между простотой и возможностью настройки. В соседних статьях рассказывают о мобильной версии Adobe Photoshop и Adobe Firefly Boards.
Kojo Osei говорит то, о чём давно нужно было сказать: во многих продуктах ИИ вызывается как отдельный режим, а не часть основных сценариев использования. Пользователям непонятно, что он делает, и в целом режимы забывают включать.
Коллекция примеров социального подтверждения в интерфейсах.
Как дизайн-команда Automattic (создатели WordPress) работают с текстами в интерфейсе. Они всегда пишут первую версию текста сами, до подключения редакторов. И создали плагин для Figma в помощь.
Виталий Фридман сделал толковую выжимку серии статей о разнице между данными, находками и инсайтами в качественных и количественных исследованиях.
Команда Stay SaaSy критикует дикую вещь — менеджеры всё чаще пишут обратную связь своим сотрудникам с помощью ИИ. Это полная профанация как процесса ревью, так и роли менеджера вообще. Не делайте так.
Matthew Rayback рассказывает, как работает дизайн-система Adobe Consonant для маркетинговых материалов, которая связана с их основной дизайн-системой Spectrum.
Дизайн-команда Microsoft рассказывает, как работала над доработкой канонического меню «Пуск» для недавнего обновления Windows.
Nate Schloesser говорит о том, что популярная в последние годы фраза «тебя заменит не ИИ, а другой специалист, который владеет ИИ» — достаточно бессмысленна. Он напоминает, что это один из инструментов и навыков, а не магия.
Peter Merholz описывает свой чек-лист для дизайн-менеджера на первые полгода в компании. Что критично сделать по организации команды и общим менеджерским вещам.
Читайте полную версию дайджеста в моём блоге. За свежими ссылками также можно следить в Telegram-канале или в группе во «ВКонтакте». Спасибо всем, кто помогает наполнять дайджест.