61090
Юрий @jvetrau Ветров собирает свежие статьи, инструменты, паттерны и тренды с 2009 года. 250 000 читателей на vc, VK и других каналах. Все выпуски — https://jvetrau.com/category/digest/ ВК — https://vk.com/pdigest РЕКЛАМЫ НЕТ.
Дайджест продуктового дизайна за октябрь 2025. Дизайн-ревью, навигационные приёмы, анимация, ИИ-прототипы, метрики дизайна, дизайн-системы, алгоритмический дизайн, «жидкое стекло», accessibility и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
Насыщенная мякоткой мини-подборка о дизайн-системах:
1. Ben Callahan «Maturing Design Systems»: Smashing Magazine готовят к выходу книгу.
2. Figma: Вот-вот запустит пачку фундаментальных улучшений работы с дизайн-системами.
Во-первых, гибкая работа с темами оформления на базе стандартных переменных.
Во-вторых, слоты в компонентах — это область внутри стандартной обвязки, в которой можно разместить плюс-минус любые элементы.
В-третьих, встроенный линтер проверяет макеты на соответствие дизайн-системе.
В-четвёртых, родной импорт/экспорт переменных.
А также визуальная привязка компонентов в Figma и коде, выход MCP-сервера из беты, генерация и импорт компонентов в Figma Make, улучшение производительности.
3. Nathan Curtis: nathanacurtis/slots-in-design-systems-f53698c2d745">Смысл слотов в компонентах. Как они позволяют добавить гибкости дизайн-системе и как их будет делать Figma.
4. Nathan Curtis: Подход с nathanacurtis/components-as-data-2be178777f21">абстрактным описанием компонентов дизайн-системы через структуру их свойств, стилей, состояний и вариантов. Это может позволить генерировать компоненты на основе такой спецификации для любых фреймворков, чтобы не создавать их вручную — аналогично идее с генераторами токенов.
Anova: Плагин от Nathan Curtis для Figma, который описывает спецификацию компонентов через структуру их свойств, включая состояния и варианты. nathanacurtis/analysis-of-variants-9e440c30b93e">Как он работает.
5. Storybook 10: Полный переход на версию ESM для модулей JavaScript помог снизить размер фреймворка. Удобная возможность посмотреть или отредактировать компонент в стороннем инструменте и другие улучшения.
6. Яндекс 360: Дизайн-команда рассказывает о своей дизайн-системе Орбита. Как она устроена, как создавалась, как развивается.
7. Razorpay: Процесс поддержки компонента. Это детальная памятка по всем этапам и краевым ситуациям.
8. Tony Ward: Размышляет на тему измерения главного показателя дизайн-системы — покрытия реальных продуктов. Его идея — визуально отмечать части экранов, которые используют компоненты, а не опираться на абстрактные метрики.
9. Figmentation: Плагин для Figma автоматически собирает спецификацию компонента на основе токенов.
10. Ness Grixti: Типичные проблемы с цельностью дизайн-системы, которые возникают по мере роста количества её пользователей среди продуктов.
#designsystems
Перезапуск дайджеста сильно затянулся, но уже совсем близко. Старый сайт работает как попало, а в новом «вот ещё последний баг и всё» никак не кончается. Но мы его заборем.
В общем, если на этой неделе (опять) не удастся и придётся делать ещё один последний™ костыльный выпуск на старом движке — вот вам тизер (по датам на нём видно, насколько всё это затянулось).
Это и новая платформа, и свежее визуальное представление, и самое главное — космически проще по трудозатратам на ведение для меня самого. Так что стандартная регулярность выпусков должна вернуться, а то сейчас аще погибнул в этом хаосе.
Скрещу пальцы и вы тоже, если можете.
Вот что нового собралось о пользовательских исследованиях и понимании пользователя:
1. Dovetail: Большое обновление ИИ-функций в базе знаний и инсайтов. Появились ИИ-агенты для автоматизированных операций вроде рассылки свежих инсайтов, а также генерация спецификаций и отчётов. Можно задавать сегменты пользователей, делать прототипы с помощью инструмента Alloy. Есть новые интеграции для импорта данных и привязки инсайтов к задачам в системах планирования. Интересно, как они описывают полный цикл работы над продуктом, в который Dovetail включён на основных этапах.
2. User Interviews: Новое ежегодное исследование о состоянии профессии пользовательского исследователя в 2025 году.
3. Mareike Grund, Ingo Totzke и Arnd Engeln: Попробовали изучить эмоцию от смены авто. Они сделали концепт приложения и замерили его разные варианты с точки зрения эмоциональной реакции.
4. NN/g: Как добавить в анкету для отбора респондентов вопросы для отбраковки неподходящих кандидатов.
5. Claire Lauer, Danielle Storey и Romit Soley: Сравнили описание персонажей на основе изучения одних и тех же пользователей силами экспертов и ИИ. Последний, ожидаемо, выдумывал, гиперболизировал и терял фокус. Хотя помог найти доп.информацию о тех респондентах, что сами забывали какие-то детали. Они назвали комбинированный подход «векторные персонажи».
6. Jim Lewis и Jeff Sauro: Особенности стандартизированного опросника SUPR-Qm для оценки интерфейсов мобильных приложений и сайтов.
7. Rajasi Desai: Метод визуальной карточной сортировки. Она помогает сгруппировать элементы интерфейсы не просто абстрактным списком, а в виде wireframe с местами-заглушками.
8. Adobe: Как устроены разборы проведённых экспериментов в команде growth.
9. Microsoft: Метод проектирования интерфейсов через повторяющиеся циклы, а не просто пути из точки А в точку Б.
10. Victor Yocco: Как можно исследовать доверие пользователей к ИИ-сервисам. А потом — повысить его.
11. Prama Ayalasomayajula: Как поменяла подход к поиску респондентов для пользовательских исследований среди водителей Uber в Индии. Она включилась в работу команды обслуживания водителей и это дало результат.
#research
Седьмой год я провожу исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные?
Такой рейтинг будет полезен рынку. Дизайнерам — лучше понимать, где есть хорошие вызовы и комфортная среда для профессионального роста. Компаниям и дизайн-командам — видеть, что нужно докачать.
Буду благодарен, если вы пройдёте опрос. Результаты исследования опубликую в январе. Вы найдёте отчёт в крупных дизайн-каналах и изданиях.
P.S. Результаты за 2024, 2023, 2021, 2020, 2019 и 2018.
Придётся выложить недочитанную подборку свежих интерфейсных паттернов и практик — шибко плотный поток. Во вкладках томится ещё больше:
1. ScreenBook: Коллекция примеров отечественных мобильных приложений для Android и iOS.
2. Jon Daiello: Необычный креативный метод подуктовой работы — обязательно сделать самый худший концепт реализации продуктовой идеи. Это позволяет не только расшатать мышление, но и лучше понять решаемую проблему.
3. Pricing Pages: Коллекция примеров интерфейсов страницы цен и тарифов.
4. Craig Abbott: Понятие «лучшие практики» на деле бывает сложно характеризовать — насколько такие дизайн-решения актуальны на текущий момент.
5. Анализ дизайна тонны японских сайтов. Почему они такие и чем отличаются от других стран.
6. Linear: Гайдлайны для интерфейсов ИИ-агентов.
7. Более гибкий подход к рекомендациям по улучшениям accessibility в продукте. Он не обязывает внедрить конкретные правки, а напоминает чего важно добиться.
8. A11Y Collective: Как учитывать accessibility при использовании видео на сайте.
9. Milan Balać: История ТВ — как менялись пульты дистанционного управления и базовые интерфейсные решения.
10. Natasha Tenggoro: Как делала прототипы работы с видео в Figma Buzz с помощью их же ИИ-инструмента Make.
11. Редактор HTML для мобильных. Как его проектировали и что из этого получилось.
12. MeasuringU: Новое сравнительное исследование американских сайтов по уходу за животными. Как пользователи оценивают их по метрикам UX-Lite, SUPR-Q и NPS.
#patterns
Чутка свежего о дизайн-системах:
1. tweakcn: Генератор тем оформления для фреймворка дизайн-систем shadcn/ui. Можно описать самому или сгенерировать с помощью ИИ.
2. Ness Grixti: Переосмыслила свой подход к со-авторам дизайн-системы среди продуктовых команд. Компании организованы и устроены совершенно по-разному и этот фундаментальный для дизайн-системы процесс должен быть гибким.
3. Ben Callahan: Тезисы из подкаста The Question, где говорили о расхождениях между дизайн-системой и продуктами. Почему важно воспринимать их как сигнал «команде нужна помощь», а не просто красную тряпку.
4. Brad Frost: История тематизации интерфейсов. Это выдержка из его курса по токенам.
5. Ben Callahan и Nathan Curtis: Обсуждали в подкасте The Question применение алгоритмического дизайна в дизайн-системах вместе со слушателями. Собрался неплохой набор основных тезисов.
6. Ness Grixti: Напоминает, что реальное внедрение дизайн-системы в продуктах требует много усилий и работы. И делится своим опытом из Wise.
7. Figma: Обзор ситуаций, где MCP-сервер инструмента облегчает работу над дизайн-системой.
8. Figma: Как унифицировали параметризацию всего и вся в архитектуре своих продуктов. И получили единый подход и для токенов, и для свойств компонентов.
9. Design system component audit and linting: Плагин делает аудит компонентов Figma — насколько хорошо они описаны и проработаны. А также делает линтинг параметров на предмет правильного использования токенов.
10. Создатели фреймворка shadcn/ui запустили свой MCP-сервер. Он позволяет работать с библиотекой компонентов — например, вставлять в проект, генерировать новые, искать и анализировать библиотеку в целом.
#designsystems
Плотный поток свежих материалов по пользовательским исследованиям. И это я ещё не всё непрочитанное разобрал:
1. NN/g: Бесценная статья с обзором типичных отговорок, по которым компании не проводят пользовательские исследования. Самое угарное, что некоторые из них вообще не изменились за 30 лет её опыта работы. Laura Klein помогает работать с такими возражениями.
2. Jim Kalbach: Обновил свою канву для описания Jobs to Be Done. И переименовал её в JTBD Hypothesis Canvas — он хотел явно указать, что этот инструмент призван только сформулировать гипотезы для полноценного пользовательского исследования, а не заменить его. Вторая статья раскрывает корневой процесс работы в деталях.
3. Colin Chapman: Пообщался с коллегами-исследователями. Он собрал общий срез настроений о текущих рисках и страхах вроде массовых сокращений и псевдо-исследований через ИИ.
4. NN/g: Дельная памятка по комбинации качественных и количественных исследований. Как они помогают лучше ответить на вопрос исследования и как правильно совмещать их.
5. Victor Yocco: Метод пользовательских исследований «волшебник из страны Оз». Как он помогает в том числе при работе над ИИ-агентами.
6. Jeff Sauro и Jim Lewis: Отличная памятка по подбору методов количественных исследований. На какие вопросы исследования лучше ответить ими.
7. NN/g: О концепции «цифровых двойников» — когда на основе данных о реальных исследованиях с реальными пользователем делается предположение о его поведении в других ситуациях. Это что-то между реальными валидными пользователями и фейковой затеей синтетических исследований — занятно, но рисково. Несколько примеров реальных исследований с таким подходом.
8. Альфа-Банк: Комбинация методов исследований для улучшения автоматизированных депозитных машинам (аппараты для приёма наличных от корпоративных клиентов).
9. Jim Lewis и Jeff Sauro: До какой степени можно менять формулировки в стандартизированных опросниках. Так, чтобы это не повлияло на валидидность результатов.
10. Контур: Основы статистики для пользовательских исследователей простым языком. Часть 4 про коэффициенты корреляции и часть 5 про работу с репрезентативностью и выбросами.
11. Jim Lewis и Jeff Sauro: Как упростили версию стандартизированного опросника SUPR-Q для исследования мобильных. Она сократилась до 5 вопросов.
12. NN/g: Советуют не отвечать на вопрос исследования по концепции дизайна простыми «да» или «нет». Иначе выйдет либо просто валидация заранее принятого продуктовой командой решения, либо отказ от всего решения (хотя там могло быть много рабочих частей).
#research
Дайджест продуктового дизайна за июль 2025. Сертификация по атомарному дизайну, фреймворк JTBD, формы, совмещение методов исследований, UX для кнопочных телефонов, менторство, алгоритмический дизайн, accessibility и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
В беготне давно не успевал собрать выпуск про алгоритмический дизайн, а тут ссылки как комары на болоте — плодятся армадой. Попробую упаковать эту сотню-другую в пару выпусков:
Взаимодействие с такими инструментами
1. Hardik Pandya: Шикарно разложил по полочкам, с какими сценариями использования MCP справляется хорошо, а где это бесполезный костыль. Он разделяет два режима работы — оркестровка разных инструментов и источников информации, а также инкрементальные доработки. Многие инструменты предполагают переключение между ними в рамках работы, что только усложняет жизнь.
Дизайн таких инструментов
1. Allen Pike: Анализирует интерфейсные паттерны ИИ-чат-ботов, которые делают общение с ними более гибким и интерактивным, чем простой обмен сообщениями.
2. Pete Koomen: Почему часть интерфейсов текущих ИИ-продуктов напоминает первые автомобили, имитирующие повозки с лошадьми. Он пробует предложить решение на примере генератора писем.
3. ServiceNow: Памятка по дизайну человеко-ориентированных ИИ-сервисов.
4. Kojo Osei: То, о чём давно нужно было сказать — во многих продуктах ИИ вызывается как отдельный режим, а не часть основных сценариев использования. Пользователям непонятно, что он делает и в целом режимы забывают включать.
Кейсы
1. Fabio Sasso: Навайбкодил свой простой инструмент дизайна — он накладывает эффект рифлёного стекла на фотографию. Как он это сделал.
2. Luke Wroblewski: Как устроен ИИ-чат/поиск на его сайте. На каких технологиях он написан.
3. Intercom: Хакатон, который помог прокачать навыки использования ИИ-инструментов. Это помогло запустить новый сайт дизайн-команды.
Инструменты дизайна
1. html.to.design: Плагин для импорта HTML-кода в Figma теперь умеет работать с Cursor и использовать протокол MCP.
2. Google Stitch: Инструмент алгоритмического дизайна создаёт дизайн и код для сайтов и мобильных приложений по макету или текстовому описанию. Они позиционируют его как способ сделать прототип или набросок продукта, а дальше дорабатывать его в профессиональном инструменте (кстати, можно экспортировать в Figma).
3. v0 Design Mode: ИИ-сервис для разработчиков Vercel v0 запустил режим дизайна. В нём можно корректировать макеты как в простом встроенном графическом редакторе без текстового запроса.
4. Точка AI: Генератор сайтов, логотипов и изображений от банка для предпринимателей.
5. Adobe Photoshop Harmonize: Быстрый способ вставить объект на фото, где инструмент сам сделает цветокоррекцию и докрутит освещение. Это сделано на базе эксперимента #Project PerfectBlend с Adobe MAX.
6. Control: Инструмент алгоритмического дизайна позволяет вайб-кодить эффектные сайты с анимацией.
7. Figma Make: Примеры прототипов, которые делают пользователи. Кстати, первую версию нового интерфейса работы с сетками они также набрасывали в нём. И советы по работе с инструментом: как описывать текстовые запросы, готовить макеты и компоненты, а также вообще планировать такие проекты.
8. Thiings: Инструмент алгоритмического дизайна позволяет сгенерировать коллекцию 3D-иконок/иллюстраций в своём стиле. Стиль настраивается из примеров. Можно создать новую иконку по текстовому запросу или взять уже доступный объект.
9. Weavy: Универсальный инструмент алгоритмического дизайна умеет соединять отдельные простые действия (сгенерировать, отредактировать фото или видео) в единую последовательность, чтобы получился нужный результат. Они подключают множество популярных моделей, которые можно использовать в любом порядке.
10. Manus: Генерирует изображения под конкретную задачу. Например, на основе фото комнаты подобрал мебель к ней из каталога IKEA и вставил её в помещение.
Шрифты
1. Monotype: Серия статей и экспериментов и шрифтовых дизайнеров из других словолитен вокруг генерации шрифтов и просто символов с помощью ИИ. Monotype развивают свой инструмент.
2. Несколько шрифтовых дизайнеров рассказывают о своих экспериментах по ИИ-генерации типографики. Пока они не очень практические, но возможны.
#ai #algorithms
Накопил плотную подборку о дизайн-менеджменте с прошлого раза:
1. Intercom: Как дизайн-команда перестроила свою работу в ИИ-эпоху. Как это меняет роль и дизайнера, и дизайн-менеджера.
2. Ricardo Vazquez: Как дизайн-команда Shopify замеряла производительность основных сценариев использования платёжных терминалов и оптимизировала их. А позже в Dropbox он настроил работу от проблем пользователей.
3. Nate Schloesser: Продолжает свою серию статей о том, как дизайнеру добиться влияния на продукт. Он пишет о реалистичном отношении и подходах.
4. Stay SaaSy: Критикуют дикую вещь — менеджеры всё чаще пишут обратную связь своим сотрудникам с помощью ИИ. Это полная профанация как процесса ревью, так и роли менеджера вообще. Не делайте так.
5. Dawn Ta: Необычный подход к выстраиванию работы команды пользовательских исследований. Она использует Value Proposition Canvas, чтобы сопоставить запросы продуктовых команд и возможности исследователей.
6. Michel Ferreira: Как может строиться взаимодействие лидера дизайна конкретного продукта и общего руководителя дизайна. Как подойти к пересечениям их зон ответственности.
7. Контур: Мнения пользовательских исследователей и менеджеров продуктов о том, каким должно быть взаимодействие между этими двумя ролями. И кто принимает решения в ходе работы над проектами. Сервисы для пользовательских исследований User Interviews и Heard провели опрос менеджеров продуктов на эту же тему.
8. Геннадий Мохов (Mos.ru): Подход к построению предсказуемого дизайн-процесса. Он также даёт шаблон карты здоровья процессов.
9. NN/g: Проблемы моделей зрелости дизайна, представленных в виде «лестницы». Во-первых, жихнь устроена не так и компании скорее находятся одновременно на нескольких уровнях. Во-вторых, рынок и сама компания меняются, так что они могут ходить и вверх, и вниз по этой лестнице.
10. Jose Coronado: Как он измерял и доказывал отдачу от вложений в дизайн-команду.
11. Colton Cox (IBM): Рассказывает о своём переходе на роль дизайн-менеджера. Как менялась его роль и вызовы.
И напомню про новый поток моего курса «Паттерны дизайн-менеджмента», который стартует 1 сентября. Записаться.
#management
Дайджест продуктового дизайна за июнь 2025. «Жидкое стекло», типы пользователей по опытности, анимация Material Design, метафоры, дизайн-менеджмент, взаимодействие менеджера продуктов и исследователя, алгоритмический дизайн, accessibility и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
Вести с полей пользовательских исследователей:
1. Colin Chapman: Разбирает нелепый оксюморон — синтетические данные опросов пользователей. Это нелепая затея, которая противоречит как самой идее опросов, так и эффективности получения нужных данных через имитацию опроса.
2. Jeff Sauro и Jim Lewis: Разбирают разные подходы к выборке респондентов для пользовательских исследований. Разные школы мысли подходят к вопросу по-разному и они пытаются разобраться, кто более прав.
3. Основатели сервисов для пользовательских исследований Maze, Sprig и UserZoom рассуждают о том, как меняются такие инструменты с помощью ИИ. И как вообще ускоряется цикл работы над продуктами.
4. Varshine Chandrakanthan и Rajasi Desai: Как используют ИИ-инструменты для ускорения быстрых итеративных исследований. Это оправдано там, где критична скорость, хотя и со многими оговорками. Ну и их советы по генерации текстов и изображений для выводов спорные.
5. Виталий Фридман: Толковая выжимка серии статей о разнице между данными, находками и инсайтами в качественных и количественных исследованиях.
6. Kyle Soucy: Генерация описания персонажей пользователей с помощью ИИ.
7. Jake Burghardt: Советы по использованию бизнес-версии ChatGPT для работы с базой данных проведённых пользовательских исследований.
8. Heard: Сервис для проведения коротких интервью с пользователями через ИИ-модератора без участия исследователя.
9. Контур: Основы статистики для пользовательских исследователей простым языком. Часть 2 про сравнение удовлетворённости пользователей и часть 3 про анализ взаимосвязи качественных переменных.
10. Dovetail: Новый способ поиска по инсайтам из пользовательских исследований — через ИИ-чат-бота. Помимо ответа на вопрос в свободной форме он показвыает конкертные цитаты пользователей.
Они также получили сертификацию ISO 42001, которая про их ответственную работу с ИИ как алгоритмами и данными.
#research
Новые книги о дизайне интерфейсов стали появляться реже с закрытием A Book Apart и выбыванием O'Reilly из жанра. Да и нелепый ИИ-FOMO парализовал многих сильных авторов, так что поток-ручеёк иссяк-занемог — копил эту мини-подборку чуть ли не год. Но не совсем засох:
1. Jake Burghardt «Stop Wasting Research» (Rosenfeld Media). Она посвящена базам знаний и инсайтов из пользовательских исследований (или репозиториям исследований).
2. Michele Williams «Accessible UX Research» (Smashing Magazine). Она посвящена пользовательским исследованиям accessibility в интерфейсах. Анонс.
3. Erin Malone «In Through the Side Door» (MIT Press). Она посвящена женщинам, помогавших становлению дисциплины проектирования взаимодействия.
4. Andrew Schall «The Persona and Journey Map Playbook» (Apress). О том, как заставить работать на практике персонажей и customer journey map. Это пошаговое руководство по созданию и внедрению этих методов.
5. Jake Knapp и John Zeratsky «Click». Она посвящена методу «foundation sprint», который предваряет дизайн-спринты от этих же авторов. Небольшая выдержка из неё от Lenny Rachinsky.
А вот что на подходе у Rosenfeld Media:
— Catt Small «The Staff Designer».
— Dane DeSutter и Stephanie Scopelitis «Body Talk».
— Savina Hawkins «Reimagining Research».
— Robert Stribley «Design for Privacy».
— Christopher Noessel «Designing Assistant Technology».
#books
Дайджест продуктового дизайна за май 2025. Material Design 3 Expressive, интерфейсные метрики, анализ анимации, локализация, концепты, алгоритмический дизайн, accessibility и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
Свежая мини-подборка свежего об интерфейсных паттернах и лучших практиках. Прочитал ещё не все открытые вкладки, но держите пока эти:
1. Navbar Gallery: Коллекция паттернов навигации в вебе.
2. Loadmore: Коллекция необычных видов взаимодействия в мобильных приложениях и сайтах.
3. Emil Kowalski (Linear): Показывает на примерах, как он балансирует анимацию интерфейсных элементов. Он показывает хорошую и плохую реализацию.
4. NN/g: Важность дизайна краевых ситуаций в жизни пользователей. Она приводит много таких примеров и даёт советы по ним.
5. Ke Lyu: Проанализировал настолки, в которые играет с сыном, по 10 эвристикам Нильсена. Получился необычный анализ.
6. Luke Wroblewski: Необычный способ встречи нового пользователя в продукте. ИИ создаёт первый документ на глазах пользователя и даёт возможность подправить его.
7. Steve Frenzel: Детальная инструкция по подготовке PDF с учётом требований accessibility.
8. A11y Collective: Советы по оформлению информации на сайте, которые помогают улучшить accessibility.
9, Jared Cunha: Попробовал писать ALT-тексты для изображений с помощью ИИ. За несколько итераций получилось вполне сносно.
10. Barclays: Принципы инклюзивного дизайна от команды банка.
11. MeasuringU: Новое сравнительное исследование сайтов международных банков. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
Переезд дайджеста на новый движок всё-таки случился. Запоздало и пока что с кучей косяков, недоделок и всего такого-эдакого, но больше ждать было анрил. Теперь всё это будет докручиваться уже на живом без наркоза, так что присылайте любую дичь, какую встретите.
Вот он, задержавшийся дайджест продуктового дизайна за сентябрь 2025. Автоматический анализ интерфейсов, профессия исследователя в 2025 году, интерфейсы ТВ, анимация, модель зрелости дизайна, дизайн-системы, алгоритмический дизайн, accessibility и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— Telegram
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
Кой-чего нового о дизайн-менеджменте:
1. Точка Банк: Процесс дизайн-ревью. Какую эволюцию он прошёл от централизованного к распределённому формату.
2. Matthew Strom-Awn: Природа качества в цифровых и физических продуктах. Он сравнивает два подхода — централизованный и децентрализованный.
3. NN/g: Ситуации, когда зрелость дизайна в компании проседает. Как их заметить и что делать в первую очередь.
4. Julie Zhuo: Вышло второе издание книги «The Making of a Manager». В ней появились главы про управление на удалёнке и в кризисные времена, а также учтено влияние ИИ.
5. Lynn Hunsaker: Своя версия UX/CX-метрик, завязаных на бизнес.
#designmanagement
Ещё немного свежих интерфейсных паттернов и лучших практик:
1. UX Ray 2.0: Baymard обновили свой инструмент автоматического анализа интерфейса сайта. Теперь он не только выдаёт рекомендации по улучшению, но и делает ранжированный по приоритетам план улучшений. И поможет сравниться с другими сайтами.
2. Milan Balać: Интерфейсные паттерны современных телевизоров. Как устроена навигация, представление информации и ввод информации на них.
3. Linear: Как они держат баланс анимации в интерфейсе. Так, чтобы она добавляла характера, но не отвлекала.
4. NN/g: Лучшие практики для интерфейсов мобильных приложений, которые управляют умными устройствами. Во второй статье разбирают процесс их настройки через приложение.
5. Markswebb: Хорошие интерфейсные паттерны, которые помогают покупателю сделать более правильный выбор. А значит — снизить возвраты, ведь ошибки при выборе являются одной из их главных причин.
6. Adobe Illustrator: Как команда раобтала над дизайном интерфейса быстрого пера.
7. Karan Rawal: Делится своим опытом дизайна интерфейсов информационных панелей, показывающих информацию в реальном времени.
#patterns
Дайджест продуктового дизайна за август 2025. Супер-эксперты-исполнители, дизайн-системы, пользовательские исследования, цифровые двойники и векторные персонажи, страницы тарифов, алгоритмический дизайн, accessibility и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
10 ноября стартует мой новый курс — «Копилот цифрового брендинга» вместе с Bang Bang Education. Он поможет связать бренд с интерфейсом — это задача, которую я решал в Muse Group (продукты Ultimate Guitar, MuseScore, Audacity и другие), Райффайзен Банке и Mail.ru Group.
За это время я описал и обкатал фреймворк, помогающий решить два главных разрыва:
1. Сначала между стратегией и визуальной концепцией. Они зачастую никак не связаны, а значит айдентика такого бренда не передаёт его суть. И работает в лучшем случае на самом базовом уровне визуальной целостности.
2. А потом — между концепцией и её масштабированием. Гайдлайны не получается применить на практике и они остаются пылиться на полке. А значит и значительная часть всего проекта по брендингу была сделана зря.
Этот фреймворк помог вести проекты с топовыми глобальными агентствами вроде Collins, Design Studio (теперь — Further) и Verve. На каждом из уровне фреймворка есть набор инструментов и шаблонов к ним. Они помогают связать все уровни работы над брендом. В том числе убрать разрыв между цифровым продуктом и его маркетинговой коммуникацией.
В начале года прошёл пилотный интенсив и я почувствовал там product-market fit. Увидел, что у студентов горят глаза в духе «наконец-то появилось что-то на тему, которую давно бедовая». И люди пришли с болями, которые решал я сам и которые в итоге привели к этому фреймворку. Очень похожий эффект был на первом потоке курса «Паттерны дизайн-менеджмента» — надеюсь, чуйка не ошибается.
Я постарался разложить пошаговый процесс работы над брендом на конкретные инструменты (их 26). К каждому из них идёт серия шаблонов, заполняя которые вы постепенно продвигаетесь к созданию того самого бренда, который выглядит, работает и ощущается цельно.
Я не буду учить вас делать конкретный визуальный стиль в конкретном инструменте дизайна. Но я научу вас тому, как найти этот стиль. А позже, при работе над любым стилем:
1. Убедиться, что он работает везде, в том числе в интерфейсе.
2. Он передаёт целевой характер. Так что получается тот самый эмоциональный дизайн.
Плотно фигачил всю весну и лето, чтобы довести курс до ума. И параллельно готовил черновик книги — он наполовину готов. Надеюсь принести ими ещё много пользы рынку и пользователям.
#branding
Чуток дизайн-менеджмента в новой мини-подборке свежего:
1. Hardik Pandya: Тоже пишет о роли супер-эксперта-исполнителя, которая становится возможной благодаря современным ИИ-инструментам. Эта роль имеет смысл не во всех компаниях, так что он перегибает палку с отменой дизайн-менеджмента. Но общий посыл про быстрые и компактные команды, где нужны генералисты — правильный.
2. Scott Sehlhorst: Побочки вайб-кодинга со стороны здорового продуктового процесса (и заодно критика модели «двойного алмаза»). Во-первых, это иногда приводит к появлению менеджера продуктов-диктатора, который приходит к команде с готовым решением — только раньше это был wireframe в Balsamiq, а теперь — интерактивный прототип из Lovable. А во-вторых — это фокусировка на текущем понимании проблемы пользователей, хотя она сама может потребовать многократного пересмотра после первого запуска.
3. Контур: Как наставничают младших пользовательских исследователей. Как она видит весь процесс и его ключевые этапы.
4. NN/g: Формальная оценка зрелости дизайна по их модели не всегда нужна. Это так — такая точность знаний мало что даёт, а вот усилий на неё уходит выше крыши. Оценка зрелости — важный индикатор здоровья дизайна, но для улучшений достаточно её более простого и дешёвого анализа.
5. Are Halland: Фреймворк Core для работы над продуктами. Он помогает лучше понять проблему, которую решает команда и проработать её решение.
6. Slack: Как организованы DesignOps в компании. Статья не сильно насыщена инсайтами, но в ней интересно использование самого мессенджера для поддержки полезных активностей.
#designmanagement
За месяц собрал чутка новья по лучшим интерфейсным практикам и паттернам:
1. NN/g: Принципы дизайна форм: структура, прозрачность, ясность и поддержка. Это пошаговая памятка, которая поможет разложить общую структуру и конкретные поля.
2. Гайдлайны accessibility WCAG, переписанные простым языком.
3. Creative Navy: Изучили информационную архитектуру в интерфейсах медицинского оборудования.
А ещё — как такие интерфейсы помогают пользователям разобраться в них.
4. Tom Barrasso: Как оптимизировать мобильные сайты для кнопочных телефонов. Их намного меньше смартфонов, но всё равно заметное количество.
5. NN/g: Ещё раз про то, почему важно сохранять место на странице, куда докрутил пользователь, если он возвращается назад. И приводит несколько ситуаций-исключений, где это не нужно.
6. Виталий Фридман: Памятка из полезных ссылок на тему адаптации мобильных интерфейсов для левшей.
7. A11Y Collective: Как учитывать accessibility при создании инфографики.
8. NN/g: Три вида микро-текстов в интерфейсах: информируют, влияют и помогают взаимодействовать. Как именно они используются.
#patterns
Продолжение выпуска об алгоритмическом дизайне, который засиделся в черновиках:
Accessibility
1. Scott Vinkle: Как использует ИИ-сервисы для анализа и улучшения accessibility.
Роль дизайнера
1. Ashish Bhatia: Природа и роль креативности в эпоху ИИ-инструментов дизайна.
2. NN/g: Считают ИИ дополнительным инструментом и не боятся за свою работу по дизайну интерфейсов. Она видят её шире, чем просто один этап, метод или итоговый документ.
Дизайн-процесс
1. NN/g: Как используют ИИ для проведения рабочих сессий. И сами, и вместе с остальными участниками. Продолжение.
Дизайн таких инструментов
1. Stephen P. Anderson: Фреймворк P.E.E.C.E. для понимания того, как ИИ-продукты и решения влияют на рынок и людей.
Игры
1. PixelLab: Инструмент алгоритмического дизайна для пиксельной графики в играх. Помогает создавать персонажей, локации и карты.
2. Genie 3: Модель Google для генерации интерактивных игровых миров.
3D
1. Cartwheel: Инструмент алгоритмического дизайна позволяет анимировать поведение манекена по текстовому описанию, панели настроек, библиотеке готовых движений или видео-примеру. Можно менять его одежду и в целом детали образа, загружать свою модель или генерировать её на основе изображения. А также дотюнивать детали анимации.
2. Meta 3D AssetGen 2.0: Вторая версия генератора 3D-моделей.
Презентации и книги
1. Manus: Научился создавать презентации — писать тексты, генерировать изображения и искать доп.информацию в интернете.
2. PageOn: Генератор презентаций по текстовому описанию.
3. Google Gemini: Генерирует детские книги с иллюстрациями на основе семейных фото и рисунков.
Видео
1. Storyboarder AI: Генератор раскадровок для видео и кино. Помогает делать наброски на основе текстового запроса или изображения, позволяет редактировать итоговый сценарий и детали каждого кадра, помогает подбирать локации.
Промдизайн
1. Arcade: Сервис алгоритмического дизайна с необычной концепцией — можно сгенерировать ювелирные украшения или декор для дома, а дальше реальные мастера доведут концепт до ума и изготовят в реальности.
Управление продуктами
1. Christina Wodtke: Ситуации в управлении продуктами, где ИИ может помочь. И, наоборот, превратить всё в профанацию.
Разработка
1. Replit Import: Может импортировать проект из Figma, Lovable и Bolt, а потом превратить макет в код или доработать уже существующий код.
2. Onlook: Генератор кода на основе макета. Макет можно докрутить в самом инструменте.
3. Addy Osmani: Предостерегает, что вайб-кодинг в чистом виде — это самый быстрый способ накопления технического долга, под которым востребованный продукт рухнет. Когда уместно вайбить и что нужно держать в голове.
4. Сергей Целовальников: Главная проблема дискурса о вайб-кодинге — работа цифрового инженера шире просто кодинга и как именно.
5. Diwank Tomer: Где реально можно использовать ИИ в разработке продуктов, а где нужны люди.
6. John Rush: Настроил хитрую связку разных ИИ-моделей, которые пишут ТЗ и перепроверяют его, затем пишут код на его основе и снова проверяют его друг за другом.
Другие обновления на рынке
1. MIT: Исследование компаний, которые внедряли ИИ. 95% из опрошенных не получили отдачи, потому что стандартные решения сложно докручивать под свои конкретные задачи.
2. MIT: Исследование, как общение с ИИ-чат-ботами влияет на жизнь пользователей. Чем дольше и глубже вовлечённость человека — тем больше негативных побочек вроде одиночества и эмоциональной зависимости.
3. Anthropic: Исследование 700 000 диалогов с Claude. Какие ценности транслирует чат-бот и какие вообще должен?
4. Спекулятивный концепт фигурного длинного тире, которое должно подсветить, что автор текста — человек. К сожалению, длинное тире попало под подозрение — генеративные тексты слишком часто используют его.
5. Всё больше университетов возвращается к письменным экзаменам, чтобы студенты не срезали углы через ИИ-сервисы.
6. Vogue: Разместили рекламу, где модель сгенерирована ИИ. Это вызвало к обильным полыханиям в сообществе.
#ai #algorithms
Пакет обновлений о связи бренда с интерфейсом:
1. Muse Group: Семейство музыкальных сервисов от американского агентства Collins. Шоурил, где показано приземление на интерфейсы. Я уже писал о том, как мы делали этот проект — но теперь появилось больше материалов.
2. Shuer Zhuo и Jeeyun Oh: Проверили серию гипотез о том, что большие скругления в интерфейсе добавляют теплоты, а значит и доверия. Они показали хорошую цепочку гипотез о характере выражения бренда в интерфейсе и методов их проверки. Хотя вывод про обязательность теплоты и мягкости слишком заряженный.
3. Solflare: Финтех от американского агентства Ragged Edge.
4. Jupi: Система поддержки принятия решений с помощью ИИ от британского агентства How&How.
5. HeadHunter: Сервис поиска работы от отечественного агентства ONY.
6. Lyft: Такси от британо-американского агентства Koto.
7. Big Cartel: Платформа электронной коммерции от британского агентства How&How.
8. Google Gemini: ИИ-помощник от американского агентства Porto Rocha.
9. Care: Каталог социальных работников от американского агентства Manual.
10. TripAdvisor: Каталог отзывов для путешественников от британо-американского агентства Koto.
11. Moonbeam: Web3-платформа от американского агентства View Source.
12. AlphaSense: ИИ-платформа от британского агентства Saffron.
13. Inbox Monster: Платформа email-маркетинга от голландского агентства Verve.
13. Adobe: Освежение бренда от британского агентства Mother Design (кейс почему-то пропал с их собственного сайта).
14. Streamtime: Сервис управления проектами от британского агентства NB Studio.
15. Grubhub: Сервис доставки еды, сделанный внутренними силами.
16. Shutterstock: Новый логотип.
#patterns
1 сентября стартует четырнадцатый поток моего курса о дизайн-менеджменте цифровых продуктов на Bang Bang Education.
На первых тринадцати отучились около 900 дизайн-директоров, дизайн-менеджеров, арт-директоров, ведущих дизайнеров, креативных директоров из многих отечественных (и нескольких международных) компаний: 1C, ABBYY, AIC, Ак Барс, Альфа-Банк, Apalon, App in the Air, Arrival, Aviasales, Avito, Avon, Badoo, BandLab, BBC, Билайн, БКС, Brainrocket, Брусника, ВТБ, Chatfuel, Clay, Cloud.ru, Газпром и Газпромнефть, de Bijenkorf, Delivery Club, Детский мир, Dodo Pizza, Домклик, ДОМ.РФ, EPAM, Exness, Foodplex, Freedom Bank, Group-IB, HeadHunter, Heads & Hands, Hoff, inDriver, JPMorgan Chase, Joom, Kaspi, Klarna, Комитет, Красцветмет, Купер, Леруа Мерлен, Литрес, Loóna, Луч, MacPaw, Mailchimp, Mail.ru Group, Манго Офис, Магнит, ManyChat, М.Видео, Медси, Microsoft, Miro, Модульбанк, МосБиржа, МТС, Naumen, Netcracker, НЛМК, Okko, OneTwoTrip, OpenWeb, Opera, Островок, Открытие, ОТП Банк, Ozon, PayPal, Петрович, ПИК, Pinkman, ПСБ, QIWI, Qlean, Работа.ру, Райффайзен Банк, Rambler Group, РБК, Readdle, Redmadrobot, Reg.ru, Ренессанс Страхование, РЕСО-Гарантия, restore, Росбанк, Россельхозбанк, Ростелеком, Rutube, S7, Самолёт, Сбер, Сибур, Ситимобил, Совкомбанк, Sokolov Jewelry, Спортмастер, Сравни.ру, Столото, Selectel, Semrush, Skyeng, Social Discovery Group, Softline, Tele2, Tengri News, Тинькофф, Трипстер, TomTom, Touch Instinct, Точка, Учи.ру, Уралсиб, Уралхим, Финам, ЦИАН, Эвалар, Эксмо, Uzum, Voximplant, Wargaming, Wildberries, Winline, Wrike, X5, Юрент, Yappy, Yota, Яндекс и многих других.
Курс и книга идеально работают вместе. Они построены на одинаковой теории (фреймворке), но курс добавляет к ней практику. Его результат — рабочая дизайн-стратегия, которая основана на проблемах и целях вашей компании. Я постепенно добавляю шаблоны для домашних заданий, которые здорово структурируют мысли (проверяю всё сам). Получается синхронно-асинхронный коучинг.
Это огромный массив знаний из 37 уроков на 10 часов — 32 паттерна и 5 обзорных уроков, а также несколько инструментов-приложений к ним (помогут подниматься по уровням зрелости). Курс идёт 4 месяца. Помимо видео-лекций есть домашние задания и вебинары после каждого блока.
На каждом потоке интересный состав участников, которые обмениваются своим личным опытом и решениями заданий курса. Самые вовлечённые студенты внедряли улучшения в дизайн-командах по ходу курса, так что к окончанию получили осязаемый выхлоп :)
Записаться.
#management
Немного свежего о дизайн-системах:
1. Brad Frost: Запустил сертификацию по своему фреймворку дизайн-систем «атомарный дизайн». Это курс, который подтверждает знания. Он также работает над вторым изданием своей книги.
2. Figma добавила в интерфейс эффект жидкого стекла, который точно повторяет гайдлайны Apple. Сами Apple выпустили официальный UI Kit для Figma.
3. Material Expressive 3: Как задавать свои стили анимации. Они будут переиспользоваться во всей дизайн-системе.
4. Magic Patterns: Инструмент алгоритмического дизайна может создать прототип сайта на основе текстового запроса, скриншота или просто скопировать существующий сайт. Он создаёт библиотеку компонентов, которые также можно генерировать и дорабатывать по текстовому запросу. Есть расширение для браузера, где можно выделить элемент на экране и создать компонент для него.
5. Colin Matthews: Инструкция по созданию прототипов для проверки продуктовых гипотез с помощью ИИ-инструментов. Он показывает, как сгенерировать компоненты разными способами и дальше собирать из них прототипы.
6. Storybook: Как работают новые встроенные тесты компонентов в версии 9. Они покрывают взаимодействие, визуал и accessibility.
7. DOC: Цель, смысл и природа целостности в дизайне. Что она даёт и для чего к ней нужно стремиться.
8. Obra: Библиотека иконок на React и Svelte, которую можно подключить к дизайн-системе.
9. SmoothUI: Фреймворк дизайн-системы на React и TailwindCSS, где компоненты мощно прокачаны анимацией.
10. 9ui: Фреймворк дизайн-системы на React на базе Tailwind. Он даёт компоненты без стиля, которые можно докручивать под себя.
11. Julia Wong: Токены для тактильной (haptic) обратной связи в млбильных приложениях.
#designsystems
Чемпионство по потоку свежих ссылок сейчас у интерфейсных паттернов и практик. Погнали:
1. NN/g: Рассматривать пользователей корпоративных приложений как либо новичков, либо экспертов — неправильно. Они предлагает другую категоризацию: Legacy (используют давно, но знают только самую базу), Legend (глубоко знают интерфейс) и Learner (эксперты в предметной области, но с интерфейсом ещё не работали). И дают советы на тему того, как помочь каждой группе.
2. Sharang Sharma: Типичные способы встроить ИИ-помощника в интерфейс — от небольшого окошка чата до полной интеграции в основное взаимодействие.
3. Luke Wroblewski пишет много и толково про паттерны ИИ-интерфейсов:
— Ограничения модели простого чата при взаимодействии с ИИ-продуктами. Он разбирает гибридные подходы, которые гибче и удобнее.
— Какими могут быть интерфейсы для управления сразу несколькими ИИ-агентами, которые выполняют множество задач. Он примеряет стандартные интерфейсные решения и рассуждает, как это могло бы работать.
— Многие популярные ИИ-сервисы при старте работ спрашивают пользователей, что они хотели бы сделать. Но пользователи сами до конца не знают, что умеют эти инструменты.
4. Casper Kessels: В деталях анализирует интерфейс Panorama i-Cockpit новых машин Peugeot.
5. Louis Charron: Роль метафор в интерфейсах и дизайне в целом. Почему они помогают человеку быстрее понять новую для себя вещь.
6. Design Beyond Barriers: Сборник принципов дизайна с учётом требований accessibility.
7. Stéphanie Walter: Прорва ссылок на гайдлайны, памятки, принципы и другие полезные материалы по дизайну для пользователей с особенностями восприятия.
8. Neurodiversity Design System: Коллекция принципов и гайдлайнов по дизайну для пользователей с особенностями восприятия.
9. David Hoang: Проводит параллель между управлением ИИ-агентами и стратегиями в реальном времени. В них много общего — пользователь отдаёт верхнеуровневые команды, не управляет каждой мелочью.
10. NN/g: Лучшие практики для обучения написанию хороших запросов в ИИ-чат-ботах. Они выделили несколько паттернов для разных ситуаций и показали примеры их реализации.
11. Ростелеком: Дизайн-команда пробует экспертную оценку интерфейса по известным эвристикам с помощью ChatGPT и Claude. Получается нестабильно, но эксперимент интересный.
12. NN/g: Как правильно суммировать отзывы пользователей в интернет-магазинах с помощью ИИ. Они собрали удачные и не очень примеры.
13. Jared Cunha: Как сделать удобное меню на сайте для пользователей с ограниченными возможностями, использующих навигацию с клавиатуры.
#patterns
И снова плотный список свежих интерфейсных паттернов и практик:
1. Motion Log: Сайт анализирует анимацию мобильных приложений и позволяет покадрово рассмотреть, что происходит при переходах.
2. Spotted in Production: Галерея примеров эффектной анимации в мобильных приложениях.
3. Automattic (создатели Wordpress): Как дизайн-команда работает с текстами в интерфейсе. Они всегда пишут первую версию текста сами, до подключения редакторов. И создали плагин для Figma в помощь.
4. Benji Taylor: Дизайн интерфейса необычного мессенджера Honk. Кладезь нетривиальных паттернов и анимационных приёмов.
5. Deliveroo: Как обновили анимацию отслеживания заказа под новую цветовую палитру и векторную графику.
6. Social Proof Examples: Коллекция примеров социального подтверждения в интерфейсах.
7. Microsoft: Как доработали каноническое меню «Пуск» для недавнего обновления Windows.
8. Adobe: Проектирование и дизайн интерфейса Firefly Boards. Как они упаковывали концепции алгоритмического дизайна простым языком.
9. Whitney Lewis: Толковый практический разбор примеров ALT-текстов для изображений на сайте. Она показывает, как правильно писать их для разных ситуаций.
10. NN/g: Интерфейсные паттерны, которые помогают бороться с расфокусом внимания в современном мире.
11. CTA Gallery: Коллекция примеров призывов к действию в интерфейсе — отдельных кнопок и цельных блоков.
12. Adobe: Редизайн интерфейса Premiere Elements, который не менялся 12 лет.
13. Отчёт о поддержке интернетом accessibility в письмах рассылки в 2025 году.
14. Экзон (продукт для строительных компаний): В деталях о работе над обновлённой «шапкой» в интерфейсе.
15. EatSleepPrototype: Галерея экспериментальных прототипов мобильных интерфейсов от разных дизайнеров (можно загрузить свой).
16. Markswebb: Проанализировали интерфейс вывода TON через Телеграм и подсветили основные проблемы.
#patterns
Понедельничный подгон свежего о дизайн-системах:
1. Figma: Запустили свой сервер для подключения через протокол MCP, который помогает ИИ-продуктам и сервисам общаться между собой. Например, редакторы кода VS Code с Copilot, Cursor, Windsurf и Claude Code могут собрать код на основе макетов. Помимо сборки прототипов это упрощает работу с дизайн-системой — вот, например, быстрое создание компонента в Storybook на основе его версии в Figma (на основе инструкции по настройке MCP Figma от Colin Matthews). MCP — одна из самых крутых вещей, которая случилась с интернетом за последние годы и Microsoft считает этот протокол новым HTTP за его простоту и масштабируемость.
2. Шикарная коллекция простых кусков интерфейса в виде wireframes, которые отлично подходят для документации дизайн-системы. Версия для Figma.
3. SAS: Мощный пример работы с локализацией в дизайн-системе в Figma. Помимо работы с текстом они адаптировали базовые токены вроде размеров, чтобы учесть особенности разных языков.
4. Diataxis: Фреймворк помогает грамотно структурировать и понятно писать гайдлайны и техническую документацию в целом.
5. Storybook 9: Встроили инструменты тастирования Vitest: тесты взаимодействия, accessibility и визуальные, а также сделали карту покрытия тестами. Так же ужали код наполовину, сделали работу с React Native удобнее и добавили глобальные состояния (например, можно посмотреть компонент в тёмной теме, нужном размере экрана или локали),
6. Adobe: Как работает дизайн-система Consonant для маркетинговых материалов, которая связана с их основной дизайн-системой Spectrum.
7. Brad Frost: Примеры ситуаций, которые может объединять дизайн-система. Разные продукты, подбренды, маркетинговые кампании, цветовые режимы, технологические фреймворки.
#designsystems