Малышечная подборка свежего о дизайн-системах:
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
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
Substack
Configuration Collapse
As Figma Slots Push Composability, Be Ready to Drop Props
❤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
За это время я описал и обкатал фреймворк, помогающий решить два главных разрыва:
1. Сначала между стратегией и визуальной концепцией. Они зачастую никак не связаны, а значит айдентика такого бренда не передаёт его суть. И работает в лучшем случае на самом базовом уровне визуальной целостности.
2. А потом — между концепцией и её масштабированием. Гайдлайны не получается применить на практике и они остаются пылиться на полке. А значит и значительная часть всего проекта по брендингу была сделана зря.
Этот фреймворк помог вести проекты с топовыми глобальными агентствами вроде Collins, Design Studio (теперь — Further) и Verve. На каждом из уровне фреймворка есть набор инструментов и шаблонов к ним. Они помогают связать все уровни работы над брендом. В том числе убрать разрыв между цифровым продуктом и его маркетинговой коммуникацией.
Я постарался разложить пошаговый процесс работы над брендом на конкретные инструменты (их 26). К каждому из них идёт серия шаблонов, заполняя которые вы постепенно продвигаетесь к созданию того самого бренда, который выглядит, работает и ощущается цельно.
Я не буду учить вас делать конкретный визуальный стиль в конкретном инструменте дизайна. Но я научу вас тому, как найти этот стиль. А позже, при работе над любым стилем:
1. Убедиться, что он работает везде, в том числе в интерфейсе.
2. Он передаёт целевой характер. Так что получается тот самый эмоциональный дизайн.
На первом потоке и интенсиве отучились арт-директоры, дизайн-директоры, креативные директоры, ведущие дизайнеры из отечественных компаний: 2GIS, Aviasales, Дом.ру, Lamoda, Mos.ru, МТС, Ozon, Pinkman, Райффайзен Банк, Ренессанс Страхование, Спортс.ру, Циан, X5 и других.
Кстати, первый черновик книги на эту тему готов. Надеюсь принести ими ещё много пользы рынку и пользователям.
#branding
bangbangeducation.ru
Курс «Копилот цифрового брендинга» в школе дизайна и технологий Bang Bang Education
Авторский курс Юрия Ветрова по цифровому брендингу. Научитесь создавать стратегии, работать с айдентикой в интерфейсах и управлять бренд-проектами за 4.5 месяца.
🔥14❤8🤔1
Немного свежего о лучших интерфейсных паттернах и практиках:
1. Baymard Institute: Плагин для Figma на основе своего ИИ-анализатора интерфейсов UX-Ray. Он сопоставляет ваш макет с паттернами и лучшими практиками из их гигантской базы знаний.
2. Lazyweb: Сервис помогает быстро анализировать экраны и сценарии мобильных приложений в нужной отрасли. Это связка классической коллекции паттернов и гибкого ИИ-поиска по ней.
3. Victor Ayomipo: Памятка по психологии и дизайну интерфейса мотивационной системы streaks для пользователей.
4. NN/g: Памятка о проектировании полезных уведомлений для устройств умного дома. Они могут быть реактивными, проактивными и оптимизационными.
5. NN/g: Несколько простых интерфейсных паттернов в ИИ-чат-ботах, которые помогают пользователям общаться с ними. Это чекбоксы и варианты выбора из списка в Google и Claude — вроде бы банальные, но очень уместные в контексте задачи.
#patterns
1. Baymard Institute: Плагин для Figma на основе своего ИИ-анализатора интерфейсов UX-Ray. Он сопоставляет ваш макет с паттернами и лучшими практиками из их гигантской базы знаний.
2. Lazyweb: Сервис помогает быстро анализировать экраны и сценарии мобильных приложений в нужной отрасли. Это связка классической коллекции паттернов и гибкого ИИ-поиска по ней.
3. Victor Ayomipo: Памятка по психологии и дизайну интерфейса мотивационной системы streaks для пользователей.
4. NN/g: Памятка о проектировании полезных уведомлений для устройств умного дома. Они могут быть реактивными, проактивными и оптимизационными.
5. NN/g: Несколько простых интерфейсных паттернов в ИИ-чат-ботах, которые помогают пользователям общаться с ними. Это чекбоксы и варианты выбора из списка в Google и Claude — вроде бы банальные, но очень уместные в контексте задачи.
#patterns
Figma
UX-Ray by Baymard | Figma
Design experiences that actually convert. Analyze your designs against Baymard's research-backed UX best practices.
Scan your frames and identify critical usability issues that hurt conversions and user experiences.
With UX-Ray for Figma you can:
Identify…
Scan your frames and identify critical usability issues that hurt conversions and user experiences.
With UX-Ray for Figma you can:
Identify…
🔥21👍5❤3
Дайджест продуктового дизайна за февраль 2026. Слоты в дизайн-системах, внедрение рекомендаций из пользовательских исследований, дизайн ИИ-агентов, разбор итогов проекта, техническая подкованность пользователей в ИИ, алгоритмический дизайн и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
🔥11❤2
Что там свежего по пользовательским исследованиям? Нормально так:
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
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
Userinterviews
UX Research Tools Map 2026 | User Interviews
The only illustrated guide to the current UX research software landscape. Explore 150+ best-in-class tools for research operations, research methods, and analysis/insights.
❤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
Взаимодействие с такими инструментами
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
Nielsen Norman Group
How AI Literacy Shapes GenAI Use
Using generative AI often doesn’t mean using it well. AI literacy requires both prompt fluency and the ability to assess outputs.
❤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
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
Hardik Pandya
Expose your design system to LLMs
LLMs drift, fabricate tokens, and start every session from scratch. Here's how to feed your design system to AI coding agents so they stop guessing.
🔥14❤9👍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
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
mode.place
Mise en Mode
Express your experience in fewer than 3 dozen tokens
❤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
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
blog.florianschulz.info
Design Engineering 101: Typeahead
🔥12❤5
Дайджест продуктового дизайна за март 2026. Плагин для экспертной оценки, современный дизайн-процесс, дизайн-системы для нейронок, слоты, новые книги, история курсора, интерфейсные навыки для агентов, алгоритмический дизайн и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
🔥11❤1
Новое о классических и экспериментальных делах в пользовательских исследованиях:
1. Jim Lewis и Jeff Sauro: Перебрали кучу научных публикаций на тему синтетических пользователей в исследованиях. Валидными оказались только 12 и выводы из них скорее не в пользу этой мутной затеи. Хотя сама платформа Qualtrics, которая вызвала шквал критики своим внедрением синтетики, говорит об их ограниченном использовании для прогона и обкатки исследований перед запуском на реальных пользователей.
2. MeasuringU: Решили дотошно раскопать, насколько хорошо ИИ может выявлять интерфейсные проблемы в записях сессий пользовательских исследований. В первой статье из цикла они скормили нейронке такое видео и получили список проблем.
3. Steve Bromley: Даёт своё определение того, что такое «игровой тест». Люди используют этот термин для самых разных вещей.
4. NN/g: Где ИИ может помочь с написанием опросников для пользователей.
5. Alessandra Gomiero: Важность исследования самих методов пользовательских исследований. Часто их применяют по привычке, без подбора оптимального метода под конкретную задачу.
6. NN/g: Почему загибаются собственные панели респондентов, которые компании делают для себя. Их нужно грамотно поддерживать по нескольким направлениям.
#reseach
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
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
design-tokens-visualizer.vercel.app
Design Tokens Visualizer | Explore Token-Component Relationships
Interactive visualization tool for exploring design tokens and their relationships across design systems. Pre-loaded with Carbon, SLDS, and Stellar.
❤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
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
GitHub
GitHub - fecarrico/A11Y.md: A context system for building accessible software by default — for developers and AI, with enforceable…
A context system for building accessible software by default — for developers and AI, with enforceable rules aligned to WCAG. - fecarrico/A11Y.md
🔥14❤6
Дайджест продуктового дизайна за апрель 2026.
Брендинг ИИ-продуктов, новые парадигмы взаимодействия команд, анализ юзабилити через ИИ, грейды пользовательских исследователей, темы для дизайн-систем, accessibility, алгоритмический дизайн и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
Брендинг ИИ-продуктов, новые парадигмы взаимодействия команд, анализ юзабилити через ИИ, грейды пользовательских исследователей, темы для дизайн-систем, accessibility, алгоритмический дизайн и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
❤5🔥1