Июнь '25

Rosenfeld Media запустили единый портал ко всему своему багажу знаний — книги, записи выступлений на конференциях и вебинаров. Есть чат-бот, который помогает искать среди этого. Анонс.

Умер Bill Atkinson, один из ключевых людей в развитии интерфейсов. Он работал в Apple и помог создать графический движок QuickDraw для MacPaint, а также простую среду программирования HyperCard. Figma собрали принципы того, как он работал с дизайном и технологиями. В блоге Figma собрали его принципы рвботы над интерфейсами.

Манифест внимания к качеству и мастерству от Karri Saarinen, главы и со-основателя Linear. Это версия его выступления на Figma Config, доработанная для статьи. У них есть спец.проект с серией интервью на эту тему.

Eric Eggert разбирается, какие штрафы накладываются на компанию в ЕС, если она не поддерживают accessibility в своих продуктах. И кто временно освобождается от требований.

Liz Meyer пишет о роли супер-эксперта-исполнителя, которая стала регулярно появляться в последнее время. У неё есть как плюсы (большая зона ответственности), так и куча подводных камней (много побочной ответственности, которая отвлекает от дизайна).

Каталог MCP-серверов популярных продуктов с возможностью быстро подключиться к ним.

Отличная памятка Diwank Tomer о том, где реально можно использовать ИИ-инструменты в разработке продуктов, а где нужны люди.

Mike Schindler предлагает выдохнуть в ИИ-дискурсе вокруг дизайна и вести его взвешенно, без FOMO, буллинга и всего такого.

Экспериментальное приложение Google может примерить любую одежду на ваше фото. Оно также делает видео, чтобы показать всё в движении.

Генератор кода на основе макета. Макет можно докрутить в самом инструменте.

Вышла улучшенная версия генератора изображений Imagen 4 от Google. Например, он лучше работает с текстом — можно делать комиксы и открытки.

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

Luke Wroblewski рассказывает, как устроен ИИ-чат/поиск на его сайте. На каких технологиях он написан.

Hardik Pandya смотрит на весь цикл работы над продуктами и рассуждает, почему ИИ-сервисы уже неплохо работают «справа от кода», где проблема уже более-менее определена. И не сильно полезны «слева от кода», где работают с пониманием проблемы и путями её решения.

Несколько шрифтовых дизайнеров рассказывают о своих экспериментах по ИИ-генерации типографики. Пока они не очень практические, но возможны.

Серия статей и экспериментов Monotype и шрифтовых дизайнеров из других словолитен вокруг генерации шрифтов и просто символов с помощью ИИ. Monotype развивают свой инструмент.

Генератор раскадровок для видео и кино. Помогает делать наброски на основе текстового запроса или изображения, позволяет редактировать итоговый сценарий и детали каждого кадра, помогает подбирать локации.

Fabio Sasso навайбкодил свой простой инструмент дизайна — он накладывает эффект рифлёного стекла на фотографию. Как он это сделал.

Инструмент превращает обычный логотив в красочную 3D-версию. Он также генерирует дополнительную графику для соцсетей, магазинов приложений, презентаций и т.п.

Дизайн-команда Ростелекома пробует экспертную оценку интерфейса по известным эвристикам с помощью ChatGPT и Claude. Получается нестабильно, но эксперимент интересный.

ИИ-сервис для разработчиков Vercel v0 запустил режим дизайна. В нём можно корректировать макеты как в простом встроенном графическом редакторе без текстового запроса. Анонс.

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

Сервис ИИ-разработки Replit теперь может импортировать проект из Figma, Lovable и Bolt, а потом превратить макет в код или доработать уже существующий код.

Midjourney теперь может генерировать видео.

Инструмент алгоритмического дизайна позволяет сгенерировать коллекцию 3D-иконок/иллюстраций в своём стиле. Стиль настраивается из примеров. Можно создать новую иконку по текстовому запросу или взять уже доступный объект.

Zach Leach (глава дизайна сервиса генеративных презентаций Gamma) рассказывает, как команда использует алгоритмический дизайн на разных этапах работы. Анализ обратной связи пользователей, генерация иллюстраций и описание вакансий.

Hardik Pandya шикарно разложил по полочкам, с какими сценариями использования MCP справляется хорошо, а где это бесполезный костыль. Он разделяет два режима работы — оркестровка разных инструментов и источников информации, а также инкрементальные доработки. Многие инструменты предполагают переключение между ними в ракамх работы, что только усложняет жизнь.

Fast Company проанализировали вакансии для дизайнеров в США, чтобы оценить влияние ИИ на количество открытых позиций, зарплаты и требования. В целом всё достаточно позитивно.

Benji Taylor рассказывает о дизайне интерфейса необычного мессенджера Honk. Кладезь нетривиальных паттернов и анимационных приёмов.

Tanner Kohler продолжает рассказывать, как использует ИИ для проведения рабочих сессий. И сам, и вместе с остальными участниками.

Геннадий Мохов из Mos.ru описывает свой подход к построению предсказуемого дизайн-процесса. И даёт шаблон карты здоровья процессов.

Сервисы для пользовательских исследований User Interviews и Heard провели опрос менеджеров продуктов о том, каким должно быть взаимодействие между этими двумя ролями. И какие проблемы есть сейчас.

Катя Халитова из Контура собрала мнения пользовательских исследователей и менеджеров продуктов о том, каким должно быть взаимодействие между этими двумя ролями. И кто принимает решения в ходе работы над проектами.

Dawn Ta предлагает необычный подход к выстраиванию работы команды пользовательских исследований. Она использует Value Proposition Canvas, чтобы сопоставить запросы продуктовых команд и возможности исследователей.

Thom Rimmer (один из дизайн-директоров) рассказывает, как дизайн-команда Intercom перестроила свою работу в ИИ-эпоху. Как это меняет роль и дизайнера, и дизайн-менеджера.

Ricardo Vazquez рассказывает, как дизайн-команда Shopify замеряла производительность основных сценариев использования платёжных терминалов и оптимизировала их. А позже в Dropbox он настроил работу от проблем пользователей.

• Анимация пролёта объекта по сфере в браузере с помощью библиотеки GSAP.

Eric Bailey в деталях описывает особенности работы с ARIA в коде для поддержки accessibility. Он также приводит историю и ограничения.

Как Альфа-Банк использовал комбинацию методов исследований для улучшения автоматизированных депозитных машинам (аппараты для приёма наличных от корпоративных клиентов).

Советы Jake Burghardt по использованию бизнес-версии ChatGPT для работы с базой данных проведённых пользовательских исследований.

Jeff Sauro и Jim Lewis разбирают разные подходы к выборке респондентов для пользовательских исследований. Разные школы мысли подходят к вопросу по-разному и они пытаются разобраться, кто более прав.

Сервис для проведения коротких интервью с пользователями через ИИ-модератора без участия исследователя.

Dovetail добавили новый способ поиска по инсайтам из пользовательских исследований — через ИИ-чат-бота. Помимо ответа на вопрос в свободной форме он показывает конкретные цитаты пользователей. Они также получили сертификацию ISO 42001, которая про их ответственную работу с ИИ как алгоритмами и данными.

Varshine Chandrakanthan и Rajasi Desai рассказывают, как используют ИИ-инструменты для ускорения быстрых итеративных пользовательских исследований. Это оправдано там, где критична скорость, хотя и со многими оговорками. Ну и их советы по генерации текстов и изображений для выводов спорные.

Основатели сервисов для пользовательских исследований Maze, Sprig и UserZoom рассуждают о том, как меняются такие инструменты с помощью ИИ. И как вообще ускоряется цикл работы над продуктами.

Smashing Magazine выпускают книгу Michele Williams «Accessible UX Research». Она посвящена пользовательским исследованиям accessibility в интерфейсах. Анонс.

Colin Chapman разбирает нелепый оксюморон — синтетические данные опросов пользователей. Это нелепая затея, которая противоречит как самой идее опросов, так и эффективности получения нужных данных через имитацию опроса.

Как они расширили архитектуру слоёв, чтобы они могли генерировать и хранить код. Это новая функция, связывающая Figma, Figma Sites и Figma Make. Также сделали предустановку шрифтов Apple San Francisco.

Советы Alexia Danton по работе с Figma Make. Как описывать текстовые запросы, готовить макеты и компоненты, а также вообще планировать такие проекты.

Плагины:

• Hapticlabs: Позволяет прототипировать тактильную обратную связь.
• Ruri Shader: Добавляет текстуру жидкого металла.

Издательство Apress выпустило книгу Andrew Schall «The Persona and Journey Map Playbook» о том, как заставить работать на практике персонажей и customer journey map. Это пошаговое руководство по созданию и внедрению этих методов.

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

Stéphanie Walter собрала прорву ссылок на гайдлайны, памятки, принципы и другие полезные материалы по дизайну для пользователей с особенностями восприятия.

Kate Kaplan из Nielsen/Norman Group говорит, что рассматривать пользователей корпоративных приложений как либо новичков, либо экспертов — неправильно. Она предлагает другую категоризацию: Legacy (используют давно, но знают только самую базу), Legend (глубоко знают интерфейс) и Learner (эксперты в предметной области, но с интерфейсом ещё не работали). И даёт советы на тему того, как помочь каждой группе.

Библиотека иконок на React и Svelte, которую можно подключить к дизайн-системе.

Фреймворк дизайн-системы на React и TailwindCSS, где компоненты мощно прокачаны анимацией.

Julia Wong попробовала задать токены для тактильной (haptic) обратной связи в мобильных приложениях.

Команда Material Design показывает, как в Material Expressive 3 можно задавать свои стили анимации. Они будут переиспользоваться во всей дизайн-системе.

Встроили инструменты тастирования Vitest: тесты взаимодействия, accessibility и визуальные, а также сделали карту покрытия тестами. Так же ужали код наполовину, сделали работу с React Native удобнее и добавили глобальные состояния (например, можно посмотреть компонент в тёмной теме, нужном размере экрана или локали), Как работают новые встроенные тесты компонентов — они покрывают взаимодействие, визуал и accessibility.

Прокрутка глазами, поддержка контроллеров PS VR2 Sense.

Полезные видео для дизайнеров:

• Design widgets for visionOS
• Design hover interactions for visionOS

Традиционно всё это появится у массового пользователя в сентябре. Но бета-версия уже доступна в июле.

Фокус на прокачке поиска — он ищет по файлам, приложениям и сообщениям, может выполнять команды вроде «отправить письмо».

Полезные видео для дизайнеров:

• Make your Mac app more accessible to everyone

ИИ-помощник в тренировках Workout Buddy голосом напоминает про следующий этап и даже может поздравить.

Можно управлять уведомлениями с помощью поворота запястьем.

Планшет стал ещё ближе к компьютеру (хотя с ограничениями операционки это всё равно утыкается во много стен): меню как на MacOS, замусоренный окнами рабочий стол и expose как на MacOS. Некогда анти-компьютер с более простым взаимодействием навернул борща, оставшись в рамках ограничений своего форм-фактора.

Из полезных функций добавилось фоновое скачивание файлов и другие операции, просмотрщик всех PDF, более организованная работа с файлами

Полезные видео для дизайнеров:

• Elevate the design of your iPad app

Обычно в обзорах обновлений ОС у меня много скриншотов, но тут лучше смотреть видео-разбор визуального языка.

(Снова) сделали редизайн стандартных приложений фото. Ну и снова более лучший экран блокировки плюс фончики для чатов. Среди новых функций: visual intelligence может искать и отвечать на вопросы по тому, что сейчас видно на экране. И приложение Apple Games.

Дизайн-сообщество вовсю понеслось изучать, как это всё устроено и начало повторить кнопки и поверхности в Figma, а кто-то даже на чистом CSS.. Но позже Figma добавила прямо в интерфейс эффект жидкого стекла, который точно повторяет гайдлайны Apple. А вот официальные материалы:

• Обновлённые общие гайдлайны и раздел про материалы
• Официальный UI Kit для Figma
• Гайдлайны по внедрению жидкого стекла для разработчик

Полезные видео для дизайнеров:

• Meet Liquid Glass
• Get to know the new design system
• Say hello to the new look of app icons
• Design interactive snippets
• Create icons with Icon Composer
• What’s new in SF Symbols 7
• Design foundations from idea to interface
• Make a big impact with small writing changes
• Principles of inclusive app design
• Evaluate your app for Accessibility Nutrition Labels
• Customize your app for Assistive Access

Победители Apple Design Awards этого года.

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

Большие визуально-интерактивное обновление назвали «жидкое стекло» и это одно из ярчайших явлений в профессии за последние годы. «Liquid glass» — динамический материал, который используется для элементов управления и панелей. Логика сборки экранов при этом не сильно поменялась, но по факту это сильно больше, чем просто тема оформления.

Первая реакция у меня и многих обсуждающих этот дроп — откопали виртуальные тренды «стекломорфизм» и «нейроморфизм» прошлых лет, с опозданием скопировали Microsoft Fluent Design и вообще вернули 2007 с Windows Vista, а то и хуже — оттёрли нафталин с MacOS Aqua.

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

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

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

Приземление пока хромает — в реальных демках есть very somnitelnie resheniya или вообще лубок. Бесконечно уродливая идея с тематизацией иконок стала ещё позорнее. Хотя тот же iOS 7 был сыроват на старте, но за пару лет превратился в лучшую версию себя.

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

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

Luke Wroblewski пишет об ограничениях модели простого чата при взаимодействии с ИИ-продуктами. И разбирает гибридные подходы, которые гибче и удобнее.

Taylor Dykes и Katie Sherwin показывают, как правильно суммировать отзывы пользователей в интернет-магазинах с помощью ИИ. Они собрали удачные и не очень примеры.

Сборник принципов дизайна с учётом требований accessibility.