Дайджест продуктового дизайна

2022-08-15 10:07:24 Собрал дайджест продуктового дизайна за июль 2022. Тарифные сетки, шпаргалка по исследованиям, первый обзор трендов, тёмная тема, таксономия, субкомпоненты и анимация в дизайн-системах, методы для воркшопов, алгоритмический дизайн и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS Открыть/Комментировать

2022-08-08 10:07:29 1 сентября стартует восьмой поток моего курса о дизайн-менеджменте цифровых продуктов на Bang Bang Education. На первых семи отучились почти 500 дизайн-директоров, дизайн-менеджеров, арт-директоров, ведущих дизайнеров, креативных директоров из многих отечественных (и нескольких международных) компаний: 1C, ABBYY, AIC, Ак Барс, Альфа-Банк, Apalon, App in the Air, Arrival, Aviasales, Avito, Badoo, BBC, БКС, ВТБ, Chatfuel, Clay, Газпром, Delivery Club, Детский мир, Dodo Pizza, ДОМ.РФ, EPAM, Foodplex, HeadHunter, inDriver, Kaspi, Klarna, Комитет, Красцветмет, Леруа Мерлен, Литрес, Луч, MacPaw, Mail.ru Group, Манго Офис, ManyChat, М.Видео, Microsoft, Miro, Модульбанк, МТС, Okko, OneTwoTrip, Opera, Открытие, Ozon, PayPal, ПИК, ПСБ, 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 Открыть/Комментировать

2022-08-04 10:24:03 Если бы мне давали юань за каждый мини-выпуск дайджеста о пользовательских исследований, 我本来已经收集了 39:
 
1. Christian Rohrer: Немного обновил свою легендарную шпаргалку по методам. К ней идёт хорошее пояснение категоризации под задачу.
 
2. Stéphanie Walter: Крутая памятка по проведению дневниковых исследований.
 
3. Condens: Как составить карту родства тем из результатов исследования. В идеале — в виде совместной рабочей сессии.
 
4. Контур: Формат презентации результатов исследования для продуктовых команд, с которыми исследователь не работает постоянно.
 
5. Flexport: Приведение в порядок всех опросов. Как привязали их к конкретным вопросам и выстроили внятный график, который не достаёт пользователей.
 
6. Базы знаний и инсайтов:
— Jake Burghardt: Ценнейший боевой опыт внедрения. Так, чтобы она не просто собиралась, а использовалась продуктовыми командами.
 
— Александр Фенин: Как собирать обратную связь от пользователей в Notion и построить базу вокруг неё
 
— Reveall: Сервис для сбора обратной связи от пользователей и ранжирования беклога. Интервью Ferdinand Goetzen оттуда.
 
7. NN/g: Памятка по проведению фокус-групп. Метод имеет сильно ограниченное применение в интерфейсах и много врождённых проблем, но полезен в части ситуаций при грамотном использовании.
 
8. MeasuringU: Статистика востребованности методов из их недавнего опроса 625 специалистов по интерфейсам.
 
9. Paul McInerney: Пачка комичных историй из своего опыта проведения исследований.
 
10. NN/g: Техника «воронки» при проведении качественных исследований. Модератор постепенно идёт от общих вопросов к детальным.
 
11. User Interviews: Памятка по проведению юзабилити-тестирования.
 
#research Открыть/Комментировать

2022-08-01 10:04:35 Ссылок о дизайн-системах новую пачку держите вы:
 
1. Salesforce: Новый язык анимации. Сам раздел и примеры. Как он внедряется на ключевых сайтах.
 
2. Nathan Curtis: Концепция субкомпонентов. Они полезны, если хочется дать командам возможность кастомизации типовых компонентов, но сделать её контролируемой.
 
3. Brad Frost: Подход к созданию тем оформления. В статье толковая классификация ситуаций, в которых тема нужна.
 
4. Gusto Workbench: Процесс создания нового компонента.
 
5. Storybook: Обзор обновлений интерфейса грядущей версии 7.0. В целом, конечно, требуется скорее качественный рывок вперёд.
 
6. Amy Hupe: Как правильно упоминать всех причастных к доработке дизайн-системы.
 
7. Shopify: Инициатива PolarisLab, которая призвана делать эксперименты с дизайн-системой вместе с продуктовыми командами.
 
#designsystems Открыть/Комментировать

2022-07-21 10:06:30 Вал новостей по внедрению тёмной темы давно спал, но на пыльной полке завалялась эта мини-подборка и надо отпустить её на волю:
 
1. Brad Frost: Предлагает разделять тёмную тему и инвертированный режим в дизайн-системах. Они могут решать одинаковые задачи (например, смена цвета текста и иконок), но это вызвано разными ситуациями — общая настройка устройства пользователя или конкретный блок в интерфейсе.

2. Figma: Создание тёмной темы. Ещё один пример того, что этот переход — один из главных драйверов перехода к семантическим токенам.
 
3. Danny Banks: Инструкция по созданию тёмной темы на фреймворке Style Dictionary, облегчающем поддержку токенов.
 
4. Поддержка в вебе:
— Lea Verou: Как быстро реализовать тёмную тему через цветовую модель HSL. Правда, параметр яркости в ней варьируется от цвета к цвету, так что он советует похожую по смыслу модель LCH.
 
— Chris Coyier: Проблема дёрганого автоматического переключения между обычной и тёмной темой в браузере.
 
— Bramus Van Damme: Переключение тёмной темы должно быть кнопкой в самом браузере, а не на конкретном сайте. Это сэкономит много лишнего кода. Он показывает своё предложение по реализации.
 
— Ryan Feigenbaum: Памятка по созданию переключателя тёмной темы на сайте.
 
5. Robin Rendle: Создание тёмной темы для сервиса Sentry.
 
Черновик подборки лежал аж с марта прошлого года, так что пшикните пару раз освежителем убрать запах нафталина.

#designsystems #darkmode Открыть/Комментировать

2022-07-18 10:04:10 И снова о том, как делать интерфейсные решения по-красоте на основе лучших паттернов и практик:
 
1. Виталий Фридман: Таблица тарифов. Тонна примеров для разных ситуаций.
 
2. Graeme Fulton: Анализ особенностей работы курсора в iPad, который развивает классическую идею курсора, существовавшую много десятилетий без особых изменений.
 
3. NN/g: Продолжение анализа интерфейсов сайтов дорогой одежды и аксессуаров. Ожидания типичных пользователей и примеры реализации.
 
4. Peter Ramsey: Особенности использования карт Google и Apple на смартфонах.
 
5. Baymard: Размеры в интернет-магазинах.
 
6. NN/g: Памятка по концепции таксономии в информационной архитектуре.

7. Kaylan Wingard: Анализ интерфейсов нескольких поколений устройств для диабетиков.
 
8. Albert Mauri: Навигационные паттерны для перемещения между сценами в виртуальной реальности.
 
#patterns Открыть/Комментировать

2022-07-14 10:04:56 До сотой мини-подборки о пользовательских исследований осталось всего 62 выпуска:
 
1. Толковая подборка мнений сильных руководителей UX-исследований на тему разных аспектов ResearchOps. Демократизация, база знаний и инсайтов, инструменты и другое.
 
2. Maze: Советы по демократизации исследований в компании. Как учить дизайнеров и менеджеров продуктов, какие проекты безопасно отдавать им.
 
3. Lyft: Ещё о демократизации: вовлечение дизайнеров и менеджеров продуктов в простые исследования. Стандартный подход быстрых тестов в компании.
 
4. Jeff Sauro и Jim Lewis: Сравнивают разные способы проведения исследований, в которых респондент проговаривает свои действия. Насколько критичны прерывания от модератора и какой ценой можно избежать их.
 
5. Steve Bromley: Как избежать утечки при проведении игровых тестов до выпуска игры.
 
6. Airtime: Советы по построению своей панели респондентов. Где искать их.
 
7. User Interviews: Шаблон согласия на участие в исследовании и обработку персональных данных. И советы Nielsen/Norman Group на эту же тему.

8. Dan Brown: Подход «быстрых персонажей». Они хорошо работают на рабочих сессиях по продумыванию продукта.
 
#research Открыть/Комментировать

2022-07-11 10:04:02 Собрал дайджест продуктового дизайна за июнь 2022. iOS 16, триумф DALL-E 2, интернет-магазины, метрики для шрифтов, дизайн-долг, книга о дизайн-системах, демократизация и масштабирование UX-исследований, тренды в логотипах, первые 90 дней в компании и ещё сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS Открыть/Комментировать

2022-07-07 10:07:32 В этом году подборка новостей алгоритмического дизайна = подборка новостей про DALL-E 2. Это второе поколение экспериментального генератора фотографий и иллюстраций реальных и выдуманных объектов по текстовому описанию от OpenAI. Уровень, конечно, фантастический — многие из результатов можно хоть сейчас без стыда использовать в реальных продуктах. Одно из самых сильных явлений в истории алгоритмического дизайна.

Scott Alexander учил нейросеть рисовать витражи с определёнными сюжетами. Рассказ чумовой — он постоянно уточнял формулировку запроса, чтобы добиться определённого результата. Это отличный пример того, как дизайнеры могут управлять роботами-дизайнерами.

Энтузиасты налево и направо упражняются в том, что можно сделать:
— Красочные иконки от Charlota Blunarova. Фантастическое качество и модный стиль.

— Шикарный мемасный форс. Дикие концепции вроде «Ice Cube in an ice cube», «Plague doctor Onlyfans» или «Jesus speaking at a TED talk».

— Обложка Cosmopolitan, на которую у Карен Ченг ушло под сотню часов правильного формулирования запросов.

— Фотореалистичные люди.

— Развитие классических картин.

— Фотоаппараты в духе персонажей «Звёздных войн» и других фильмов от Mathieu Stern.

— Забавный гибрид Wordle и DALL-E.

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

Google сделали аналог Imagen — ещё один генератор фото и иллюстраций по текстовому описанию (обзор). Хвалятся качеством, но показанные примеры явно слабее.

После долгой стагнации в теме идёт мощный качественный прорыв, который реально снимает часть рутины с дизайнера. Правда, немного позже — когда инструмент полноценно станет доступен всем).

#ai #algorithms Открыть/Комментировать

2022-07-04 10:04:24 Нет лучше для подборки темы,
чем тонна ссылок про дизайн-системы
 
1. SuperFriendly: Мини-книга «Design System in 90 Days», в дополнение к которой идут шаблоны для воркшопов. Стоит она прилично, $349. Но ребята — одни из лучших в теме.
 
2. Gabe Scholz: Годные советы по разработке компонентов. Многие из них полезны для управления процессом и дизайна.
 
3. Eric Bailey: Список всех возможных состояний компонентов интерфейса.
 
4. Adam Argyle: Все аспекты реализации кнопки в коде с учётом всех современных требований (состояния, accessibility, тёмная тема и т.п.).
 
5. Sehee Lee: Процесс добавления новых иконок в Material Design.
 
6. Shopify: Рассказ об обновлении дизайн-системы. Хотя компоненты были внедрены широко, покрытие токенами было сильно меньше и нужно было починить это.
 
7. Alex Bueno: Занятная концепция дизайн-систем в виде Евклидовой модели.
 
8. Storybook:
— Интерактивное тестирование компонентов.
 
— Автоматизированное тестирование accessibility.

— Переключатель темы оформления.
 
9. Dan Mall: Критика подхода, когда команда тратит слишком много сил на старте на определение «фундамента» — например, системы цветов и отступов. Для начинающих компаний проще взять хоть что-то, а потом дорабатывать — при правильной архитектуре дизайн-системы это быстро и недорого. Ну а вместо этого сфокусироваться на главном — покрытии в продуктах и вовлечении команд.
 
10. Nathan Curtis: Серия статей о процессе тестирования компонентов в Figma. Часть 2 и 3.
 
11. Nathan Curtis: Форматы общих библиотек в Figma. Как организовать команду и процесс обновления, а также разделить компоненты на отдельные частные библиотеки.
 
12. CSS-фреймворки и библиотеки:
— Коллекция компонентов интерфейса на чистом CSS.
 
— Spruce: Ещё один простой CSS-фреймворк.
 
13. Исследования рынка:
— Sparkbox: Опросили 219 специалистов на тему их главных задач и болей во внедрении.
 
— ZeroHeight: Опрос 500 специалистов, которые работают над дизайн-системами (как в коде, так и в дизайн-инструментах). Есть некоторое количество интересных моментов, хотя и ограниченное.
 
14. Примеры дизайн-систем:
— Gusto.
 
— Culture Amp.
 
15. Daniel Yuschick: Особенности нового свойства CSS color-contrast(), которое здорово поможет в повышении качества accessibility. Это позволит автоматически выбирать цвет шрифта для текущего фона из набора возможных.
 
16. UXPin: Новая функция управления компонентами в Merge позволяет импортировать реализацию в коде в инструмент дизайна, а дальше — собирать интерактивные прототипы.
 
17. Brad Frost: Беседа о текущем состоянии дизайн-систем и его работе со Storybook.
 
18. Цветовые палитры:
— WTTJ: Соответствие требованиям accessibility.
 
— Primer Prism: GitHub открыли наружу свой генератор цветовых палитр, который помогает создать тёмную тему оформления и другие темы, где основной цвет — не белый. Анонс и обзор.
 
— Adobe Spectrum: Очередное обновление, которое использует сотня приложений компании.
 
19. Рамблер: Тематизация виджета комментариев для разных сервисов. Как выделить общие и настраивающиеся элементы.
 
#designsystems Открыть/Комментировать