Дайджест продуктового дизайна
53.1K subscribers
122 photos
19 videos
651 links
Юрий @jvetrau Ветров собирает свежие статьи, инструменты, паттерны и тренды с 2009 года. 250 000 читателей на vc, VK и других каналах.

Все выпуски — https://jvetrau.com/category/digest/
ВК — https://vk.com/pdigest

РЕКЛАМЫ НЕТ.
Download Telegram
Малышечная подборка свежего о дизайн-системах:
 
1. Nathan Curtis: Как могут упроститься параметры компонента в Figma благодаря появлению слотов. Он разобрал несколько примеров — стало намного легче работать.

2. Nathan Curtis: Как слоты в компонентах Figma помогут починить костыли — когда какой-то компонент содержит условный список дочерних (например, элементы списка или вкладки). В слотах можно добавить ровно нужное количество элементов для текущей задачи.
 
3. Ben Callahan: Рассуждает о целостности дизайн-системы. Зачем именно она нужна и когда это идёт во вред продуктовой линейке.
 
4. PJ Onori: Рассуждает о распределённой модели поддержки дизайн-системы, когда люди в разных частях компании могут добавлять что-то в неё. По его опыту это работает в основном для небольших команд.
 
5. IBM: Как дизайнеры генерируют прототипы с помощью ИИ, используя дизайн-систему Carbon

6. Tool UI: Коллекция компонентов дизайн-системы для ИИ-интерфейсов на базе shadcn/ui, Tailwind и Radix.
 
#designsystems
17👍6
1 апреля стартует второй поток моего нового курса — «Копилот цифрового брендинга» вместе с Bang Bang Education. Он поможет связать бренд с интерфейсом — это задача, которую я решал в Muse Group (продукты Ultimate Guitar, MuseScore, Audacity и другие), Райффайзен Банке и Mail.ru Group. А теперь и в Точка Банк.
 
За это время я описал и обкатал фреймворк, помогающий решить два главных разрыва:
1. Сначала между стратегией и визуальной концепцией. Они зачастую никак не связаны, а значит айдентика такого бренда не передаёт его суть. И работает в лучшем случае на самом базовом уровне визуальной целостности.
2. А потом — между концепцией и её масштабированием. Гайдлайны не получается применить на практике и они остаются пылиться на полке. А значит и значительная часть всего проекта по брендингу была сделана зря.
 
Этот фреймворк помог вести проекты с топовыми глобальными агентствами вроде Collins, Design Studio (теперь — Further) и Verve. На каждом из уровне фреймворка есть набор инструментов и шаблонов к ним. Они помогают связать все уровни работы над брендом. В том числе убрать разрыв между цифровым продуктом и его маркетинговой коммуникацией.
 
Я постарался разложить пошаговый процесс работы над брендом на конкретные инструменты (их 26). К каждому из них идёт серия шаблонов, заполняя которые вы постепенно продвигаетесь к созданию того самого бренда, который выглядит, работает и ощущается цельно.
 
Я не буду учить вас делать конкретный визуальный стиль в конкретном инструменте дизайна. Но я научу вас тому, как найти этот стиль. А позже, при работе над любым стилем:
1. Убедиться, что он работает везде, в том числе в интерфейсе.
2. Он передаёт целевой характер. Так что получается тот самый эмоциональный дизайн.
 
На первом потоке и интенсиве отучились арт-директоры, дизайн-директоры, креативные директоры, ведущие дизайнеры из отечественных компаний: 2GIS, Aviasales, Дом.ру, Lamoda, Mos.ru, МТС, Ozon, Pinkman, Райффайзен Банк, Ренессанс Страхование, Спортс.ру, Циан, X5 и других.
 
Кстати, первый черновик книги на эту тему готов. Надеюсь принести ими ещё много пользы рынку и пользователям.
 
#branding
🔥148🤔1
Немного свежего о лучших интерфейсных паттернах и практиках:
 
1. Baymard Institute: Плагин для Figma на основе своего ИИ-анализатора интерфейсов UX-Ray. Он сопоставляет ваш макет с паттернами и лучшими практиками из их гигантской базы знаний.
 
2. Lazyweb: Сервис помогает быстро анализировать экраны и сценарии мобильных приложений в нужной отрасли. Это связка классической коллекции паттернов и гибкого ИИ-поиска по ней.
 
3. Victor Ayomipo: Памятка по психологии и дизайну интерфейса мотивационной системы streaks для пользователей.
 
4. NN/g: Памятка о проектировании полезных уведомлений для устройств умного дома. Они могут быть реактивными, проактивными и оптимизационными.
 
5. NN/g: Несколько простых интерфейсных паттернов в ИИ-чат-ботах, которые помогают пользователям общаться с ними. Это чекбоксы и варианты выбора из списка в Google и Claude — вроде бы банальные, но очень уместные в контексте задачи.
 
#patterns
🔥21👍53
Дайджест продуктового дизайна за февраль 2026. Слоты в дизайн-системах, внедрение рекомендаций из пользовательских исследований, дизайн ИИ-агентов, разбор итогов проекта, техническая подкованность пользователей в ИИ, алгоритмический дизайн и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
vc.ru
Дизайнерс
ВКонтакте
RSS
🔥112
Что там свежего по пользовательским исследованиям? Нормально так:
 
1. User Interviews: Каталог инструментов для пользовательских исследований за 2026 год. В нём около 800 инструментов.
 
2. Cisco: Фреймворке RAS (Recommendation-Adoption Score). Он помогает отслеживать реальное внедрение рекомендаций из пользовательских исследований.
 
3. Steve Bromley: Уровни зрелости компаний в отношении игровых тестов. Как они проходят на каждой стадии.
 
4. Jeff Sauro и Jim Lewis: Опыт использования ИИ в исследованиях. Насколько он подходит для ролей помощника, аналитика и пользователя.

5. NN/g: Концепция практический значимости в дополнение к статистической значимости. Как они балансируют друг друга и помогают принять решение о запуске эксперимента.

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

7. User Interviews: Подборка материалов сервиса по использованию ИИ в исследованиях.

8. NN/g: Методологические ошибки, которые есть в популярных инструментах для исследований. Важно помнить о них при работе.
 
#research
17
Свежее об алгоритмическом дизайне. Фокус на фокусном, чтобы не размазывать на два выпуска:
 
Взаимодействие с такими инструментами
1. NN/g: Техническая грамотность пользователей при использовании ИИ-инструментов. Они выделяют 4 группы по опытности и осознанности.
 
2. NN/g: Исследование поискового поведения пользователей в ИИ-чат-ботах. Когда они доверяют их результатам, а когда идут в классические поисковики.
 
Инструменты дизайна
1. Google Stitch: Обновился. Теперь это привычный бесконечный артборд, а также дизайн-система через DESIGN.MD. Генерировать можно по текстовому запросу или картинке.
 
2. ai.to.design: Плагин для Figma позволяет генерировать дизайн по текстовому запросу. Можно выбрать одну из популярных моделей. Макеты можно докручивать самостоятельно там же в Figma.
 
3. Reve: Инструмент алгоритмического дизайна позволяет создавать свои эффекты для обработки графики. В статике и анимации, с управлением параметрами.

4. Krea Realtime Edit: Появилось редактирование и генерация изображений в реальном времени. Можно наброском показать, что нужно добавить — и оно моментально появляется.
 
5. Google Nano Banana 2: Вышла новая версия модели. Повысили точность всего — сохранения вида персонажей и объектов, текста и т.п.

6. Adobe Firefly: Можно тренировать на своём собственном стиле.

7. Raelume: Нодовый инструмент алгоритмического дизайна, который объединяет много ИИ-моделей и способов работы с ними.

8. YouArt: Ещё один нодовый инструмент алгоритмического дизайна.

9. Penpot: Запустили свой MCP-сервер. Обзор того, что он умеет.

10. Google Pomelli: Может собрать фотосессию на основе фото товара.
 
11. Figma: Интегрировалась с Claude Code. Можно превратить сгенерированный код в макеты сценария и наоборот.

12. Variant: Бесконечная лента примеров дизайна для вдохновения, которые генерируются ИИ по текстовому запросу.

13. Claude: Научился создавать диаграммы и графики прямо внутри чата.
 
14. Sketch: Примеры того, что можно делать благодаря MCP-серверу.
 
Дизайн таких инструментов
1. Victor Yocco: Паттерны взаимодействия с ИИ-агентами на основе своей серии предыдущих статей. Как они должны действовать перед, во время и после выполнения задачи пользователя.

2. Ishan Korde: Рассуждает о динамических интерфейсах и разных способах ИИ помочь строить их.

Роль дизайнера и специалиста вообще
1. Luke Wroblewski: Размышляет, какая роль в итоге будет у пользователя при работе с ИИ-продуктами. Он показывает, как она менялась на примере разработки.
 
Видео
1. Google Flow: Интерфейс генератора изображений и видео обновили, добавили больше возможностей редактирования.

Разработка
1. Addy Osmani: Разница между вайб-кодером и инженером агентов (это новый термин от Andrej Karpathy). Первое изначально описывало быстрые и узкоспециализированные наброски, второе — полноценный рабочий цикл.

2. Hardik Pandya: Оптимизировал код своего сайта с помощью Claude Code (производительность, accessibility, SEO, качество кода). Он показал пошаговый текстовый запрос для этого, который в том числе делает скриншоты до и после изменений — убедиться, что дизайн не развалился.
 
3. Cursor 2.5: Магазин плагинов и суб-агенты, которые могут делать мелкие задачи асинхронно.

4. Rork: ИИ-генератор мобильных приложений по текстовому запросу или скриншотам.

Управление продуктами
1. Boris Tane: Типичный цикл разработки программ. Как он радикально меняется в эпоху ИИ-агентов и какая роль в нём у человека.
 
ИИ-агенты
1. OpenClaw: Автономные ИИ-агенты на базе популярных ИИ-моделей. С ними можно просто общаться через мессенджеры. Вот, например, как он купил машину по выгодной цене. Как быстро развернуть его для себя.
 
Другие обновления на рынке
1. Выражение AI;DR наподобие TL;DR для обозначения ИИ-контента.
 
#ai #algorithms
23👍9
Разное свежее про дизайн-системы в привычном и ИИ-шном понимании.

1. Hardik Pandya: Пошаговая инструкция по подготовке дизайн-системы для использования ИИ. Как адаптировать токены, компоненты и принципы в формат .MD и положить в найстройки чат-бота или агента.
 
2. OpenUI: Фреймворк на React для адаптации дизайн-системы под ИИ. Они используют свой язык OpenUI Lang, чтобы переводить компоненты и токены в инструкции для чатботов и агентов.
 
3. AirOps: Гайдлайны и дизайн-система бренда имеют два представления — живой гайдлайн для людей и инструкция для ИИ.
 
4. Nathan Curtis: Отличная пошаговая памятка по аккуратной миграции компонентов Figma на слоты. Так, чтобы ничего не развалилось и работало на правильной архитектуре. Он также поделился своим шаблоном для планирования переезда.
 
Бета-версия слотов стала доступна всем пользователям. Как они работают и что можно делать с их помощью.
 
Кстати, они переписали внутреннюю архитектуру компонентов для запуска слотов.
 
5. IBM Carbon: Плагин для Figma, чтобы пользователи не открепляли компонент таблицы. Они сложные и каждая задача со своими нюансами, так что раньше приходилось допиливать стандартный компонент вручную.
 
6. Tyler Coderre: Чеклист по созданию дизайн-системы.
 
7. Google: Гайдлайны для интерфейса очков дополненной реальности. Обзор основных принципов и UI Kit в Figma.
 
8. Ruben Ferreira Duarte: Относительно простой способ проверить поведение макета интерфейса при изменении размера шрифта. Он использует разные наборы переменных в Figma для этого. Готовый шаблон.
 
9. Donny D'Amato: Неплохо и наглядно описал, как в проекте появляется потребность в дизайн-системе. И как рождаются костыли по ходу дела.
 
#designsystems
🔥149👍3
Новые книги по дизайну интерфейсов, которые вышли за последние месяцы:
 
1. Donnie D'Amato «Mise en Mode» о токенах в дизайн-системах.
 
2. Catt Small «The Staff Designer» о развитии дизайнера как эксперта в компании. Вводная глава из неё.
 
3. Cheryl Platz «The Game Development Strategy Guide» о процессе создания игр. Отрывок из главы 1 об игровом дизайне — https://rosenfeldmedia.com/sample-chapter-game-development-strategy-guide/.
 
4. Laura Kalbag «Accessibility For Everyone» теперь доступна бесплатно в интернете.
 
5. Christopher Noessel «Designing Assistant Technology» о дизайне ИИ-ассистентов. Выдержка из первой главы.
 
6. Robert Stribley «Design for Privacy» об учёте приватности данных пользователей в дизайне. Выдержка из первой главы.
 
7. Smashing Magazine готовят к выходу книгу Ben Callahan «Maturing Design Systems».
 
А вот что на подходе у Rosenfeld Media:
— David Eisner «Product Design Engineering for Designers»
— Stefanie Hutka «Designing Automated Futures»
 
#books
21🔥5👍1
Новое о новых и старых интерфейсных паттернах и лучших практиках:

1. Florian Shulz: Как делать современные подсказки по заполнению поля ввода. Т.е. прямо в контексте этого поля.

2. Jakub Krehel: Пачка простых, но добротных советов по улучшению деталей реализации дизайна интерфейса. Он упаковал их в навык для ИИ-сред разработки, так что можно проще применить их к своему проекту.

3. Luke Wroblewski: Как менялось взаимодействие с продуктами на базе ИИ в их интерфейсах. От невидимой логики до смены рабочего процесса вообще.

4. Daniel Rodrigues и Lucas Fischer: Дизайне интерфейса приложения для заметок Monologue от Every. Как они искали и внедряли конкретные решения.

5. Buzz Usborne: Проблема в интерфейсах ИИ-продуктов, которые часто оставляют пользователя с белым листом наедине. Это древняя проблема в дизайне интерфейсов и здесь она проявляется как и всегда до этого — пользователь не понимает, что можно делать и с чего начать.

6. Adobe Photoshop: Как запускали дизайн интерфейса ИИ-функции для вставки картинки-примера в существующее изображение. Процесс исследований и прототипирования с промежуточными решениями.

7. NN/g: Разбираются с полезностью и находимостью чат-ботов на сайтах компаний. В основном всё плохо и вообще не имеет смысла.

8. Виталий Фридман: Отдельный экран или модальное окно? Памятка по выбору для конкретной ситуации в интерфейсе

9. Intercom: Как пользователям важно получать разные модели общения от ИИ в зависимости от среды и контекста. И как это влияет на уместность и доверие.

10. Taylor Dykes: Примеры трёх критериях хороших информационных текстов в интерфейсе. Они должны быть понятными, ёмкими и передавать характер бренда.

11. Terry Godier: Серия эссе об избыточной роли цифровых продуктов в жизни пользователя. И напоминание о том, чего избегать дизайнерам интерфейсов.

12. Elizabeth Lin: Бесплатный текстовый мини-курс о продуктовом дизайне и карьере в нём.
 
#patterns
🔥125
Дайджест продуктового дизайна за март 2026. Плагин для экспертной оценки, современный дизайн-процесс, дизайн-системы для нейронок, слоты, новые книги, история курсора, интерфейсные навыки для агентов, алгоритмический дизайн и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
vc.ru
Дизайнерс
ВКонтакте
RSS
🔥111
Новое о классических и экспериментальных делах в пользовательских исследованиях:

1. Jim Lewis и Jeff Sauro: Перебрали кучу научных публикаций на тему синтетических пользователей в исследованиях. Валидными оказались только 12 и выводы из них скорее не в пользу этой мутной затеи. Хотя сама платформа Qualtrics, которая вызвала шквал критики своим внедрением синтетики, говорит об их ограниченном использовании для прогона и обкатки исследований перед запуском на реальных пользователей.
 
2. MeasuringU: Решили дотошно раскопать, насколько хорошо ИИ может выявлять интерфейсные проблемы в записях сессий пользовательских исследований. В первой статье из цикла они скормили нейронке такое видео и получили список проблем.
 
3. Steve Bromley: Даёт своё определение того, что такое «игровой тест». Люди используют этот термин для самых разных вещей.
 
4. NN/g: Где ИИ может помочь с написанием опросников для пользователей.
 
5. Alessandra Gomiero: Важность исследования самих методов пользовательских исследований. Часто их применяют по привычке, без подбора оптимального метода под конкретную задачу.
 
6. NN/g: Почему загибаются собственные панели респондентов, которые компании делают для себя. Их нужно грамотно поддерживать по нескольким направлениям.
 
#reseach
12🤯1
Чем дальше — тем больше свежих материалов об интеграции ИИ-инструментов с дизайн-системами. Но не только:
 
1. Design Tokens Visualizer: Сервис помогает наглядно увидеть связи между разными токенами и компонентами дизайн-системы.
 
2. Storybook 10.3: Самое главное — появился MCP-сервер и это сильно упрощает доступ ИИ-агентов к вашей дизайн-системе без корявых временных генераций и парсинга. Brad Frost поговорил с создателем фреймворка Dominic Nguyen о том, что это значит для дизайн-систем.
 
3. Alice Packard: Сравнивает все возможные способы организации иконок разного размера в дизайн-системе. Её рекомендация — компонент с вариантами, где размер задан как свойство компонента.
 
4. Brad Frost: Свежие наработки по генерации интерфейса в реальном времени на основе дизайн-системы через ИИ-команды. Это скорее обзор его свежих экспериментов, но достаточно разнообразный.
 
5. Nathan Curtis: Скрипт, который сильно удешевляет считывание нейронкой компонентов дизайн-системы в Figma. Это ускоряет процесс и не сжигает токены лишний зазря.
 
6. Figma Make: Может использовать вашу дизайн-систему и полезные файлы-вложения для понимания контекста. Дизайн-систему пока что нужно адаптировать в формат Make kit, но со временем такое должно быть автоматизировано.
 
7. Donnie D'Amato: Напоминает, что популярное сейчас движение «я сгенерил дизайн-систему через нейронку за пару часов» — решает только один из кусочков этой задачи. Дизайн-системы созданы для переиспользования командами. И главная сложность — сделать это простым и понятным, чтобы обеспечить достаточное покрытие. Хотя быстрая сборка первой дизайн-системы алгоритмами может помочь небольшим продуктам на старте — это хороший быстрый MVP. Или облегчить аудит текущего состояния.
 
8. Ben Callahan: Калькулятор, чтобы определиться: писать свою дизайн-систему или адаптировать готовый фреймворк? Он позволяет играть разными параметрами, чтобы принять решение.
 
9. ShadCN Themes: Инструмент для создания тем оформления для дизайн-систем на базе shadcn/ui. И большой каталог уже готовых.
 
10. Tailwind CSS Colors: Генератор цветовых тем оформления под Tailwind CSS на основе основного цвета бренда.
 
11. Webflow: Улучшили работу с компонентами и их вариантами. Их можно также генерировать с помощью ИИ.
 
12. PJ Onori: Занятный эксперимент — он дал нескольким ИИ-агентам задачу собрать один и тот же интерфейс на основе старой и новой дизайн-системы. И сравнивал эффективность и проблемы каждой версии.
 
13. zeroheight: Отчёт о состоянии дизайн-систем в 2026 году. Выборка малюсенькая (147 человек), но интересны скорее сами вопросы, чем конкретные цифры.
 
#designsystems
15🔥6
Чуток свежих интерфейсных паттернов и лучших практик:
 
1. A11Y.md: Контекстная инструкция для ИИ-моделей по поддержке accessibility. Это MD-файл, который загружается в сессию работы с нейронкой.

2. Durgesh Rajubhai Pawar перечисляет пачку типичных проблем с accessibility в коде, сгенерированном ИИ. И показывает, как их исправить.
 
3. AI Interaction Atlas: Большой каталог паттернов дизайна для ИИ-продуктов и взаимодействия с ИИ в целом.
 
4. NN/g: Чеклист лучших практик при дизайне чат-ботов на сайтах компаний. Как они должны работать, чтобы помогать пользователям и не конфликтовать с другими частями интерфейса.
 
5. Raghvi Kabra: Дизайн интерфейса приложения Adobe Aqua для детей. Как родилась идея, какие концепты они перебирали, что узнали о пользователях.
 
6. Claude Piché: Дизайн интерфейса второй версии Adobe Express. Как они пришли к концепции «сделай-бота» вместо «чат-бота», который решает конкретные задачи, а не просто трепется.
 
7. Ollie Fielding: Как неправильно делать формы для ввода медицинских данных. И что можно улучшить в них.
 
8. Demelza Feltham: Советы по улучшению интерфейсов для пользователей с тревожностью.
 
#patterns
🔥146
Дайджест продуктового дизайна за апрель 2026.
Брендинг ИИ-продуктов, новые парадигмы взаимодействия команд, анализ юзабилити через ИИ, грейды пользовательских исследователей, темы для дизайн-систем, accessibility, алгоритмический дизайн и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
vc.ru
Дизайнерс
ВКонтакте
RSS
5🔥1