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

Я веду Дайджест продуктового дизайна с 2009 года, за счёт чего отлавливаю многие тренды в продуктовом дизайне на самом взлёте. Рассказал о трёх из них, которые здорово помогают в работе: дизайн-системы на токенах, DesignOps и алгоритмический дизайн.

Transcript

1. ЮРИЙ ВЕТРОВ MAIL.RU GROUP
2. 10 ЛЕТ @PDIGEST Зашёл на взлёте кураторства контента – люди-фильтры. 2009: Friendfeed, вместе с Алексеем Ивановым 2010: Первая статья-обзор вышла в мае 2011: Facebook 2015: Рассылка 2017: Телеграм и ВК
3. 86 ВЫПУСКОВ 10 000 ССЫЛОК 50 000 ЧИТАТЕЛЕЙ 5000 18 500 20 000 4000 4000
5. ФОНОВЫЕ ИССЛЕДОВАНИЯ Инвестиции времени окупаются профессиональным и карьерным ростом. Становишься сильнее как специалист и ценнее как сотрудник.
6. 1. БЫСТРЫЕ И ГЛУБОКИЕ ИССЛЕДОВАНИЯ РЫНОЧНЫХ НИШ Когда приходит рабочая потребность. У тебя уже есть готовая подборка паттернов, исследований, успехов и провалов – это дает отличную фору. Часто за полчаса-час собирал сложные отчеты, на которые в другой ситуация ушла бы неделя. Найти материалы, прочитать, оставить только нужное…
7. 2. ОПЕРАТИВНАЯ РЕАКЦИЯ НА ИЗМЕНЕНИЯ РЫНКА Отечественные умные колонки только показали, а ты уже пару лет следишь за конкурентами и знаешь, как можно строить взаимодействие с такими устройствами.
8. 3. ПОВЫШЕНИЕ КРЕДИТА ДОВЕРИЯ Внутри компании и в отрасли в целом. Ты можешь ответить на многие вопросы гораздо раньше и глубже остальных. А значит чаще востребован коллегами, которые доверяют тебе как профессионалу.
9. ТЕМЫ И ТРЕНДЫ Как отличить хайп от тенденции
10. ❑ Паттерны ❑ Дизайн-системы ❑ Понимание пользователя ❑ Инфоархитектура ❑ Инструменты дизайна ❑ UX-исследования ❑ Дизайн в браузере ❑ Продуктовый менеджмент ❑ Метрики и ROI ❑ Дизайн-менеджмент и DesignOps ❑ Командное взаимодействие ❑ Методологии и стандарты ❑ Кейсы ❑ История ❑ Тренды ❑ Для общего развития ❑ Люди и компании в отрасли ❑ Материалы конференций
11. КЛЮЧЕВЫЕ СЛОВА Кирилл Улитин собрал крутой анализ публикаций.
12. UX BUZZWORDS Сайт на его основе. Есть данные до 2018 года.
13. ЕЖЕГОДНЫЕ ОБЗОРЫ ТРЕНДОВ? ШЛЯПА! ОТРАСЛЬ МЕНЯЕТСЯ МЕДЛЕННЕЕ Многие из тенденций развиваются и живут в восходящем виде пару лет, так что видишь их кочующими в такие отчёты из года в год (виртуальная и дополненная реальность, например). Некоторые вроде «анимации», «крупной типографики» или «фоновых видео» уже стали клише в духе гэгов Бенни Хилла и про них наверняка будут вынуждены читать наши внуки.
14. 1. ТЕХНОЛОГИЧЕСКИЕ Новые способы ввода, вывода и обработки информации, удешевление продуктов, новые бизнес-модели и т.п. Это меняет среду, в которой развиваются цифровые продукты. Смартфоны были до Айфона и Андроида, но грамотная переупаковка, бизнес-модель и позиционирование сделало их второй массовой волной технологий после компьютеров.
15. 2. ИНТЕРФЕЙСНЫЕ Новые паттерны; методы изучения пользователей, проектирования и проверки решений. Дружелюбный вид для новых технологий – ниже порог входа и выше отдача. Например, onboarding раньше считали просто серией попапов при первом входе, а сейчас – все обучающие и вовлекающие ходы в интерфейсе до тех пор, пока пользователь не станет активным.
16. 3. ВИЗУАЛЬНЫЕ Свежие приёмы визуального выражения. Это добавляет эстетики утилитарным решениям и позволяет дифференцировать бренды. Они постоянно ремикшируются, а многие – цикличны, сменяя друг друга раз в несколько лет (например, минимализм и декоративность).
17. ВЗАИМОВЛИЯНИЕ ТРЕНДОВ Увеличение экранов мешает дотянуться до верхней части → Мобильные ОС переносят управление вниз.
18. ГИБКИЕ ЭКРАНЫ Можно купить, но дорого. Будут дешеветь → Больше приложений → Новые интерфейсные подходы + визуальные приёмы.
19. СТАТИСТИКА РЫНКА Устоявшиеся практики формируют привычки и ожидания. Текущие тренды влияют на будущие.
20. НЕ ВСЕ ОЖИДАНИЯ ОПРАВДАНЫ Кривая хайпа Gartner. В первую очередь про технологические тренды, но применима и к интерфейсным, и к визуальным.
21. НЕ ВСЕ ОЖИДАНИЯ ОПРАВДАНЫ Похожую картину даёт модель проникновения продукта Geoffrey Moore.
22. ТРАЕКТОРИЯ ТРЕНДОВ: КУДА ИДТИ, А ЧТО УШЛО САМО ❑ Просто популярные практики (избитая анимация или крупная типографика, изометрическая иллюстрация) ❑ Набирающие обороты (кинетическая типографика, перламутровые и голографические цвета, 3D-персонажи в иллюстрации, голосовые интерфейсы и умные колонки, Jobs to Be Done) ❑ Выходящие из моды (чат-боты, метод персонажей, Мемфис)
23. КАРТА ТРЕНДОВ АНИМАЦИЯ КРУПНАЯ ТИПОГРАФИКА ИЗОМЕТРИЧЕСКАЯ ИЛЛЮСТРАЦИЯ ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ КИНЕТИЧЕСКАЯ ТИПОГРАФИКА JOBS TO BE DONE ГОЛОСОВЫЕ ИНТЕРФЕЙСЫ 3D-ПЕРСОНАЖИ В ИЛЛЮСТРАЦИИ ГОЛОГРАФИЧЕСКИЕ И ПЕРЛАМУТРОВЫЕ ЦВЕТА ГИБКИЕ ЭКРАНЫ ЧАТ-БОТЫ МЕТОД ПЕРСОНАЖЕЙ МЕМФИС ТЕХНОЛОГИЧЕСКИЕ ИНТЕРФЕЙСНЫЕ ВИЗУАЛЬНЫЕ ЖАНРЫ И СТАНДАРТЫ
24. Сам рассказ будет в формате дайджеста — три важные для меня темы, которые я детально изучаю и во многом использую в работе.
25. ДИЗАЙН-СИСТЕМЫ НА ТОКЕНАХ На низком старте с 2016 года
26. ТЕРМИН РАЗМЫЛИ К ЧЕРТЯМ Называют всё что угодно – от библиотеки стандартных элементов в Sketch и странички с нарезанными скриншотами до зрелой платформы, действительно работающей на базе распространяемых компонентов со вшитым дизайном. Главный источник правды это сам продукт и нужно озаботиться тем, чтобы как задумано работал именно он.
27. ДИЗАЙН ЧАСТО «ПЕРЕВИРАЕТСЯ» НА ПУТИ ИЗ МАКЕТОВ В РЕАЛИЗАЦИЮ Цепочка «гайдлайн → дизайн → вёрстка → реализация» – тупик, вечная ручная работа. Чтобы избавиться от кучи геморроя по внедрению, улучшению и поддержке продуктов, её нужно перевести в «гайдлайн = дизайн = вёрстка → реализация».
28. UI KIT – ЭТО НЕ ДИЗАЙН-СИСТЕМА Система визуальной идентификации бренда из прошлого. Работать надо с основным материалом среды – кодом.
29. СТАРАЯ И НОВАЯ ШКОЛА Похожи на вид, кардинально различаются в использовании.
30. 1 ВИЗУАЛЬНЫЙ ЯЗЫК Правила, по которым создаются продукты: design.mail.ru/paradigm/
31. 2 ЕДИНЫЕ КОМПОНЕНТЫ В КОДЕ Единственный источник правды. Дизайн «вшит» в них, сервисы получают и обновляют их из единого репозитория.
32. 3 ШАБЛОНЫ ДЛЯ ДИЗАЙНЕРОВ Быстро показать идею, высокоуровневые скетчи. В идеальной ситуации макеты не верстают, а собирают из единых компонентов.
33. ТОКЕНЫ – ДЁШЕВО И СЕРДИТО Когда единый компонентный фреймворк не получается. Слой абстракции под компонентными фреймворками. PARADIGM PRODUCTIVITY МЕДИА B2B ПРОМО ПОЧТА НОВОСТИ MCS САЙТЫ ОБЛАКО КИНО BIZ ПИСЬМА КАЛЕНДАРЬ АВТО
34. КАК РАБОТАЮТ ТОКЕНЫ Config-файл, визуальный язык в переменных. Генерируется файл для СSS-препроцессоров, его подключает фреймворк.
35. ВЕБ И МОБИЛЬНЫЕ ВМЕСТЕ Из одного config-файла делаются версии для любых платформ.
36. ТЕМЫ В КОДЕ
37. ПИКТОГРАММЫ В КОДЕ
38. ОСНОВА ВИЗУАЛЬНОГО ЯЗЫКА Играя с набором параметров, мы можем быстро получить любой элемент. Например, простую кнопку:
39. ТИПОГРАФИКА Все размеры и начертания мы храним в переменных. От проекта к проекту они могут меняться, но основные группы одни и те же.
40. СЕТКА И ОТСТУПЫ Каждый элемент дизайн-системы строится по модулям в 4dp (density independent pixels)
41. ГРАНИЦА И ФОН На помощь приходят чуть более сложные функции (mixin), и прозрачности.
42. HOVER @mixin stateHover ($colorBgSecondary) { background: mix($colorTrueBlack, $colorBgSecondary, 4%); }
43. ACTIVE @mixin stateActive ($colorBgSecondary) { background: mix($colorTrueBlack, $colorBgSecondary, 8%); }
44. ТЕНЬ Элемент приподнят над базовым уровнем (кнопки, карточки) – часть лейаута или дополнительная информация к основному контенту.
45. КНОПКА В СБОРЕ
46. АКЦЕНТНАЯ КНОПКА За счет изменения параметра отвечающего за фон, мы можем сделать из обычной кнопки – акцентную.
47. АКЦЕНТНАЯ КНОПКА
48. ТЕМЫ ОФОРМЛЕНИЯ Управляя значениями переменных мы легко можем формировать элементы и для других проектов.
49. ПЕРЕКЛЮЧЕНИЕ ТЕМ В живом гайдлайне можно пощёлкать несколько из них.
50. МАЛО КТО ДЕЛАЕТ Странно, но примеров на рынке не так много. Хотя это самый простой и быстрый способ стартовать.
51. СВЯЗКА С ИНСТРУМЕНТАМИ Компоненты в коде и символы/компоненты в Sketch/Figma не связаны, поддерживаются параллельно. Но попытки есть.
52. РАБОТАЕТ В ОБРАТНУЮ СТОРОНУ Команда GitHub экспортирует иконки из Figma в основной репозиторий продукта.
53. DESIGN SYSTEMS CLUB Каталог отечественных компонентных дизайн-систем, реализованных на технологическом уровне. http://designsystemsclub.ru/
54. DESIGNOPS Баззворд 2018 года
55. ДИЗАЙН-МЕНЕДЖМЕНТ 3.0 Дизайн-менеджмент, дизайн-лидерство, UX-стратегия или DesignOps? Те же методы, разный фокус – масштабирование. https://jvetrau.com/designops-definition/
56. OPS, I DID IT AGAIN! Термин DevOps уже натягивают на дизайн-системы (Design Systems Ops) и пользовательские исследования (ResearchOps).
57. ПРЕДЫСТОРИЯ Теория менеджмента насчитывает более сотни лет опыта, да и применительно к дизайн-агентствам и промышленному дизайну за десятилетия накоплена немалая экспертиза. Но в сфере цифровых продуктов действительно яркие истории внедрения дизайна на всех уровнях начались только в последнее десятилетие. XIX 1950Е 1980Е 2006 2010 ТЕОРИЯ МЕНЕДЖМЕНТА ДИЗАЙН- АГЕНТСТВА ЧЕЛОВЕКО- КОМПЬЮТЕРНОЕ ВЗАИМОДЕЙСТВИЕ ВТОРАЯ ВОЛНА СТАРТАПОВ КРУПНЫЕ КОМПАНИИ
58. РЕДИЗАЙН НЕ ТОЛЬКО ПРОДУКТОВ, НО И ОРГАНИЗАЦИИ Мало совершить подвиг в виде удачного редизайна устаревшего сервиса – нужно обеспечить повторяемость хороших результатов. Причина плохих продуктов – это плохая машина, которая их производит, так что чинить нужно в первую очередь её.
59. 3 УРОВНЯ ЗРЕЛОСТИ UX
60. ПАТТЕРНЫ ДИЗАЙН-МЕНЕДЖМЕНТА Методы и практики, которые помогут повысить уровень зрелось компании. Улучшения идут от проблем бизнеса к конкретным рецептам для дизайн-менеджеров: ценность для бизнеса → способ решения → паттерн.
61. ЦЕННОСТЬ ДИЗАЙНА ДЛЯ БИЗНЕСА ❑ Качество продукта ❑ Скорость выхода на рынок ❑ Снижение рисков при выходе на рынок ❑ Увеличение аудитории и прибыли продукта ❑ Усиление бренда ❑ Найм и развитие дизайнеров ❑ Осознание ценности дизайна
62. КАЧЕСТВО ПРОДУКТА Повысить, чтобы увеличить его ценность для пользователей и снизить затраты на поддержку
63. РЕШЕНИЕ: КОНТРОЛЬ КАЧЕСТВА НА УРОВНЕ МАКЕТОВ О: Дизайн-ревью Т: Дизайн-система Т: Дизайн-долг Т: Чек-листы Т: Юзабилити-тестирование С: Общая дизайн-грамотность С: Влияние на продуктовый план
64. РЕШЕНИЕ: КОНТРОЛЬ КАЧЕСТВА НА УРОВНЕ РЕАЛИЗАЦИИ О: Дизайн-ревью Т: Дизайн-система Т: Чек-листы Т: Юзабилити-тестирование С: Общая дизайн-грамотность
65. РЕШЕНИЕ: КОНТРОЛЬ КАЧЕСТВА НА УРОВНЕ ПРОДУКТА И КОМПАНИИ Т: Дизайн-долг С: Долгосрочное планирование С: Клуб дизайн-лидеров С: Метрики дизайна, завязанные на бизнес
66. 2018: ПИРАМИДА СТРАТЕГИЧЕСКОГО ПЛАНИРОВАНИЯ ЦЕННОСТИ МИССИЯ ВИДЕНИЕ СТРАТЕГИЯ ТАКТИКА ВСЯ ЖИЗНЬ 20 ЛЕТ 5-10 ЛЕТ 1-2 ГОДА 3 МЕСЯЦ – 1 ГОД
67. ЦЕННОСТИ ❑ Пользователи ❑ Бизнес ❑ Дизайнеры ❑ Здоровая продуктовая команда в целом
68. лет МИССИЯ Mail.ru Group – одна из самых крупных и успешных интернет- компаний в России и Европе целом, суммарная ежемесячная аудитория продуктов – 150 млн человек. Мы хотим, чтобы дизайн наших продуктов соответствовал этому уровню и являлся важным рыночным дифференциатором для компании, усиливая бренд. Он должен задавать тон в Рунете и котироваться в мировом масштабе. Бренд должен иметь положительное, а не отрицательное предубеждение.
69. лет ВИДЕНИЕ Хороший дизайн продукта решает проблемы пользователей и бизнеса в здравом компромиссе​. Пользователям проще выполнять свои задачи и они лучше понимают ценность продукта, а бизнес достигает своих целей и улучшает позиции на рынке. Дизайнеры помогают найти здравый баланс между этими двумя полюсами и помнят о важных вещах:
70. ВИДЕНИЕ ❑ Формируют положительное предубеждение для бренда ❑ Масштабируют хорошие практики ❑ Эффективны ❑ Проактивны
71. года СТРАТЕГИЯ Конкретные задачи и решения, а также просто проблемы, которые ещё нужно осознать как побороть.
72. ❑ Приносим ценность продуктам и бизнесу. ❑ Помогаем запускать продукты и функции быстро и качественно. ❑ Все сотрудники компании понимают ценность дизайна. ❑ Бренд продуктов и работодателя.
73. ПРИНОСИМ ЦЕННОСТЬ ПРОДУКТАМ И БИЗНЕСУ
74. ПРОДУКТОВЫЕ ИНСАЙТЫ ИСХОДЯТ ОТ ДИЗАЙНЕРОВ ❑ База знаний ❑ Дизайн-решения привязаны к продуктовым метрикам и проверяются ❑ Карта взаимодействия (CJM) ❑ Методики поиска и решения проблем ❑ Влияние на продуктовый план ❑ Концепты и конкурсы ПРИНОСИМ ЦЕННОСТЬ ПРОДУКТАМ И БИЗНЕСУ
75. ХОРОШИЙ ДИЗАЙН НА ЖИВЫХ ПРОДУКТАХ ❑ Дизайн-система Paradigm ❑ Дизайн-долг ❑ Дизайн-ревью ❑ UX-тестирование ещё чаще ❑ Учёт разных групп пользователей (accessibility и т.п.) ❑ Тексты в интерфейсах ПРИНОСИМ ЦЕННОСТЬ ПРОДУКТАМ И БИЗНЕСУ
76. месяца ТАКТИКА: БЛИЖАЙШИЕ OKR (OBJECTIVE & KEY RESULTS) Выбираем три крупные темы на квартал, каждую из них описываем в виде цели, решающей проблему, и метрик, показывающих успешность внедрения. Фокус! Ставим в конце квартала, актуализируем каждую неделю.
77. КАРТА ВЗАИМОДЕЙСТВИЯ (CJM) Повысить вовлечённость дизайнера в продукт и отдачу от его действий, видя весь жизненный цикл работы с job story. Говорить с менеджерами продуктов на одном языке. ❑ Выработать единый формат job stories и CJM ❑ Для пилотных продуктов есть описание job stories и CJM по выбранным задачам ❑ Проведена как минимум одна продуктовая встреча на базе CJM по каждому из этих продуктов (менеджеры с дизайнерами поработали по ней) ПРИНОСИМ ЦЕННОСТЬ ПРОДУКТАМ И БИЗНЕСУ → ПРОДУКТОВЫЕ ИНСАЙТЫ ИСХОДЯТ ОТ ДИЗАЙНЕРОВ
78. ВЫРАБОТАТЬ ЕДИНЫЙ ФОРМАТ JOB STORIES И CJM ❑ CJM: Выбрать инструмент ❑ CJM: Шаблон ❑ Job Stories: Собрать примеры Job Stories — про процесс и про прогресс ❑ Синхронизировать подход с UX-лабораторией КАРТА ВЗАИМОДЕЙСТВИЯ (CJM)
79. ДЛЯ ПИЛОТНЫХ ПРОДУКТОВ ЕСТЬ ОПИСАНИЕ JOB STORIES И CJM ПО ВЫБРАННЫМ ЗАДАЧАМ ❑ Продукт №: Job stories ❑ Продукт №: CJM ❑ Синхронизировать результаты с UX-лабораторией КАРТА ВЗАИМОДЕЙСТВИЯ (CJM)
80. ПРОВЕДЕНА КАК МИНИМУМ ОДНА ПРОДУКТОВАЯ ВСТРЕЧА НА БАЗЕ CJM ❑ Продукт №: Встреча с менеджером (барьеры, мотиваторы) ❑ Продукт №: Макеты гипотез решения проблем ❑ Продукт №: Решения внедрены ❑ Продукт №: Собраны метрики, повторная встреча с менеджером для оценки результата КАРТА ВЗАИМОДЕЙСТВИЯ (CJM)
81. Идея простая – мы превращаем абстрактное желание в банальный план проекта.
82. ПИЛОТ → ЕВАНГЕЛИЗМ → МАСШТАБИРОВАНИЕ Наш основной подход к внедрению любых подходов и практик. Сначала обкатываем формат на нескольких тестовых задачах и проектах. После того, как они показали себя хорошо – рассказываем об успехе внутри компании и получаем новые внедрения.
83. ПАТТЕРНЫ ДИЗАЙН-МЕНЕДЖМЕНТА Будущая книга на основе серии статей о UX-стратегии. http://dmpatterns.com/
84. ПАТТЕРНЫ ДИЗАЙН-МЕНЕДЖМЕНТА Курс о дизайн-менеджменте цифровых продуктов на Bang Bang Education. https://bangbangeducation.ru/course/dmpatterns
85. АЛГОРИТМИЧЕСКИЙ ДИЗАЙН Шумит с 2016 года
86. РОБОТЫ ЗАМЕНЯТ ДИЗАЙНЕРОВ? Нет. Это скорее экзо-скелет для дизайнеров, где мы в паре с алгоритмами решаем продуктовые задачи. Самое время переосмыслить современную роль дизайнера.
87. THE GRID CMS Сама подбирает шаблоны, оформление контента, обрабатывает фото. Делает A/B-тесты для выбора лучшего решения.
88. ПАРНЫЙ ДИЗАЙН С КОМПЬЮТЕРОМ Полный отказ от дизайнера приведёт к штампованным и не всегда хорошим результатам (хотя в любом случае поднимет общий уровень качества) – революции в профессии так не делаются. Зато можно сгрузить часть рутины. И найти время для большого рывка.
89. 1. УВЕЛИЧЕНИЕ ВОЗМОЖНОСТЕЙ Первое поколение перевело аналоговые инструменты в программы и развивается по пути увеличения возможностей.
90. 2. УБИРАНИЕ РУТИНЫ Второе научилось брать на себя часть рутинных операций, которые раньше требовали профессиональной экспертизы.
91. 3. СОАВТОРСТВО Третье должно стать соавтором решений, помогая находить новые интересные направления.
92. AUTODESK DREAMCATCHER Основан на идее генеративного дизайна, который давно используется в перфомансах, одежде, архитектуре.
93. ПОСТРОЕНИЕ ИНТЕРФЕЙСА
94. ПРОСТЫЕ ИНСТРУМЕНТЫ ПАБЛИШИНГА Medium, Readymag и Tilda уже сократили количество ручной работы – в них полно добротных шаблонов, с помощью которых можно и без дизайнера собрать неплохой результат. Улучшение шаблонов сделает порог входа ещё ниже.
95. МОЙ ИНТЕРЕС: АВТОМАТИЗИРОВАННАЯ ЖУРНАЛЬНАЯ ВЕРСТКА Мы описывали для одного из проектов в 2012. Контент не имел семантики, а переверстать архив вручную – затратно. Скрипт разбирал статью и исходя из её контента (количество абзацев и слов в каждом, фотографии и их форматы, врезки с цитатами и таблицами и т.п.) выбирал типовой паттерн для представления каждого куска в эффектном журнальном виде. И следил, чтобы паттерны чередовались и материал не выглядел однообразно.
96. DUPLO Похожую модель недавно реализовал Flipboard.
97. VOX MEDIA: CHORUS CMS Из коллекции паттернов алгоритм собирает гармоничные варианты главной страницы, оценивает их эффективность и выбирает оптимальный.
98. DESIGNSCAPE Автоматически улучшает композицию макета. Решает мелкие косяки и предлагает другую компоновку.
99. BILLUI Плагин для Sketch генерирует вариации интерфейса. Выбираете параметры и получаете быстрые наброски.
100. AIRBNB: СКЕТЧ В КОМПОНЕНТ Сканируют бумажные скетчи интерфейсов и превращают их в готовый макет на базе типовых компонентов.
101. ПОДГОТОВКА ГРАФИКИ И КОНТЕНТА
102. РУТИНА :( Создание однотипной графики в разных вариациях – одна из самых унылых частей работы дизайнера. Это отнимает уйму времени и демотивирует, при том что эти силы можно было бы потратить на более осмысленную продуктовую работу.
103. ГЕНЕРАТОР БАННЕРОВ NETFLIX Скрипт вырезает персонажей для постеров, накладывает тексты и делает автоматические эксперименты со всем этим. Магия!
104. …И ИХ ПЕРСОНАЛИЗАЦИЯ В зависимости от того, что лучше зайдёт – например, настроение сцены или кадр с конкретным актёром.
105. РОБО-РЕДАКТОР ENGADGET Воспитали робота-подмастерье для написания простых новостных заметок о новых гаджетах. Уф-ф-ф!
106. ПЕРЕНОС СТИЛЯ: PRISMA Чёрная магия происходит в нейросетях. Prisma сделала перенос стиля известных художников на фото быстрым и массовым.
107. THIS PERSON DOESN’T EXIST Плагин для Sketch генерирует правдоподобные лица несуществующих людей.
108. ФОТОГРАФИЯ ИЗ НАБРОСКА Экспериментальное решение Nvidia превращает набросок в фотографию природного ландшафта.
109. ПЕРВЫЙ ИНСТРУМЕНТ Bloma от команды Creative.ai. Позволяет создавать постеры, рекламу и другие простые форматы.
110. LOGOJOY Заменяет недорогого фрилансера для создания логотипов. Генерирует варианты, показывает примерный фирстиль.
111. ПЕРСОНАЛИЗАЦИЯ ИНТЕРФЕЙСА Для узкого сегмента аудитории или конкретного пользователя.
112. ДАВНО ПОНЯТНЫЙ ПРИМЕР Мы видим это каждый день в ленте соцсетей, результатах поиска, рекомендательных системах, да и многих других массовых продуктах. Это снимает необходимость самому фильтровать потоки информации. Да и такое проявление заботы со стороны продукта создаёт лучшую эмоциональную привязку.
113. ПЕРСОНАЛИЗИРОВАННЫЙ ТЕКСТ Persado оптимизирует рекламу для конкретного пользователя. Пробуют применить наработки и к интерфейсам.
114. SPOTIFY DISCOVER WEEKLY Giles Colborne: из привычного дизайна интерфейсов это список треков, а вся основная работа – рекомендательная система.
115. ПОДДЕРЖКА ПРИНЯТИЯ РЕШЕНИЙ Дизайнеры Airbnb общались с инженерной командой и научились прогнозировать цену в определённом городе в определённый сезон, так что пользователям проще задать конкурентоспособный тариф.
116. JOHN MCCARTHY Автор понятия «Искусственный интеллект» говорил: «Как только сложная технология начинает просто работать, никто больше не называет её ИИ».
117. ADOBE SENSEI Платформа, которая использует машинное обучение и станет основой для будущих «умных» функций продуктов Adobe.
118. САЙТ-КОЛЛЕКЦИЯ http://algorithms.design/
119. HYPE CYCLE Энтузиазм упал – не так просто, наигрались в базовые идеи вроде конструкторов сайтов, генераторов логотипов и наложения стиля. Зато появляются инструменты (Adobe, Bloma, плагины в Sketch). А по мере накопления критической массы будут и более сложные решения.
120. ЛЮДИ ДЕШЕВЛЕ :( Часто проще нанять человека за плошку риса, чем делать алгоритм.
121. ВЫВОДЫ Методов и подходов хватает. Их просто не всегда используют.
122. ЧТО ДАЛЬШЕ? АНИМАЦИЯ КРУПНАЯ ТИПОГРАФИКА ИЗОМЕТРИЧЕСКАЯ ИЛЛЮСТРАЦИЯ ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ КИНЕТИЧЕСКАЯ ТИПОГРАФИКА JOBS TO BE DONE ГОЛОСОВЫЕ ИНТЕРФЕЙСЫ 3D-ПЕРСОНАЖИ В ИЛЛЮСТРАЦИИ ГОЛОГРАФИЧЕСКИЕ И ПЕРЛАМУТРОВЫЕ ЦВЕТА ГИБКИЕ ЭКРАНЫ ЧАТ-БОТЫ МЕТОД ПЕРСОНАЖЕЙ МЕМФИС ТЕХНОЛОГИЧЕСКИЕ ИНТЕРФЕЙСНЫЕ ВИЗУАЛЬНЫЕ ЖАНРЫ И СТАНДАРТЫ
123. ИНФОРМАЦИОННЫЕ ПОТОКИ FEEDLY ENGADGET/ FAST COMPANY DRIBBBLE/ BEHANCE/PANDA FACEBOOK/VK/ TWITTER YOUTUBE /VIMEO PINBOARD ONENOTE PINTEREST ДАЙДЖЕСТ
124. ONENOTE Кросс-платформенная записная. Кому-то ближе Evernote или Notion.
125. НОВЫЕ ПРОДУКТЫ УМНЫЕ ЧАСЫ И БРАСЛЕТЫ АВТОМОБИЛЬНЫЕ ИНТЕРФЕЙСЫ ПЛАНШЕТНЫЕ ОС Это история отрасли, которая структурирует понимание того что есть сейчас и пути, по которому мы пришли к этому.
126. ИСТОРИЯ ИНТЕРФЕЙСОВ ВИДЕНИЕ БУДУЩЕГО СОЦИО-ТЕХНИЧЕСКИЕ СИСТЕМЫ ВАЖНЫЕ ЛЮДИ Все отсылки из Википедии и других источников, собранные в хронологическом порядке.
127. СТАТИСТИКА РЫНКА МОБИЛЬНЫЙ ВЕБ ЭЛЕКТРОННАЯ ПОЧТА СМАРТФОНЫ: ОС И ПРОИЗВОДИТЕЛИ По разным срезам – смартфоны, планшеты, конкретные отрасли.
128. PINBOARD Онлайн-закладки, куда в 2006 перенес все из браузерных. Только непротухающая информация – новостей там почти нет. https://pinboard.in/u:jvetrau
129. ПРИМЕРЫ ВЫБОРОК СТАТЬИ О РЕДИЗАЙНЕ НОВОСТНЫХ САЙТОВ ШАБЛОНЫ ДИЗАЙНА ДЛЯ УМНЫХ ЧАСОВ ИССЛЕДОВАНИЯ ПО ЧИТАБЕЛЬНОСТИ Залог хорошей коллекции – грамотная система тегов, заточенная под поиск и выборки.
130. CONFLUENCE Внутренняя рабочая база знаний в привязке к продуктам Mail.ru Group. Её хочется строить по схожим принципам.
131. СКАЖИ МНЕ, ЧТО ТЫ ЧИТАЕШЬ… Дима Карпов говорит, что арт-директора можно оценить по его Pinterest. Идея ложится и на фоновые исследования в целом.
132. В ЧЕМ ФОКУС? ФОКУС! ❑ Тщательная фильтрация информации. Не трачу время на то, что не пригодится ни в каком виде. ❑ Читать по диагонали или вообще не дочитывать то, что не несет новой информации. ❑ Браться только за дела, которые развивают. И которые хватит времени довести до конца.
133. ЧАС-ПОЛТОРА В ДЕНЬ НА ПРОФЕССИОНАЛЬНОЕ ЧТЕНИЕ Если у вас уже сложилась модель предметной области, то дальше идет приращение знаний, т.е. корректировка и дополнение этой модели. К сожалению, большинство публикаций рассказывают об одном и том же. Так что можно позволить себе быстро пробегать их глазами, выискивая только новое.
134. КОНЦЕПТ-КАРЫ Наша цель – обновлять продукты чаще. Для этого делаем концепты каждый год и разбираем их на детали, часть из которых попадает в жизнь. Хорошо работают микро- хакатоны. Получается так: Фоновые исследования → Концепт-кары → Продукты Фоновые исследования → OKR → Продукты
135. Всегда в курсе новых методов и практик. Нахожу примеры их внедрения, что сильно помогает использовать на деле. OKR для развития команды, многие идеи попадают в план. Дайджест как R&D.
136. P.S. Вы можете получить профит, даже если будете собирать только часть из этой информации. Считайте, что это ваше постоянное обучение после университета – такой же задел на будущее. Так что дерзайте!
137. СПАСИБО! ЮРИЙ ВЕТРОВ jvetrau.com t.me/pdigest