Компактная подборка свежего о дизайн-системах:
 
1. В мире дизайн-систем полное недоумение — Salesforce Lightning, для которой Jina Anne придумала концепцию токенов в 2014 году, отказались от этого термина. Danny D'Amato раскопал, почему — они сфокусировались на CSS-переменных и в целом считают будущую спецификацию W3C по токенам идущей не туда из-за избыточной сложности.
 
2. Storybook 9: На подходе и он будет включать мощное встроенное тестирование компонентов на accessibility. Dominic Nguyen показывает, как это будет работать. Обещают простой и наглядный обзор проблем и рекомендаций по их исправлению.
 
3. Design Tokens FYI: Словарь терминов в мире токенов.
 
4. zeroheight: Ежегодный опрос среди своих пользователей (около 300 ответов) на тему состояния дизайн-систем на рынке. Они собрали большой отчёт по итогу.
 
5. Variable Visualizer: Плагин для Figma наглядно показывает все токены и связи между ними.
 
#designsystems

Новьё по лучшим интерфейсным паттернам и практикам:
 
1. Baymard: Запустили гибкий поиск по своей базе знаний паттернов и лучших практик интернет-магазинов.

2. Notification Psychology Lab: Разбор паттернов дизайна уведомлений в околоигровом формате.

3. Accessibility Tags: Масштабная инициатива от производителей приставок по поддержке accessibility в играх. На сайте есть большой каталог паттернов, которые важно поддерживать.

4. Stephen P. Anderson: 4 способа упрощения информации в интерфейсах. Обрезать, сгруппировать, показывать поэтапно и показывать в рамках структуры.

5. Caitlin de Rooij: Как учитывать когнитивные ограничения пользователей в интерфейсах. В статье собраны лучшие паттерны и практики.

6. SCRN: Коллекция паттернов в отечественных мобильных приложениях.

7. X5: Принципы дизайна экранов загрузки в виде «скелетонов». Получилась очень дотошная и детализированная инструкция.

8. Microsoft: Фреймворк по обеспечению безопасности в дизайне интерфейсов. Он помогает минимизировать зловредное поведение, успокоить рассказом о защите и просто уменьшить количество ошибок.

9. MeasuringU: Новое сравнительное исследование корпоративного ПО. Как пользователи оценивают их по метрикам UX-Lite, SUS и NPS.

10. Baymard: Советы по удержанию пользователей интернет-магазинов после покупки товара.
 
#patterns

И снова масштабный привоз нового об алгоритмическом дизайне. Влезло бы в две части, а то скорость движа бодрится с каждым месяцем:

Дизайн таких инструментов
1. Microsoft: Принципы дизайна ИИ-агентов. Они разбиты по трём категориям: пространство, время и ядро.

Взаимодействие с такими инструментами
1. Netlify: Предолжили новый термин «Agent Experience» для оптимизации продуктов под ИИ-агентов. CEO компании Mathias Biilmann описывает своё понимание этого термина.

2. Беседа главы Figma Dylan Field и Garry Tan (глава Y Combinator) о влиянии ИИ на дизайн, а также прошлом и будущем инструмента.

3. Stephen P. Anderson: Отличная метафора, показывающая бессмыслицу обучения через простое суммирование информации, на которую часто упирают ИИ-сервисы. Это как с играми — цель сам процесс, нет смысла быстро выиграть.

Инструменты дизайна
1. Flora: Комбайн из инструментов алгоритмического дизайна собирает результаты их работы на бесконечном холсте. Умеет в изображения (Flux Pro, Luma Photon, Recraft, Stable Diffusion), видео (Hailuo, Kling, Pika, Runway, Luma Dream Machine), тексты (ChatGPT, Claude).

2. NEX: Набор инструментов для генерации и улучшения маркетинговых материалов – фото и видео продуктов, тексты о них, создание кампаний. Можно загрузить гайдлайны бренда и описание целевой аудиториии, чтобы результаты учитывали их.

3. Webflow AI Site Builder: Инструмент алгоритмического дизайна от Webflow помогает генерировать и настраивать сайты.

4. Экспериментальная связка Figma и Cursor через протокол MCP. Работает в две стороны — можно создавать дизайн по текстовому запросу и превращать готовый макет в код.

5. ChatGPT 4o: Добавили самую актуальную версию генератора изображений. Это породило лавину массового копирования жанров и форматов: студия анимации Ghibli, игрушки в упаковке, советские плакаты и т.п. Отчасти благодаря этому он продолжает набирать аудиторию дикими темпами — прибавили 1 млн пользователей за час. Примеры того, что он умеет. Кстати, теперь все сгенерированные изображения лежат в разделе Library, откуда их можно ещё и редактировать.

6. Midjourney v7: Новое поколение модели. Появился черновой режим для творческих поисков — изображения похуже качеством, зато генерируются намного быстрее.

7. Альфа-Банк: Как используют алгоритмический дизайн для создания 3D-иллюстраций.

8. Visual Electric: Плагин для Figma генерирует графику по текстовому запросу

9. Reve: Генератор изображений по текстовому запросу. Он умеет в советскую и пост-советскую эстетику.

10. ShaderGPT: Генератор браузерного кода для шейдеров анимации по текстовому запросу.

11. Hailou: Генератор видео теперь может и в изображения.

12. Ideogram 3.0: Вышла третья версия модели для генерации изображений. Улучшили работу с текстом и общее качество, научились повторять стиль изображения-примера.

13. Yandex Art 2.5: Новая версия генератора изображений. Она лучше работает с текстами и работает со стилем.

Пользовательские исследования
1. Chris Chapman: Думает вслух о пользе и вреде ИИ в работе пользователького исследователя (и не только). Он рассматривает всё через 4 критерия: польза, эстетика, общество и этика.

2. Outset: Сервис помогает пользовательским исследователям проводить и анализировать сессии с пользователями с помощью ИИ.

Accessibility
1. Eric Bailey: Польза и ограничения от сравнительного нового класса ИИ-продуктов, которые улучшают accessibility любого сайта. Большой справочный анализ в довесок.

3D
1. Spline: Генератор 3D-сцен на основе изображения.

2. Roblox: Генератор интерактивных 3D-объектов по текстовому описанию (позже смогу и на основе изображения).
 
3. Shapen: Генератор 3D-моделей на основе изображения и текстового описания.

Звук
1. NotaGen: Генератор нотных партитур.

Игры
1. Microsoft Copilot for Gaming. Он будет помогать в прохождении игр.

2. Pieter Levels: Написал простой авиасимулятор с помощью связки Cursor и Claude 3.7 без опыта игровой разработки. Он даже зарабатывает на нём.

#ai #algorithms

Продолжение свежего дропа об алгоритмическом дизайне:
 
Инструменты дизайна
1. Magic Animator: Создатели Lottie запускают генератор анимации на основе макетов Figma с описанием по текстовому запросу.

3D
1. Krea Stage: Возможность создавать 3D-сцены, генерируя и настраивая отдельные объекты.

Звук
1. NotaGen: Генератор нотных партитур.

Игры
1. Microsoft: Copilot for Gaming будет помогать в прохождении игр.

2. Pieter Levels: Написал простой авиасимулятор с помощью связки Cursor и Claude 3.7 без опыта игровой разработки. Он даже зарабатывает на нём.

Разработка
1. Lovable: Генератор сайтов по текстовому описанию, скриншоту или макету в Figma. Можно отдельно дорабатывать конкретный блок. Можно подключить GitHub и редактор кода.

2. Firebase Studio: Среда разработки от Google, где можно генерировать сайты, мобильные приложения и игры. Можно импортировать существующий проект и публиковать результаты на GitHub или другом репозитории.

3. Figma: Собрали мнения разработчиков и дизайнеров о вайб-кодинге — свежем баззворде вокруг разработки через общение с ИИ-чат-ботами.

4. Geoff Huntley: Толковый анализ того, как повлияет ИИ на будущее работы разработчиков разного уровня.

ИИ-агенты
1. Manus: Китайский ИИ-агент, который работает в фоновом режиме в разных программах и вкладках одновременно.

2. Opera: ИИ-агент в браузере Operator. Он поможет с покупкой товаров, билетов, гостиниц.

3. OpenAI: API для создания ИИ-агентов на базе ChatGPT.

Другие обновления на рынке
1. Прогноз развития ИИ к 2027 году от Daniel Kokotajlo, Scott Alexander, Thomas Larsen, Eli Lifland и Romeo Dean. Каждый период подробно расписан с рационализацией авторов.

2. OpenAI:
— Поддержали протокол MCP для ИИ-агентов, который позволяет управлять приложениями для компьютера.

— Модели для создания голосовых помощников, озвучивания и расшифровки текста. Демо-сайт позволяет попробовать в деле — https://www.openai.fm/.

3. Amazon:
— Alexa+: Прокачалась с помощью ИИ (они подключают разные модели для разных задач). Это делает умные колонки и другие устройства полезнее — меньше тупиковых веток диалога, больше возможностей ИИ-агента. Также можно генерировать музыку через Suno.

— Пробуют ИИ-дубляж для отдельных фильмов.

— Kindle: Научился пересказывать некоторые книги.

4. Google Gemini:
— Сможет распознавать предметы через камеру телефона.

— Режим Canvas для работы с текстом и кодом.

— Google AI Mode в поиске даёт развёрнутые ответы на вопросы со ссылками. И может искать по тому, что видит камера — https://blog.google/products/search/ai-mode-multimodal-search/.

5. Microsoft Copilot:
— Большое обновление. Actions в духе ИИ-агентов, организация наработок в страницы, генерация подкастов и всякое другое.

— Dragon Copilot: Помощник в принятии решений для врачей.

6. H&M: Экспериментируют с генеративными двойниками своих фотомоделей. Они снимают дополнительные сюжеты без привлечения человека (за них тоже платят).

7. Газета LA Times: Запустили эксперимент с написанием статей через ИИ. Он моментально стал расистом.

8. Il Foglio: Итальянская газета выпустила экспериментальный номер, полностью написанный ИИ.

9. Cloudflare: Защита от ИИ-ботов, обучающихся на вашем контенте — их загоняют в лабиринт из фейкового контента.
 
#ai #algorithms

Дайджест продуктового дизайна за март 2025. AX (agent experience), поиск по паттернам интернет-магазинов, токены, уведомления, исследовательский долг, игровой брендинг, accessibility, алгоритмический дизайн и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
— vc.ru
— DSGNERS
— ВКонтакте
— RSS

Британско-американское агентство Koto плотно захватило эфир брендинга цифровых продуктов — они пылесосят половину клиентов среди крупняка. Так что половина примеров в свежей подборке — про них:
 
— Amazon: Это один из самых масштабных проектов по обновлению цифровых продуктов за последние 5-10 лет, в котором много интереснейших зацепок для зоркого глаза (например, рифма иконок с улыбкой из лого). Эта работа войдёт в историю.

— Интервью с Jowey Roden (Chief Creative Officer) о том, как игровой брендинг помогает в построении вселенных. И что могут подчерпнуть в этом остальные цифровые продукты, которые хотят связать бренд с интерфейсом.
 
— Uniqode: Ребрендинг сервиса публикации и отслеживания QR-кодов для бизнеса.
 
— Недавно они получили инвестиции от фонда WestBridge Capital. Это всегда неоднозначная история — посмотрим, чем это закончится через пару лет.

Другие примеры не такие яркие, но вот что пролетало мимо:
1. Hovr: Инструмент для быстрого создания сайтов гостиниц и в целом компаний в теме путешествий от американского агентства The Collected Works.
 
2. Gutenberg Tech: Образовательные инструменты от шведского агентства Self Studio.
 
3. Cazoo: Площадка по продаже подержанных машин от британского агентства Fold7Design.
 
4. Equator: Туристический сервис от новозеландского агентства For the People.
 
#branding

Лихорадка вокруг ИИ сильно просадила поток свежих материалов о пользовательских исследованиях (да и вообще о многих ключевых навыках дизайна интерфейсов). Но кое-чего наскреблось:

1. Maryam Oseni: Концепция исследовательского долга. Он помогает определить пробелы в знаниях о пользователях.

2. Книга Jake Burghardt «Stop Wasting Research». Она посвящена базам знаний и инсайтов из пользовательских исследований (или репозиториям исследований).

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

4. Персонажи, описывающие разные ограничения возможностей у пользователей.

5. NN/g: 6 критериев оценки результатов юзабилити-тестов. Они помогают понять, можно ли считать данные определённой сессии валидными.

6. Adam Malamis: ИИ для бытовых задач при проведении исследований.

7. NN/g: Два подхода к выборке респондентов: по мере набора и по вероятности.

8. NN/g: Быстрая памятка по анализу сессий юзабилити-тестов.
 
#research

Свежий пакет обновлений о дизайн-системах:

1. Design System Tactics: Серия методов и статей по менеджменту дизайн-систем от Ness Grixti из Wise. Анонс и обзор.

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

2. Design Tokens Name Generator: Romina Kavcic запустила генератор названий токенов для разных категорий.

3. Ahmed Shadeed: Как работают относительные цвета в современном CSS. Он здорово продвинулся и позволяет даёт хорошую гибкость в цветовой системе, чтобы упростить токены.

4. ВкусВилл: Технологическое решение дизайн-системы мобильных приложений. Сергей Мухин описывает процесс работы над ней.

5. Figma: Много небольших, но полезных обновлений для работы с дизайн-системами. Они также собрали список рекомендуемых плагинов на тему.

6. eBay: Как работает команда дизайн-системы.

7. Alice Packard: Нетривиальные примеры использования режимов переменных в Figma для самых разных целей и задач.

8. Alex Williams: Как улучшить контраст цветов в тёмной теме оформления для пользователей с нарушениями зрения.
 
#designsystems

Material Design 3 в версии Expressive показали раньше срока — обычно все анонсы вокруг Android случаются на флагманской конференции Google I/O.
 
Дизайн-система стала намного более выразительной и эмоциональной. Больше ярких цветов, типографической гибкости и звонкости, пополнение коллекции форм-масок, новые компоненты с акцентом на разнообразии форм.
 
Одна из самых интересных частей — анимация с фокусом на «пружинках» и физике движения в целом. Особенно здорово это выходит в оркестровках — например, когда соседние уведомления в панели уведомлений немного отъезжают вместе с тем, за которое потянули пальцем.
 
В общем, всё с целью уменьшить однообразность приложений на платформе. Самый крутяк, что Google провели уйму пользовательских исследований эмоции. Это интересно ещё и как багаж методологий по проверке эмоционального дизайна — в статье достаточно подробно рассказано о ней и выводах. Хотя некоторые вроде «пользователи в 4 раза быстрее находили кнопку отправки письма» не сильно помогают защищать эмоцию — ясен-красен кнопку заметят, если она стала в разы больше, получила цветную подложку и переехала в более заметное место на экране.

Часы тоже обновились в этом стиле.
 
Больше деталей про Android 16 расскажут 20-21 мая. Но уже тизернули защиту от телефонных мошенников. А ещё — свою версию живых уведомлений. И прикрутили Gemini к часам, авто и ТВ.
 
#materialdesign #designsystems

Дайджест продуктового дизайна за апрель 2025. Спецификации для анимации, зрелость дизайн-системы, исследование эмоционального дизайна, фреймворк для написания гайдлайнов, ИИ-агенты и алгоритмический дизайн, accessibility и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS

Мясистая подборка о дизайн-менеджменте:

1. Gloria Diaz Alonso: Как донести до бизнеса необходимость улучшения accessibility. Отличный пример зрелого и системного подхода к внедрению любой инициативы по дизайну.

2. Nate Schloesser: Программная статья о том, что дизайн как профессия стал более зрелым, а значит к нему больше конкретных требований и ожиданий. Многие восприняли критические вопросы к профессии как предъяву и недоверие, а то и стали кричать о смерти дизайна. Но речь в первую очередь о том, что волна доверия по-умлочанию частично схлынула, хотя ценность не исчезла.

3. Peter Merholz: Чеклист для дизайн-менеджера на первые полгода в компании. Что критично сделать по организации команды и общим менеджерским вещам.
 
4. MeasuringU: Обновлённая шпаргалка по интерфейсным метрикам.
 
5. Christina Wodtke: Как можно учитывать качественные данные (например, инсайты из пользовательских исследований) при формулировании OKR.
 
6. Peter Merholz: Размышляет, должна ли карта компетенций для продуктового дизайнера учитывать ИИ-инструменты? Или оставаться вне конкретных продуктов типа Figma, а фокусироваться на решении конкретных задач.
 
7. Вячеслав Каграманов: Типичная история ухудшения и без того проблемного дизайна продукта. Почему обычно вместо решения застарелого дизайн-долга он только накапливается.

8. IBM: Как устроены сессии дизайн-критики (они называют их D&UX Review). И почему в них комфортно участвовать даже не дизайнеру.
 
9. Sean Goedecke: Почему большие компании медленно внедряют обновления? Его версия — математическая зависимость между количеством функциональности и их взаимозависимостью, которая тормозит процесс.
 
10. NN/g: Суть принципов, паттернов, эвристик и уставов команды, а также разница между ними.
 
11. Daniel Devesa Derksen-Staats: Советы по развитию культуры улучшения accessibility в компании.

12. Nate Schloesser: Как должно быть устроено управление распределёнными командами. У него хороший практический опыт организации таких команд.
 
13. IBM: Команда Robyn Johnson прошла через период турбулентности. Она собрала памятку для дизайн-менеджера о том, как повысить устойчивость в период неопределённости.

14. Мета: Общие принципы управления дизайном в компании.
 
#management

Овердофига свежих ссылок о лучших интерфейсных паттернах и практиках:
 
1. Wise: Как передавали в разработку анимацию сложного экрана мобильного приложения с кучей состояний. Это динамические и статические спецификации — они детально показаны в статье.
 
2. Baymard: Советы по улучшению каруселей в интернет-магазинах в большом вебе и на мобильных.
 
3. Михаил Просмицкий: Отличия стандарта accessibility WCAG 3.0 от текущего 2.2. У него более гибкая оценка поддержки пользователей с ограниченными возможностями, что одновременно и плюс (учитывается больше факторов) и минус (их можно вольно трактовать).
 
4. Figma: Как решали простые на вид задачи — добавить горизонтальную прокрутку к панели слоёв и найти хорошее название для возможности использовать прототип в офлайне. Какие варианты они перебирали и с какими проблемами сталкивались.
 
5. NN/g: Советы по грамотному проектированию подсказок в ИИ-чат-ботах. Они могут обучать пользователей возможностям бота, дополнять запрос и предлагать следующие запросы в диалоге.
 
6. Adobe: Упрощение интерфейса для работы с анимацией в Adobe Express. Как они искали баланс между простотой и возможностью настройки.
 
7. Adobe: Работа над дизайном интерфейса мобильной версии Adobe Photoshop. Как они искали базовую модель взаимодействия пользователей с продуктом и развивали её.
 
8. NN/g: Разница между видами текста и контента в целом в интерфейсах.
 
9. Martin Underhill: Почему важны быстрые ссылки для перехода к основному контенту для поддержки accessibility. И как прикрутить их к сайту.
 
10. Mike Gower: Способы улучшить accessibility интерфейса чата с ИИ-ассистентом.
 
11. Eleanor Hecks: Памятка по поддержке навигации с клавиатуры для поддержки accessibility.
 
12. Baymard: Советы по улучшению интерфейсов интернет-магазинов-агрегаторов.
 
13. Amy Hupe: Советы по написанию толковых сообщениях об ошибках в интерфейсе.
 
14. Baymard: Как интернет-магазины, заботящиеся об окружающей среде, могут рассказывать об этом на своих сайтах и в приложениях.
 
15. MeasuringU: Новое сравнительное исследование американских брокерских сайтов. Как пользователи оценивают их по метрикам UX-Lite, SUPR-Q и NPS.
 
#patterns

Новьё о пользовательских исследованиях:
 
1. Adobe: Подход к выводам из пользовательских исследований, которые затрагивают несколько важных тем для разных команд и заказчиков. Как выделить эти темы и правильно подать выводы коллегам.
 
2. Jim Lewis и Jeff Sauro: Шкала оценок для интерфейсной метрики UX-Lite.
 
3. Dominic Ricchetti: Подход к ранжированию потребностей пользователей в формате Jobs to Be Done на основе опыта работы в Microsoft и ServiceNow.
 
4. Jeff Sauro и Jim Lewis: Подробно описывают особенности измерений и использования 4 интерфейсных метрик из их каталога 70+ возможных. Это процент успешного завершения сценариев, SEQ, время выполнения сценария и UX-Lite.
 
5. Kate Towsey (одна из зачинательниц ResearchOps): Мысли о том, как эти команды и роль в целом чувствуют себя в волнах сокращений.
 
6. MeasuringU: Одна из ключевых компаний, создающих фундамент дисциплины пользовательских исследований, отмечает 20 лет своего основания. Они вспоминают ключевые этапы развития, которые много принесли профессии. Часть 2 и 3.
 
7. Steve Bromley: Метод концепт-тестирования игр на ранней стадии.
 
8. Контур: Основы статистики для пользовательских исследователей простым языком.

9. Chris Chapman: Метод анализа TURF (total unduplicated reach and frequency). Он помогает рассчитать, как добиться максимального охвата пользователей разными активностями или кампаниями так, чтобы не повторяться на одних и тех же людей.
 
#research

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

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

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

Но потом я посмотрел официальные дизайнерские видео про этот визуальный язык и 20 минут сидел с открытым ртом.
1. Сам материал гораздо сложнее простого матового стекла, даже красиво обрабатывающего цветовые пятна в духе теликов с фоновой подсветкой. Физика преломления света сложная, ближе именно к воде.
2. Это интерактивный брендинг, предназначенный для интерфейсов — а они постоянно находятся в микро- и макро-движении. И тут эта магия преломлений гипнотизирует.
3. Реакция на нажатие вообще с другой планеты — материал деформируется.
4. Панели умеют в мягкие размытие и смену цвета текста плюс иконок в зависимости от фона.
5. Элементы вне фокуса становятся визуально проще, чтобы не отвлекать.
6. Жидкое стекло может краситься в цвет темы оформления и это отдельная магия карамелек.

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

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

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

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

iOS 26
(Снова) редизайн приложения фото.

Полезные видео для дизайнеров:
— Get to know the new design system
— Say hello to the new look of app icons
— Design interactive snippets
— Create icons with Icon Composer
— What’s new in SF Symbols 7
— Design foundations from idea to interface
— Make a big impact with small writing changes
— Principles of inclusive app design
— Evaluate your app for Accessibility Nutrition Labels
— Customize your app for Assistive Access

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

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

Полезные видео:
— Elevate the design of your iPad app

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

macOS Tahoe
Полезные видео:
— Make your Mac app more accessible to everyone

visionOS 26
Прокрутка глазами, поддержка контроллеров плойки.

Полезные видео:
— Design widgets for visionOS
— Design hover interactions for visionOS

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

#ios #trends #events

Понедельничный подгон свежего о дизайн-системах:
 
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

Дайджест продуктового дизайна за май 2025. Material Design 3 Expressive, интерфейсные метрики, анализ анимации, локализация, концепты, алгоритмический дизайн, accessibility и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS

И снова плотный список свежих интерфейсных паттернов и практик:
 
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

Новые книги о дизайне интерфейсов стали появляться реже с закрытием 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

Чемпионство по потоку свежих ссылок сейчас у интерфейсных паттернов и практик. Погнали:
 
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. 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

Немного свежего о дизайн-системах:
 
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