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

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

РЕКЛАМЫ НЕТ.
Download Telegram
Дайджест заколлабил с Funky® Agency по новой айдентике, а на этой неделе вместе выпустим серию обзоров свежих ребрендингов цифровых продуктов. Следите, читайте, подписывайтесь на канал агентства.


Cohere — брендинг платформы алгоритмической работы с контентом от американского агентства Pentagram

Языковой искусственный интеллект помогает компаниям развиваться. Он разработан, чтобы позволить людям и компьютерам учиться в тандеме и приносить реальную ценность бизнесу. Pentagram создали для платформы её новую айдентику, которая переносит продукт бренда из области передовых экспериментальных технологий в современные потребности бизнеса.

В основу проекта легла концепция New Nature, в которой текучесть и несовершенство природы сочетаются с рациональностью и эффективностью вычислений. Экосистема Cohere похожа на природную среду, представленную сетью разумных живых клеток: в ней создаются новые проекты, растет пользовательское сообщество и развиваются языковые модели.

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

Новая идентичность проявилась во всех каналах бренда — сайт, приложение, дашборд и «песочница» для разработчиков, а также в наборе сверхмощных цифровых инструментов для коммуникаций (Cinema 4D, спецплагин для Figma). Бренду нужна была система, которая могла бы расти вместе с ним, поэтому компоненты и инструменты создавались с высоким уровнем гибкости.

Подробно о проекте

#branding
В понедельник прошла ежегодная WWDC, выставка новых операционок Apple. Лёгкое дежавю из такого же поста прошлого года: как и месяц назад в Android 14, интерфейсных обновлений особо нет, в основном развитие самой оболочки и ключевых приложений. Зато количество мемов про очки Vision Pro перебило всю новостную повестку. Если выделять какие-то вещи, то вот что:
 
——
VISIONOS
Очки виртуально-дополненной реальности Vision Pro работают на новой ветке операционных систем. Она относительно преемственна остальным — те же иконки приложений, аналогичные стандартные компоновки типа браузера и компоненты типа вкладок. Сами приложения могут иметь одно или несколько окон, глубину в 3D и своё пространство.
 
— Очки непрозрачные, но могут работать как в режиме дополненной, так и полностью виртуальной реальности (ну и показать ваши глаза на внешнем экране).
 
— Управление жестами (без специального контроллера), голосом и взглядом. Также авторизация по зрачку, включая Apple Pay. И отслеживание движений головы.
 
— 3D-камеры для картирования окружающей среды.
 
Кое что по созданию приложений для visionOS уже можно почитать и посмотреть:
Ранняя документация для разработчиков
Видео выступлений
Интервью с первыми попробовавшими компаниями.
 
Коммерческая успешность под большим вопросом — только большие проекты типа Microsoft HoloLens, Google Glass / Cardboard / Daydream, Magic Leap или Meta остались нишевыми B2B-шными, а то и вовсе похоронили миллиарды инвестиций, не считая десятков менее известных. Но в плане мультиплатформенной дизайн-системы пример очень интересный. Профессия точно обогатится интересным опытом и наработками в этом плане.
 
——
IOS17:
1. Появился режим стенда с крупным ландшафтным представлением приложений
 
2. В библиотеке иконок SF Symbols теперь есть анимация
 
3. Виджеты стали интерактивными — например, можно включать приборы умного дома или выполнять задачи из напоминалок
 
4. Интересные стилистические приёмы:
Всплывающее меню приложений для iMessage
Настраиваемый экран звонка для конкретных контактов
Отслеживание ментального здоровья
 
5. Airdrop позволяет передавать данные и контакты при прикосновении устройств
 
6. Предлагает дописать текст по нажатию на пробел в духе Gmail.
 
7. Упрощается подключение к гостиничным телевизорам через AirPlay с помощью QR-кода
 
8. Live Speech сможет говорить вашим голосом, если немного потренировать его

Немного полезных материалов и видео для дизайнеров:
— Официальные шаблоны iOS 17 и iPadOS 17 для Figma от Apple. Они наконец-то пришли в сообщество
Единый подход к обучению в приложении TipKit
Live activities
Быстрый вход в разделы приложения через поиск в spotlight
 
Победители Apple Design Awards этого года.
 
——
IPADOS17:
1. Виджеты на экране блокировки
 
2. Можно реагировать с помощью жестов на звонках FaceTime
 
——
WATCHOS10:
1. Редизайн ключевых приложений
 
2. Прокручиваемая стопка виджетов

—— 
MACOS SONOMA:
1. Общие виджеты с iPhone
 
2. Любые приложения для созвонов могут накладывать вырезанную фигуру говорящего на презентацию
 
3. Можно поделиться любым файлом прямо в любое приложение для созвонов — хорошее соответствие стандарту удалённой работы
 
Традиционно всё это появится у массового пользователя в сентябре. Но бета-версия будет доступна в июле.
 
#ios #trends #events
Собрал дайджест продуктового дизайна за май 2023. Android 14 и Microsoft Fluent Design 2, алгоритмический дизайн, рифма иконок и шрифта, риски в дизайне, ChatGPT для UX-исследований, тёмные паттерны, дашборды, dynamic island и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
vc.ru
ВКонтакте
RSS
Свежая выгрузка из базы нового по дизайн-менеджменту. Загрузка начинается через 3, 2, 1…
 
1. Mia Blume: Советует дизайнерам говорить с бизнесом не об абстрактном улучшении качества продукта, а об инвестициях в ключевые метрики с помощью дизайна.
 
2. NN/g: Управление рисками при внедрении и обновлении дизайна. Как это влияет на пользователей и как предусмотреть потенциальные проблемы.
 
3. Контур: Координация сообщества пользовательских исследований. Как внедряются общие методы, проводится планирование и ретро.
 
4. Steve Bromley: Как ранжировать интерфейсные проблемы в игровых интерфейсах.
 
5. Clara Kuo: Персональная стратегия для пользовательских исследователей, которые первыми пришли в компанию.
 
6. Andrea Mignolo: Сила коучинга от дизайн-менеджера. Этот метод помогает не только самому дизайнеру, но и всей организации, которая думает в таком ключе.
 
7. Capital One: Стратегия развития UX-исследований в компании. Подход к её формированию и реализации.
 
8. SAP: Модель проникновения хорошего дизайна в компании. Это 4 этапа масштабирования.
 
9. Joshua McLaughlin: Матрица AAI (Awareness, Alignment, Inclusion) для вовлечения участников проекта, которая на вид проще классических RACI и аналогов. Перевод.
 
10. User Interviews: Шаблоны для проведения встреч по дизайну.
 
11. Microsoft: Вариация ретроспективы для дизайнеров, которая здорово помогла на удалёнке.
 
#management
Массивная инъекция свежего о пользовательских исследованиях:
 
1. MeasuringU: Эксперимент с ChatGPT — насколько хорошо он умеет выделять основные темы интерфейсных проблем по результатам исследования. Они дали одинаковое задание трём исследователям и сделали три прогона с ботом. В целом результат не идеальный, но пристойный.
 
2. User Interviews: Мясистая памятка по пользовательским исследованиям для дизайнеров и менеджеров продуктов. Как взаимодействовать с профессиональным исследователем, какие методы можно использовать самому, как задавать правильные вопросы и т.п. Правда, они зачем-то разделяют всё на проектировщика и продуктового дизайнера, но это можно игнорировать.
 
3. Condens: Универсальный подход, который поможет выбрать правильный способ донесения результатов исследований на разных этапах работы продуктовой команды.
 
4. User Interviews: Шаблоны для проведения юзабилити-тестирования.
 
5. Jeff Sauro и Jim Lewis: Продолжают изучать измерения технической подкованности. В этой статье они пытаются проследить влияние этого показателя на успешное выполнение задачи.
 
6. NN/g: Методы поиска респондентов и проведения юзабилити-тестов с пользователями, которые имеют ограничения по зрению. Выводах из соседнего исследования на тему ввода текста на мобильных такими пользователями.
 
7. Alison Jones: База знаний и инсайтов из исследований Atlassian Research Library. Как они собирали требования к ней, какие удачные и неудачные этапы прошли и как она работает сейчас.
 
8. NN/g: Советы по созданию своей панели респондентов.
 
9. Meghan Skapyak: Советы по проведению исследований с детьми. Как создать комфортную обстановку для них и получить дельные инсайты.
 
10. Liam O’Brien и Stephanie Wilson: Особенности вариации метода рассуждения респондентом вслух — когда модератор может прерывать и дополнять их в каких-то ситуациях.
 
11. MeasuringU: Проблема исследования, оценивающего записи немодерируемых юзабилити-тестов. Разные исследователи выделяют разные интерфейсные проблемы и пересечение между ними не сильно большое.
 
12. NN/g: Эффект Хоторна, который может искажать результаты пользовательских исследований. Сам факт наблюдения за ними может повлиять на поведение.
 
13. Дмитрий Старков: Методы тестирования продуктов на базе алгоритмов.

#research
Двойная Тройная порция свежих ссылок о лучших интерфейсных паттернах и практиках:
 
1. The Pudding: Крутой обзор тёмных паттернов прекращения подписки. Они потратили свои деньги на эксперимент с парой десятков сервисов. Спойлер: потеряли почти все.

2. Lyft: Виджет live activity и «динамический остров» в iOS.
 
3. Creative Navy: Подробная памятка по дизайну дашбордов на основе своего многолетнего опыта.
 
4. Alex Ivanovs: Памятка по поддержке accessibility на разных уровнях.
 
5. Baymard Institute: Актуализировали список лучших практик для интернет-магазинов. Edward Scott сделал обзор из их недавнего исследования.
 
6. NN/g: Ограничения и проблемы экранных дикторов на мобильных.
 
7. Marcus Herrmann: Как поддержать accessibility в запросах на сбор персональных данных на сайтах.
 
8. Christopher Butler: Правильный ритм в подаче информации на длинных страницах, чтобы пользователи докручивали их до конца. Он ссылается на исследования Nielsen/Norman Group и Chartbeat на эту тему. Он также показывает пример перестройки длинной промо-страницы в более читабельный формат. И выделяет ключевые правила такого переосмысления.
 
9. Luke Wroblewski: Сценарии использования дополненной реальности.
 
10. Uber: Редизайн навигации. Они делали много интерактивных прототипов разного уровня сложности и активно тестировали их.
 
11. NN/g: Памятка по показу сообщений об ошибках в интерфейсе.
 
12. Creative Navy: Изучили и сравнили медицинские интерфейсы.
 
13. Adam Silver: Проблемы «залипающей» навигации на сайте и заблокированных кнопок в формах (это древний спор, я на его стороне).
 
14. Camryn Manker: Чеклист по поддержке accessibility в игровых интерфейсах.
 
15. Коллекция идиотских вариантов интерфейса правил использования сайта и реализации старого эппловского жеста «проведите, чтобы разблокировать».
 
16. NN/g: Особенности использования «шторок» в мобильных интерфейсах. Статья полезная, но с оговоркой про спорную рекомендацию всегда использовать явную иконку «крестика» для закрытия — не нужно переизобретать системные элементы операционных систем.
 
17. Luke Wroblewski: Напоминает, что нудные длинные туры при встрече нового пользователя часто бесполезны. И приводит пару примеров продуктов, которые поменяли их на реальную ценность.
 
18. Asma Aldrees и Denis Gračanin: Большое исследование государственных цифровых сервисов. Что пользователи ожидают от них и как системно подступаться к работе такими проектами.
 
19. Peter Ramsey: Дикая механика покупки билетов в сервисе Ticketmaster. Он ограничивает время на оплату, что в условиях вереницы партнёров уполовинивает шансы на покупку.
 
20. Baymard: Удачные и плохие интерфейсные приёмы, чтобы показать состав витаминов в интернет-аптеках.
 
21. NN/g: Короткая шпаргалка по «скелетным» экранам загрузки.
 
22. Jim Lewis и Jeff Sauro: Сравнительные исследования сайтов интернет-магазинов офисных товаров и интернет-магазинов электроники. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
 
#patterns
На этой неделе снова будет выгрузка свежего по алгоритмическому дизайну в пару заходов. Пару месяцев не доходили руки собрать вместе (скорость появления нового запредельная), но момент за хвост сейчас пойман. Начнём с инструментов:
 
ДИЗАЙН
Framer сгенерирует сайт по текстовому описанию, а потом поможет докрутить отдельные элементы из набора предложений.
 
Figma купила нашумевший стартап Diagram, который запустил энтузиаст Jordan Singer с командой. Они делают простые и достаточно прагматичные решения, которые наверняка скоро попадут в Figma. В статье описаны несколько сценариев использования, которые уже помогут в повседневных задачах — например, автоматическая категоризация идей из брейнштормов (дико нудное дело).
 
Adobe Firefly теперь встроен и в Photoshop через функцию Generative Fill. Можно выделить место на фото и добавить туда любой объект. Как это работает. Это лучшая реализация алгоритмических функций в инструменте дизайна на текущий момент — они встроены органично в существующий процесс и прокачивают его, а не делают костыльные надстройки. Как и должны быть везде.
 
Adobe Express: Новый простой инструмент дизайна для несложных макетов и видео. Он умеет генерировать изображения и шрифты с помощью Firefly, готовит макет под разные размеры.
 
Adobe добавили в Illustrator экспериментальную функцию Generative Recolor. Она меняет цвета на сложных иллюстрациях с помощью их движка Firefly.
 
Uizard Autodesigner: Видео-обзор от Kim Alban.
 
Shaper: Вторая версия инструмента от Hayk An, который позволяет настраивать интерфейс, собранный на базе компонентов с токенами. Можно получить случайную комбинацию параметров, так что это игрушка на стыке алгоритмического дизайна.
 
Drag Your GAN: Можно простым способом указать, как нужно поменять параметры объекта или персонажа на фото.
 
Durer: Генерирует иллюстрации в вашем собственном стиле. Он учится на нескольких примерах.
 
Recraft: Генератор и редактор иконок и иллюстраций в разных стилях. Это смесь текстового запроса и выбора параметров.
 
Mandala: Интеграция Stable Diffusion в инструмент для 3D-моделирования Maya. А ещё там появится официальный ассистент на базе OpenAI.
 
Spline для 3D научился генерировать объекты по текстовому описанию и накладывать стиль по примеру.
 
Zoo: Сервис сравнивает результаты популярных инструментов генерации картинок по текстовому запросу.
 
Gamma App: Может сгенерировать черновик презентации с графикой на основе тезисов.
 
Shap-E: Новый проект OpenAI генерирует трёхмерные объекты по текстовому запросу. Научная публикация.
 
Insightface Swap: Бот для Midjourney грамотно вставит ваше лицо на сгенерированное фото или иллюстрацию.
 
Photoleap: Фоторедактор для мобильных, умеющих кучу приёмов по стилизации и переосмыслению фото.
 
Illustroke: Генератор векторных иллюстраций по текстовому запросу.
 
ClipDrop Uncrop: Дорисовать то, что было за границами изображения (примерно как Generative Fill у Photoshop).
 
UX-ИССЛЕДОВАНИЯ
Dovetail сможет сгруппировать инсайты в темы или набросать черновик инсайта.
 
ИНСТРУМЕНТЫ ДЛЯ ТЕКСТОВ
Яндекс Маркет генерирует описание товаров с помощью YandexGPT.
 
TikTok: Генератор сценариев для рекламы.
 
LinkedIn генерирует текст сопроводительного письма для отклика на вакансию.
 
ПРОМДИЗАЙН И АРХИТЕКТУРА
Toyota экспериментирует с алгоритмическим дизайном для работы над машинами. Это один из самых разумных процессов — дизайнер делает первый набросок стиля, дальше алгоритм предлагает несколько вариантов его оптимизации (например, для лучшей аэродинамики). Дизайнер выбирает одно из предложений и дорабатывает его.
 
Finch и PlanFinder: Планы помещений.
 
МУЗЫКА И ВИДЕО
TikTok Ripple генерирует и редактирует музыку. Можно напеть мотив и оно превратит его в заготовку песни.

Генератор музыки по текстовому описанию от Меты.

Synthesizer V: Генерирует вокал для музыки. Он обещает упростить ранние наброски песен.
 
NVIDIA Align Your Latents и Runway Gen-2: Видео по текстовому описанию.
 
Вторая часть — в четверг.
 
#al #algorithms
Продолжу выгрузку накопившегося по алгоритмическому дизайну, которая копилась последние пару месяцев:
 
ДИЗАЙН-ПРОЦЕСС
1. Dan Mall: Простыми и чёткими мыслями пересказал стандартную логику процесса алгоритмического дизайна, актуальную на сегодняшний день. Она повторяется из года в год, не меняясь при смене волн хайпа.
 
2. Matty Brownell: Иллюстративная графика для бренда в едином стиле с помощью Midjourney.
 
3. David Truog: Смогут ли такие инструменты развиваться, если сами дизайнеры не будут поставлять им свежие обучающие данные из своих работ.
 
4. Jay Anthony: Реалистично ли писать сценарии для юзабилити-тестирования через ChatGPT. Конкретики мало, но ограничения подсвечены.
 
5. Как сделать иллюстративные QR-коды от nhciao через Stable Diffusion, которые работают на самом деле.
 
ПОЛЬЗОВАТЕЛЬСКОЕ ВЗАИМОДЕЙСТВИЕ С НИМИ
1. Jakob Nielsen: Современные генераторы по текстовому запросу — это новая интерфейсная парадигма после пакетной обработки в первых компьютерах и командной строки. Впервые пользователь описывает сам конечный результат, а не последовательность команд для его получения.
 
2. Luke Wroblewski: Прикрутил поиск по своему блогу на базе ChatGPT (включая видео и подкасты). Затея интересная — он отвечает на вопросы в свободной форме выводами из статей Люка (а он написал очень много материалов за 25 лет). Его мысли про стандартную иконку такого поиска через «магические искры».
 
3. Stephen P Anderson: Проблемы генераторов текстов а-ля ChatGPT. Они способны создавать черновики, но многие забывают, что эти черновики нужно критически анализировать и доводить до ума.
 
4. Jakob Nielsen: Одно из первых вменяемых исследований на тему продуктивности и качества работы специалистов, использующих ChatGPT. Они стали тратить меньше времени на написание черновиков, но больше на редактуру. В целом качество материалов достойное. Бонусом они традиционно шутканули на 1 апреля на эту тему.
 
5. Luke Wroblewski: Переход редакторов графики и видео от инструменто-центричных интерфейсов к объекто-центричным. Алгоритмический дизайн подталкивает к этому.
 
6. Maggie Appleton: Концепты взаимодействия с чат-ботами. Как они могут уточнять и дополнять текст.
 
КАК ВСЁ ЭТО РАБОТАЕТ
1. Алина Валяева: Политика фотобанков и сайтов вопросов и ответов по поводу использования контента, сгенерированного алгоритмами.
 
КУЛЬТУРНЫЙ ЭФФЕКТ
1. Amy Goodchild: Примеры алгоритмического дизайна из 50х и 60х. Забавно, что даже дискурс про роль таких инструментов местами такой же, как в текущую волну.
 
2. Fast Company: Значительная часть логотипов современных сервисов вокруг ИИ ходят вокруг разного рода шестигранников.
 
КАКИЕ РАБОТЫ УЙДУТ
Идущие и планирующиеся сокращения в IBM, Bild, Bluefocus Intelligent Communications Group Co.
  
НЕ ДЕЛАЙТЕ ТАК
1. Niloufar Salehi: Попробовал сервис Synthetic Users, который якобы генерирует персонажей на основе публичных данных без проведения пользовательских исследований. По факту это просто мусорная информация — не сильно лучше высосанных из пальца персонажей, которые пишут дизайнеры без исследований. ChatGPT создаёт похожие по бесполезности материалы.
 
2. Arvind Sanjeev: Как закрытые личные данные утекают для обучения алгоритмов. Например, многие генераторы лиц как будто ненастоящих людей на самом деле берут настоящие фото и просто немного дорабатывают их.
 
3. Использовались ли ваши данные или фото для обучения алгоритмов. Это часть более крупной инициативы Spawning по защите своих персональных данных от обработки.
 
4. Bloomberg: Как сервисы генерации изображений по текстовому запросу воспроизводят расовые и гендерные стереотипы.
 
#al #algorithms
Собрал дайджест продуктового дизайна за июнь 2023. visionOS и iOS17, алгоритмический дизайн, CSS для дизайн-систем, тренды в логотипах и упаковке, отдача от UX-исследований, куча нового в Figma, открытая библиотека книг, упрощение длинных страниц и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
vc.ru
ВКонтакте
RSS
Некоторое количество свежего для дизайн-менеджеров:
 
1. Karin den Bouwmeester: Фреймворк для оценки выхлопа от пользовательских исследований в компании. Она делит их на влияние на бизнес и UX в целом, а также организацию и самих специалистов по исследованиям.
 
2. Design Dept.: Советы для дизайн-менеджеров в ситуациях экономического кризиса, когда компании колбасит.
 
3. IBM: Памятка для фасилитатора рабочих сессий. Как понять, что всё идёт хорошо.
 
4. NN/g: Чеклист для оценки качества отработки ошибок в интерфейсе. Это измеримый подход, к которому идёт шаблон в Excel.
 
5. Emma Boulton: Плюсы и минусы централизованной и погружённой оргструктуры для пользовательских исследователей. И показывает, как лучше всего отработать в каждой из ситуаций.
 
6. NN/g: Польза приглашения пользователей на воркшопы. Он описывает несколько форматов таких сессий и даёт советы по их проведению.

7. Andrea Mignolo: Перечисляет фреймворки для описания лидерских стилей. И делает особенный акцент на коучинговом стиле.
 
8. Shamsi Brinn: Концепция «no handoff» (без передачи проектных артефактов от дизайнера разработчикам). Это процесс, в котором нет явного перехода между этапами, а постоянная совместная работа.
 
#management
Свежая подборка свежего про свежие интерфейсные паттерны и лучшие практики:
 
1. Rauno Freiberg: Под микроскопом разбирает жесты и анимацию интерфейса в операционках Apple. Он делал интересный концепт MercuryOS, которая ощущается так же плавно и аккуратно, как и они.
 
2. Swiggy: Отличный рассказ о работе над конкретным компонентом кнопки в сценарии оформления заказа. Как они замеряли связанные метрики и доработали первую версию, уделяя внимание небольшим, но критичным деталям.
 
3. Wikipedia: Как делали редизайн.
 
4. Dan Brown: Рассуждает о сложностях описания информационной архитектуры продуктов, где интерфейс строится вокруг центрального объекта (например, календарь или документ). А ещё — о корпоративных продуктах и их отличии от продуктов для массового пользователя.
 
5. NN/g: Советы по дизайну интерфейса виртуальной очереди. Как показывать пользователю статус и сообщать о важных вещах.
 
6. Robert Goesch: Интересный концепт поиска авиабилетов. Их агентство DUMBO попробовало пересмотреть порядок действий пользователя, чтобы оптимизировать основной (по их мнению) сценарий использования.
 
7. Indeed: Роль прототипов в проверке продуктовых решений. В статье есть ещё одна классификация глубины их проработки и общие советы по применению.
 
8. IBM: Простой чеклист по свежему стандарту accessibility WCAG 2.2.
 
9. MeasuringU: Новое сравнительное исследование сайтов парков развлечений. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
 
#patterns
Сегодня — всё, что попадало в дайджест о дизайн-системах за последние месяцы:
 
1. Lukas Oppermann: Подробнейше разложил по полочкам системную работу с новыми токенами в Figma. Как реализовать все аспекты, важные для дизайн-системы и связать её с компонентами в коде. Ну и рассказал про текущие возможности и ограничения бета-версии.
 
2. Авито: Как визуально срифмовали набор иконок со шрифтом. Отличная пошаговая инструкция для важной задачи, до которой редко добираются команды.
 
3. Pinterest: Измерение «покрытия» продуктов на уровне Figma. Это главный показатель успеха внедрения и у них получился отличный и не сильно затратный подход.
 
4. Booking.com: Процесс работы над компонентом (он есть в Figma). И рассказывает о других инструментах в работе над ней.
 
5. Intuit: Работа над семантическими токенами. Как они пришли к их архитектуре и типизации.
 
6. Lyft: Процесс внедрения платформы для платежей. Самая ценная часть статьи — подход к оценке новых запросов в дизайн-систему.
 
7. Storybook: Дополнение, которое позволяет переключать тему оформления для любого фреймворка.
 
8. Wikipedia: Как искали единую сетку для редизайна.
 
9. Proportio: Сервис помогает построить пропорциональную систему размеров, которая объединяет шрифт, иконки и отступы. Обзор от автора. Правда, сейчас там есть странности типа размера иконок 23x23.
 
10. Stephanie Eckles: Все современные приёмы CSS для описания компонентов и дизайн-систем в целом.
 
#designsystems
1 сентября стартует десятый поток моего курса о дизайн-менеджменте цифровых продуктов на Bang Bang Education. На первых девяти отучились более 550 дизайн-директоров, дизайн-менеджеров, арт-директоров, ведущих дизайнеров, креативных директоров из многих отечественных (и нескольких международных) компаний: 1C, ABBYY, AIC, Ак Барс, Альфа-Банк, Apalon, App in the Air, Arrival, Aviasales, Avito, Badoo, BBC, Билайн, БКС, ВТБ, Chatfuel, Clay, Газпром, de Bijenkorf, Delivery Club, Детский мир, Dodo Pizza, ДОМ.РФ, EPAM, Foodplex, HeadHunter, Heads & Hands, Hoff, inDriver, Joom, Kaspi, Klarna, Комитет, Красцветмет, Леруа Мерлен, Литрес, Loóna, Луч, MacPaw, Mailchimp, Mail.ru Group, Манго Офис, ManyChat, М.Видео, Microsoft, Miro, Модульбанк, МосБиржа, МТС, Naumen, Okko, OneTwoTrip, OpenWeb, Opera, Открытие, Ozon, PayPal, Петрович, ПИК, Pinkman, ПСБ, QIWI, Qlean, Райффайзенбанк, Rambler Group, РБК, Readdle, Redmadrobot, Reg.ru, Ренессанс Страхование, Росбанк, Россельхозбанк, Ростелеком, S7, Сбербанк, Ситимобил, Спортмастер, Столото, Selectel, Semrush, Skyeng, Tele2, Тинькофф, Трипстер, TomTom, Touch Instinct, Точка, Учи.ру, Уралхим, Финам, ЦИАН, Эксмо, Voximplant, Wargaming, Wrike, X5, Яндекс и многих других.
 
Я полностью перезаписал все видео, переехал на новую образовательную платформу и постоянно развиваю формат домашних заданий и вебинаров. Курс построен на базе будущей книги по паттернам дизайн-менеджмента (идёт корректура в издательстве). Какие-то части вы уже могли прочитать ранее и, возможно, знакомы с общей концепцией модели зрелости дизайна и продвижения по ней, но это около 20% материала курса.
 
Получился огромный массив знаний из 37 уроков на 10 часов — 32 паттерна и 5 обзорных уроков, а также несколько инструментов-приложений к ним (помогут подниматься по уровням зрелости). Курс идёт 4 месяца. Помимо видео-лекций есть домашние задания и вебинары после каждого блока. Результат — рабочая дизайн-стратегия, которая основана на проблемах и целях вашей компании. Я постепенно добавляю шаблоны для домашних заданий, которые здорово структурируют мысли. Проверяю всё сам.
 
Самые вовлечённые студенты внедряли улучшения в дизайн-командах по ходу курса, так что к окончанию получили осязаемый выхлоп :)
 
#management
И снова массивный дроп свежего про пользовательские исследования:
 
1. Jim Lewis и Jeff Sauro: Сравнивают несколько чеклистов для оценки компьютерной грамотности пользователей.
 
2. Lyft: Системный подход, который поможет презентовать результаты исследований команде. Как обернуть их в историю, которая подсвечивает главное и за которой интересно следить.
 
3. MeasuringU: Памятка по использованию метода тестирования интерфейсов с помощью «первого клика» (она же в виде шпаргалки). Они также изучили, насколько метод клик-тестов на макетах позволяет предугадать реальное поведение пользователя на сайте. В целом — очень близко.
 
4. NN/g: Изучили сервисы для обработки результатов исследований, которые обещают готовить инсайты на их основе. В целом всё плохо — корявые выводы, невозможность отследить исходный материал конкретной сессии, непонимание контекста.

5. Marvin: База знаний и инсайтов из пользовательских исследований. Помогают разбирать заметки и раскладывать их по категориям с помощью алгоритмов.
 
6. NN/g: Как работать с матрицей CSD (Certainties, Suppositions, Doubts). Она помогает разложить предположения о пользователях по стопкам (уверены, предполагаем, сомневаемся) и системно работать по повышению степени уверенности.
 
7. David Tang: Ограничения и риски демократизации исследований в компании. В ней есть польза, но только если это управляемый процесс, который решает правильные задачи.
 
8. Condens: Метод кабинетных исследований и ситуации, в которых он полезен.
 
9. User Interviews: Памятка по поиску и отбору респондентов. А также советы Mary Nolan для B2B-продуктов.
 
10. User Interviews: Пообщались с несколькими продуктовыми командами и узнали, как они работают идеологии постоянно идущих исследований.
 
11. Rohan Irvine: Советы по выстраиванию ResearchOps в компании. Он делится опытом удачных и проблемных ситуаций из компаний, где внедрял эти подходы.
 
12. Jeff Sauro и Jim Lewis: Продолжают изучать метод юзабилити-тестирования, когда респондент проговаривает проблемы вслух. Так респонденты находят больше проблем, хотя они не проверяли реальность этих проблем.

13. NN/g: Мощный глоссарий терминов в количественных пользовательских исследованиях.
 
14. Robert McWhirter: Процесс проверки продуктовых гипотез на самой ранней стадии с помощью исследований и экспериментов.
 
15. NN/g: Памятка по проведению экспертной оценки. Они дают полезный шаблон, который основан на классических 10 эвристиках Нильсена.
 
#research
Новёхонькая подборка об алгоритмическом дизайне собралась в рекордные сроки:
 
1. Adobe Photoshop: Новая функция Generative Expand на основе их движка алгоритмического дизайна Firefly. Она продолжает Generative Fill, но более удобна для дорисовки изображения за текущими границами. Как она работает.
 
2. Stable Diffusion XL 1.0: Выпустили новую версию для всех.
 
3. Clipdrop Stable Doodle: Превращает наброски от руки в фото и иллюстрации.
 
4. GetIMG.AI: Ещё один инструмент алгоритмического дизайна, который собрал вместе кучу модных утилит — генерация картинок и расширение существующих изображений, обучение собственного стиля и всё такое.
 
5. Canva Magic Design: Запустили алгоритмического помощника, который помогает генерировать шаблоны, изображения и другие аспекты дизайна.
 
6. Benedict Evans: Алгоритмические инструменты не сократят рабочие места, а наоборот — создадут много новых. Он ссылается на парадокс Jevons, который показал — когда какой-то ресурс становится дешевле, его наоборот начинают потреблять больше. И приводит много подходящих примеров.
 
7. Rest of World: Журнал пообщался с низкооплачиваемыми работниками в нескольких профессиях (иллюстратор, редактор, ассистент, аналитик), которых потенциально могут заменить алгоритмы. Что они делают с этим прямо сейчас и видят ли свою полную замену (скорее нет, хотя работать придётся больше). Интересно, что журналисты попросили сделать одинаковую задачу руками и с помощью новых инструментов.
 
8. Shopify Sidekick: Готовят алгоритмического помощника. Он анализирует исторические данные по интернет-магазину, предлагает рекомендации по перестройке ассортимента и может обновить сайт по этим рекомендациям.
 
9. Per Axbom: Проблемы с этикой и качеством инструментов алгоритмического дизайна в виде инфографики.
 
10. YouTube: Бета-версия пересказа содержания видео.
 
11. SciSpace Copilot: Плагин для Chrome помогает анализировать научные публикации и выделять из них основное.
 
12. LoopPanel: Помогает обрабатывать заметки из пользовательских интервью и выделять инсайты из них.
 
13. Kraftful: Помогают разбирать обратную связь от пользователей и раскладывать её по категориям с помощью ChatGPT.
 
14. Pika Art: Генератор видео по текстовому описанию.
 
15. HiFa: Экспериментальный инструмент генерирует 3D-модели по текстовому описанию.
 
16. Рекламная кампания очков Georgetown Optician, которую агентство Design Army сделало в Midjourney.
 
#al #algorithms
Дайджест продуктового дизайна за июль 2023. Алгоритмический дизайн, интранеты, индикаторы загрузки, детали анимации iOS, токены в дизайн-системах, матрица CSD, бронирование билетов, подача результатов исследований, клик-тесты, пространственный дизайн и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
vc.ru
ВКонтакте
RSS
Ссылочно-протеиновая масса для тех, кто ищет связь бренда с интерфейсом. Что набралось за пару месяцев:
 
Evil Martians: Фантастическая статья про рифмование шрифта и иконок. Универсальный подход для поиска такой рифмы исходя из особенностей шрифта. Ровно по такой логике мы сделали решение для Райффайзена, хотя здесь целая система.
 
Pinterest: Язык анимации от американского агентства DIA.

OpenAI от французско-американского агентства Area17 (больше деталей).
 
TheFork: Ребрендинг сервиса бронирования ресторанов от британского агентства Design Studio.
 
InVision: Обновление айдентики от британского агентства Ensemble.
 
Askly: Айдентика сервиса для общения с пользователями сайта от эстонского агентства Tabasco.
 
Unmind: Ребрендинг сервиса для ментального здоровья сотрудников компаний от американского агентства Ragged Edge.
 
Glassdoor: Ребрендинг сайта о работодателях от британского агентства Koto.
 
Guild: Ребрендинг карьерно-образовательного сервиса от американского агентства Collins — .
 
Airtm: Ребрендинг финтеха от британского агентства Design Studio.
 
MUX: Ребрендинг видео-платформы от австралийского агентства For the People. История работы над проектом.
 
AMP: Ребрендинг музыкального сервиса от британского агентства Koto.
 
Kili: Ребрендинг ИИ-платформы от американского агентства Ragged Edge.
 
Pley: Ребрендинг игровой компании от шведского агентства Essen.
 
Replay: Ребрендинг компании генетического анализа от британского агентства Koto.
 
Runway: Ребрендинг финтеха от американского агентства Reform Collective.
 
Антипример для Nike от агентства Instrument. Это яркий бренд с простейшими характерными базовыми приёмами, но для него сделали максимально бесхребетную и унылую дизайн-систему.
 
Ostro: Ребрединг медицинского сервиса от испанского агентства Mucho.
 
DailyMotion: Ребрендинг видео-сервиса.
 
Lookout: Ребрендинг компании по кибер-безопасности от американского агентства Emotive Brand.
 
#branding
Ещё чутка свежих интерфейсных паттернов и лучших практик:
 
1. Тарас Бакушевич: Удачные практики создания индикаторов загрузки для разных ситуаций.
 
2. GNOME: Новый способ организации окон программ в операционной системе. Это «мозаика» — смесь плитки и свободного расположения.

3. Пошаговые методички по методам проектирования, дизайна и исследования интерфейсов от Университета Аризоны.
 
4. Léonie Watson и Rakesh Paladugula: Основные тезисы из дискуссии о поддержке accessibility. Получился отличный чеклист.
 
5. NN/g: Тренды в интранетах 2023 года. Недавно они анонсировали победителей своих ежегодных наград.
 
6. Hajira Atheeque: Подробно разбирает принципы пространственного дизайна в Apple Vision.
 
7. NN/g: Памятка по дизайну аккордеонов в интерфейсах. Когда они работают и когда мешают.
 
8. Hannah Milan: Разные способы наложения текста на изображение в вебе, которые хорошо поддерживают accessibility. Часть 2.
 
#patterns
Первые полсотни мини-выпусков дайджеста о пользовательских исследованиях: done.
 
1. NN/g: Памятка по формулировкам вопросов в опросниках.
 
2. Google: Интересный метод для регулярного замера отношения пользователей к функциональности через серию стандартизированных опросов.
 
3. Okta: Перевод базы знаний и инсайтов из старого инструмента в Dovetail. Интересно, что рынок дозрел и до таких историй.
 
4. Roberta Dombrowski: Советы по поиску направлений для стратегических исследований и расстановке приоритетов между ними.
 
5. Jim Lewis и Jeff Sauro: Изучили, насколько влияет наличие нейтрального варианта ответа в стандартизированных интерфейсных шкалах опросов. В целом — не особо.
 
6. Jim Ross: Изменения в профессии пользовательского исследователя за последние 25 лет. Терминология, зона ответственности, формат проектов и т.п. MeasuringU также изучили изменения названий профессии.
 
7. NN/g: Советы по оплате респондентам в дневниковых исследованиях. Она влияет на детальность этих само-отчётов.
 
8. Lisa van Ekeren: Созданиие базы знаний из прошлых исследований на базе SharePoint.
 
#research
Дайджест продуктового дизайна за август 2023. Дизайн-культура Airbnb, мега-список книг, алгоритмический дизайн, дизайн-системы и токены, интерфейсы мастеров настройки, принципы дизайна, базы знаний исследований, управление роботами и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
vc.ru
ВКонтакте
RSS