Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yury Vetrov
April 06, 2019

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

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

Yury Vetrov

April 06, 2019
Tweet

More Decks by Yury Vetrov

Other Decks in Design

Transcript

  1. ЮРИЙ ВЕТРОВ
    MAIL.RU GROUP

    View full-size slide

  2. 10 ЛЕТ @PDIGEST
    Зашёл на взлёте кураторства контента – люди-фильтры.
    2009: Friendfeed, вместе с Алексеем Ивановым
    2010: Первая статья-обзор вышла в мае
    2011: Facebook
    2015: Рассылка
    2017: Телеграм и ВК

    View full-size slide

  3. 86
    ВЫПУСКОВ
    10 000
    ССЫЛОК
    50 000
    ЧИТАТЕЛЕЙ
    5000
    18 500
    20 000
    4000
    4000

    View full-size slide

  4. ФОНОВЫЕ ИССЛЕДОВАНИЯ
    Инвестиции времени окупаются профессиональным и
    карьерным ростом. Становишься сильнее как специалист
    и ценнее как сотрудник.

    View full-size slide

  5. 1.
    БЫСТРЫЕ И ГЛУБОКИЕ
    ИССЛЕДОВАНИЯ РЫНОЧНЫХ НИШ
    Когда приходит рабочая потребность. У тебя уже есть готовая
    подборка паттернов, исследований, успехов и провалов – это
    дает отличную фору.
    Часто за полчаса-час собирал сложные отчеты, на которые в
    другой ситуация ушла бы неделя. Найти материалы,
    прочитать, оставить только нужное…

    View full-size slide

  6. 2.
    ОПЕРАТИВНАЯ РЕАКЦИЯ НА
    ИЗМЕНЕНИЯ РЫНКА
    Отечественные умные колонки только показали, а ты уже
    пару лет следишь за конкурентами и знаешь, как можно
    строить взаимодействие с такими устройствами.

    View full-size slide

  7. 3.
    ПОВЫШЕНИЕ КРЕДИТА ДОВЕРИЯ
    Внутри компании и в отрасли в целом. Ты можешь ответить на
    многие вопросы гораздо раньше и глубже остальных.
    А значит чаще востребован коллегами, которые доверяют
    тебе как профессионалу.

    View full-size slide

  8. ТЕМЫ И ТРЕНДЫ
    Как отличить хайп от тенденции

    View full-size slide

  9. ❑ Паттерны
    ❑ Дизайн-системы
    ❑ Понимание пользователя
    ❑ Инфоархитектура
    ❑ Инструменты дизайна
    ❑ UX-исследования
    ❑ Дизайн в браузере
    ❑ Продуктовый менеджмент
    ❑ Метрики и ROI
    ❑ Дизайн-менеджмент и
    DesignOps
    ❑ Командное взаимодействие
    ❑ Методологии и стандарты
    ❑ Кейсы
    ❑ История
    ❑ Тренды
    ❑ Для общего развития
    ❑ Люди и компании в отрасли
    ❑ Материалы конференций

    View full-size slide

  10. КЛЮЧЕВЫЕ СЛОВА
    Кирилл Улитин собрал
    крутой анализ публикаций.

    View full-size slide

  11. UX BUZZWORDS
    Сайт на его основе.
    Есть данные до 2018 года.

    View full-size slide

  12. ЕЖЕГОДНЫЕ ОБЗОРЫ ТРЕНДОВ?
    ШЛЯПА!
    ОТРАСЛЬ МЕНЯЕТСЯ МЕДЛЕННЕЕ
    Многие из тенденций развиваются и живут в восходящем
    виде пару лет, так что видишь их кочующими в такие отчёты
    из года в год (виртуальная и дополненная реальность,
    например). Некоторые вроде «анимации», «крупной
    типографики» или «фоновых видео» уже стали клише в духе
    гэгов Бенни Хилла и про них наверняка будут вынуждены
    читать наши внуки.

    View full-size slide

  13. 1.
    ТЕХНОЛОГИЧЕСКИЕ
    Новые способы ввода, вывода и обработки информации,
    удешевление продуктов, новые бизнес-модели и т.п. Это
    меняет среду, в которой развиваются цифровые продукты.
    Смартфоны были до Айфона и Андроида, но грамотная
    переупаковка, бизнес-модель и позиционирование сделало
    их второй массовой волной технологий после компьютеров.

    View full-size slide

  14. 2.
    ИНТЕРФЕЙСНЫЕ
    Новые паттерны; методы изучения пользователей,
    проектирования и проверки решений. Дружелюбный вид для
    новых технологий – ниже порог входа и выше отдача.
    Например, onboarding раньше считали просто серией
    попапов при первом входе, а сейчас – все обучающие и
    вовлекающие ходы в интерфейсе до тех пор, пока
    пользователь не станет активным.

    View full-size slide

  15. 3.
    ВИЗУАЛЬНЫЕ
    Свежие приёмы визуального выражения. Это добавляет
    эстетики утилитарным решениям и позволяет
    дифференцировать бренды.
    Они постоянно ремикшируются, а многие – цикличны, сменяя
    друг друга раз в несколько лет (например, минимализм и
    декоративность).

    View full-size slide

  16. ВЗАИМОВЛИЯНИЕ ТРЕНДОВ
    Увеличение экранов мешает дотянуться до верхней части →
    Мобильные ОС переносят управление вниз.

    View full-size slide

  17. ГИБКИЕ ЭКРАНЫ
    Можно купить, но дорого. Будут дешеветь → Больше приложений
    → Новые интерфейсные подходы + визуальные приёмы.

    View full-size slide

  18. СТАТИСТИКА РЫНКА
    Устоявшиеся практики формируют привычки и ожидания.
    Текущие тренды влияют на будущие.

    View full-size slide

  19. НЕ ВСЕ ОЖИДАНИЯ ОПРАВДАНЫ
    Кривая хайпа Gartner. В первую очередь про технологические
    тренды, но применима и к интерфейсным, и к визуальным.

    View full-size slide

  20. НЕ ВСЕ ОЖИДАНИЯ ОПРАВДАНЫ
    Похожую картину даёт
    модель проникновения продукта Geoffrey Moore.

    View full-size slide

  21. ТРАЕКТОРИЯ ТРЕНДОВ:
    КУДА ИДТИ, А ЧТО УШЛО САМО
    ❑ Просто популярные практики (избитая анимация или
    крупная типографика, изометрическая иллюстрация)
    ❑ Набирающие обороты (кинетическая типографика,
    перламутровые и голографические цвета, 3D-персонажи в
    иллюстрации, голосовые интерфейсы и умные колонки,
    Jobs to Be Done)
    ❑ Выходящие из моды (чат-боты, метод персонажей,
    Мемфис)

    View full-size slide

  22. КАРТА ТРЕНДОВ
    АНИМАЦИЯ
    КРУПНАЯ ТИПОГРАФИКА
    ИЗОМЕТРИЧЕСКАЯ ИЛЛЮСТРАЦИЯ
    ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ
    КИНЕТИЧЕСКАЯ ТИПОГРАФИКА
    JOBS TO BE DONE
    ГОЛОСОВЫЕ ИНТЕРФЕЙСЫ
    3D-ПЕРСОНАЖИ В ИЛЛЮСТРАЦИИ
    ГОЛОГРАФИЧЕСКИЕ И ПЕРЛАМУТРОВЫЕ ЦВЕТА
    ГИБКИЕ ЭКРАНЫ
    ЧАТ-БОТЫ
    МЕТОД ПЕРСОНАЖЕЙ
    МЕМФИС
    ТЕХНОЛОГИЧЕСКИЕ ИНТЕРФЕЙСНЫЕ ВИЗУАЛЬНЫЕ
    ЖАНРЫ И СТАНДАРТЫ

    View full-size slide

  23. Сам рассказ будет в формате дайджеста —
    три важные для меня темы,
    которые я детально изучаю
    и во многом использую в работе.

    View full-size slide

  24. ДИЗАЙН-СИСТЕМЫ
    НА ТОКЕНАХ
    На низком старте с 2016 года

    View full-size slide

  25. ТЕРМИН РАЗМЫЛИ К ЧЕРТЯМ
    Называют всё что угодно – от библиотеки стандартных
    элементов в Sketch и странички с нарезанными скриншотами
    до зрелой платформы, действительно работающей на базе
    распространяемых компонентов со вшитым дизайном.
    Главный источник правды это сам продукт и нужно
    озаботиться тем, чтобы как задумано работал именно он.

    View full-size slide

  26. ДИЗАЙН ЧАСТО «ПЕРЕВИРАЕТСЯ»
    НА ПУТИ ИЗ МАКЕТОВ
    В РЕАЛИЗАЦИЮ
    Цепочка «гайдлайн → дизайн → вёрстка → реализация» –
    тупик, вечная ручная работа.
    Чтобы избавиться от кучи геморроя по внедрению,
    улучшению и поддержке продуктов, её нужно перевести в
    «гайдлайн = дизайн = вёрстка → реализация».

    View full-size slide

  27. UI KIT – ЭТО НЕ ДИЗАЙН-СИСТЕМА
    Система визуальной идентификации бренда из прошлого.
    Работать надо с основным материалом среды – кодом.

    View full-size slide

  28. СТАРАЯ И НОВАЯ ШКОЛА
    Похожи на вид,
    кардинально различаются в использовании.

    View full-size slide

  29. 1
    ВИЗУАЛЬНЫЙ ЯЗЫК
    Правила, по которым создаются продукты:
    design.mail.ru/paradigm/

    View full-size slide

  30. 2
    ЕДИНЫЕ КОМПОНЕНТЫ В КОДЕ
    Единственный источник правды. Дизайн «вшит» в них,
    сервисы получают и обновляют их из единого репозитория.

    View full-size slide

  31. 3
    ШАБЛОНЫ ДЛЯ ДИЗАЙНЕРОВ
    Быстро показать идею, высокоуровневые скетчи. В идеальной
    ситуации макеты не верстают, а собирают из единых компонентов.

    View full-size slide

  32. ТОКЕНЫ – ДЁШЕВО И СЕРДИТО
    Когда единый компонентный фреймворк не получается.
    Слой абстракции под компонентными фреймворками.
    PARADIGM
    PRODUCTIVITY МЕДИА B2B ПРОМО
    ПОЧТА НОВОСТИ MCS САЙТЫ
    ОБЛАКО КИНО BIZ ПИСЬМА
    КАЛЕНДАРЬ АВТО

    View full-size slide

  33. КАК РАБОТАЮТ ТОКЕНЫ
    Config-файл, визуальный язык в переменных. Генерируется
    файл для СSS-препроцессоров, его подключает фреймворк.

    View full-size slide

  34. ВЕБ И МОБИЛЬНЫЕ ВМЕСТЕ
    Из одного config-файла
    делаются версии для любых платформ.

    View full-size slide

  35. ТЕМЫ В КОДЕ

    View full-size slide

  36. ПИКТОГРАММЫ В КОДЕ

    View full-size slide

  37. ОСНОВА ВИЗУАЛЬНОГО ЯЗЫКА
    Играя с набором параметров, мы можем быстро получить
    любой элемент. Например, простую кнопку:

    View full-size slide

  38. ТИПОГРАФИКА
    Все размеры и начертания мы храним в переменных. От проекта к
    проекту они могут меняться, но основные группы одни и те же.

    View full-size slide

  39. СЕТКА И ОТСТУПЫ
    Каждый элемент дизайн-системы строится по модулям
    в 4dp (density independent pixels)

    View full-size slide

  40. ГРАНИЦА И ФОН
    На помощь приходят чуть более сложные функции (mixin),
    и прозрачности.

    View full-size slide

  41. HOVER
    @mixin stateHover ($colorBgSecondary) {
    background: mix($colorTrueBlack, $colorBgSecondary, 4%);
    }

    View full-size slide

  42. ACTIVE
    @mixin stateActive ($colorBgSecondary) {
    background: mix($colorTrueBlack, $colorBgSecondary, 8%);
    }

    View full-size slide

  43. ТЕНЬ
    Элемент приподнят над базовым уровнем
    (кнопки, карточки) – часть лейаута или дополнительная
    информация к основному контенту.

    View full-size slide

  44. КНОПКА В СБОРЕ

    View full-size slide

  45. АКЦЕНТНАЯ КНОПКА
    За счет изменения параметра отвечающего
    за фон, мы можем сделать из обычной кнопки – акцентную.

    View full-size slide

  46. АКЦЕНТНАЯ КНОПКА

    View full-size slide

  47. ТЕМЫ ОФОРМЛЕНИЯ
    Управляя значениями переменных мы легко можем
    формировать элементы и для других проектов.

    View full-size slide

  48. ПЕРЕКЛЮЧЕНИЕ ТЕМ
    В живом гайдлайне можно пощёлкать несколько из них.

    View full-size slide

  49. МАЛО КТО ДЕЛАЕТ
    Странно, но примеров на рынке не так много.
    Хотя это самый простой и быстрый способ стартовать.

    View full-size slide

  50. СВЯЗКА С ИНСТРУМЕНТАМИ
    Компоненты в коде и символы/компоненты в Sketch/Figma не
    связаны, поддерживаются параллельно. Но попытки есть.

    View full-size slide

  51. РАБОТАЕТ В ОБРАТНУЮ СТОРОНУ
    Команда GitHub экспортирует иконки из Figma
    в основной репозиторий продукта.

    View full-size slide

  52. DESIGN SYSTEMS CLUB
    Каталог отечественных компонентных дизайн-систем,
    реализованных на технологическом уровне.
    http://designsystemsclub.ru/

    View full-size slide

  53. DESIGNOPS
    Баззворд 2018 года

    View full-size slide

  54. ДИЗАЙН-МЕНЕДЖМЕНТ 3.0
    Дизайн-менеджмент, дизайн-лидерство, UX-стратегия или
    DesignOps? Те же методы, разный фокус – масштабирование.
    https://jvetrau.com/designops-definition/

    View full-size slide

  55. OPS, I DID IT AGAIN!
    Термин DevOps уже натягивают на дизайн-системы (Design
    Systems Ops) и пользовательские исследования (ResearchOps).

    View full-size slide

  56. ПРЕДЫСТОРИЯ
    Теория менеджмента насчитывает более сотни лет опыта, да и
    применительно к дизайн-агентствам и промышленному
    дизайну за десятилетия накоплена немалая экспертиза. Но в
    сфере цифровых продуктов действительно яркие истории
    внедрения дизайна на всех уровнях начались только в
    последнее десятилетие.
    XIX 1950Е 1980Е 2006 2010
    ТЕОРИЯ
    МЕНЕДЖМЕНТА
    ДИЗАЙН-
    АГЕНТСТВА
    ЧЕЛОВЕКО-
    КОМПЬЮТЕРНОЕ
    ВЗАИМОДЕЙСТВИЕ
    ВТОРАЯ ВОЛНА
    СТАРТАПОВ
    КРУПНЫЕ
    КОМПАНИИ

    View full-size slide

  57. РЕДИЗАЙН
    НЕ ТОЛЬКО ПРОДУКТОВ,
    НО И ОРГАНИЗАЦИИ
    Мало совершить подвиг в виде удачного редизайна
    устаревшего сервиса – нужно обеспечить повторяемость
    хороших результатов.
    Причина плохих продуктов – это плохая машина, которая их
    производит, так что чинить нужно в первую очередь её.

    View full-size slide

  58. 3 УРОВНЯ ЗРЕЛОСТИ UX

    View full-size slide

  59. ПАТТЕРНЫ
    ДИЗАЙН-МЕНЕДЖМЕНТА
    Методы и практики, которые помогут повысить уровень
    зрелось компании.
    Улучшения идут от проблем бизнеса к конкретным рецептам
    для дизайн-менеджеров:
    ценность для бизнеса → способ решения → паттерн.

    View full-size slide

  60. ЦЕННОСТЬ
    ДИЗАЙНА ДЛЯ БИЗНЕСА
    ❑ Качество продукта
    ❑ Скорость выхода на рынок
    ❑ Снижение рисков при
    выходе на рынок
    ❑ Увеличение аудитории и
    прибыли продукта
    ❑ Усиление бренда
    ❑ Найм и развитие
    дизайнеров
    ❑ Осознание ценности
    дизайна

    View full-size slide

  61. КАЧЕСТВО ПРОДУКТА
    Повысить, чтобы увеличить его ценность
    для пользователей и снизить затраты на
    поддержку

    View full-size slide

  62. РЕШЕНИЕ:
    КОНТРОЛЬ КАЧЕСТВА
    НА УРОВНЕ МАКЕТОВ
    О: Дизайн-ревью
    Т: Дизайн-система
    Т: Дизайн-долг
    Т: Чек-листы
    Т: Юзабилити-тестирование
    С: Общая дизайн-грамотность
    С: Влияние на продуктовый план

    View full-size slide

  63. РЕШЕНИЕ:
    КОНТРОЛЬ КАЧЕСТВА
    НА УРОВНЕ РЕАЛИЗАЦИИ
    О: Дизайн-ревью
    Т: Дизайн-система
    Т: Чек-листы
    Т: Юзабилити-тестирование
    С: Общая дизайн-грамотность

    View full-size slide

  64. РЕШЕНИЕ:
    КОНТРОЛЬ КАЧЕСТВА
    НА УРОВНЕ ПРОДУКТА
    И КОМПАНИИ
    Т: Дизайн-долг
    С: Долгосрочное планирование
    С: Клуб дизайн-лидеров
    С: Метрики дизайна, завязанные на бизнес

    View full-size slide

  65. 2018: ПИРАМИДА
    СТРАТЕГИЧЕСКОГО ПЛАНИРОВАНИЯ
    ЦЕННОСТИ
    МИССИЯ
    ВИДЕНИЕ
    СТРАТЕГИЯ
    ТАКТИКА
    ВСЯ ЖИЗНЬ
    20 ЛЕТ
    5-10 ЛЕТ
    1-2 ГОДА
    3 МЕСЯЦ – 1 ГОД

    View full-size slide

  66. ЦЕННОСТИ
    ❑ Пользователи
    ❑ Бизнес
    ❑ Дизайнеры
    ❑ Здоровая продуктовая команда в целом

    View full-size slide

  67. лет
    МИССИЯ
    Mail.ru Group – одна из самых крупных и успешных интернет-
    компаний в России и Европе целом, суммарная ежемесячная
    аудитория продуктов – 150 млн человек. Мы хотим, чтобы
    дизайн наших продуктов соответствовал этому уровню и
    являлся важным рыночным дифференциатором для
    компании, усиливая бренд. Он должен задавать тон в Рунете и
    котироваться в мировом масштабе. Бренд должен иметь
    положительное, а не отрицательное предубеждение.

    View full-size slide

  68. лет
    ВИДЕНИЕ
    Хороший дизайн продукта решает проблемы пользователей и
    бизнеса в здравом компромиссе​. Пользователям проще
    выполнять свои задачи и они лучше понимают ценность
    продукта, а бизнес достигает своих целей и улучшает позиции
    на рынке. Дизайнеры помогают найти здравый баланс между
    этими двумя полюсами и помнят о важных вещах:

    View full-size slide

  69. ВИДЕНИЕ
    ❑ Формируют положительное предубеждение для бренда
    ❑ Масштабируют хорошие практики
    ❑ Эффективны
    ❑ Проактивны

    View full-size slide

  70. года
    СТРАТЕГИЯ
    Конкретные задачи и решения, а также просто проблемы,
    которые ещё нужно осознать как побороть.

    View full-size slide

  71. ❑ Приносим ценность продуктам и бизнесу.
    ❑ Помогаем запускать продукты и функции быстро и
    качественно.
    ❑ Все сотрудники компании понимают ценность дизайна.
    ❑ Бренд продуктов и работодателя.

    View full-size slide

  72. ПРИНОСИМ ЦЕННОСТЬ
    ПРОДУКТАМ И БИЗНЕСУ

    View full-size slide

  73. ПРОДУКТОВЫЕ ИНСАЙТЫ
    ИСХОДЯТ ОТ ДИЗАЙНЕРОВ
    ❑ База знаний
    ❑ Дизайн-решения
    привязаны к продуктовым
    метрикам и проверяются
    ❑ Карта взаимодействия
    (CJM)
    ❑ Методики поиска и
    решения проблем
    ❑ Влияние на продуктовый
    план
    ❑ Концепты и конкурсы
    ПРИНОСИМ ЦЕННОСТЬ ПРОДУКТАМ И БИЗНЕСУ

    View full-size slide

  74. ХОРОШИЙ ДИЗАЙН НА ЖИВЫХ
    ПРОДУКТАХ
    ❑ Дизайн-система Paradigm
    ❑ Дизайн-долг
    ❑ Дизайн-ревью
    ❑ UX-тестирование ещё чаще
    ❑ Учёт разных групп
    пользователей
    (accessibility и т.п.)
    ❑ Тексты в интерфейсах
    ПРИНОСИМ ЦЕННОСТЬ ПРОДУКТАМ И БИЗНЕСУ

    View full-size slide

  75. месяца
    ТАКТИКА: БЛИЖАЙШИЕ OKR
    (OBJECTIVE & KEY RESULTS)
    Выбираем три крупные темы на квартал, каждую из них
    описываем в виде цели, решающей проблему, и метрик,
    показывающих успешность внедрения. Фокус!
    Ставим в конце квартала, актуализируем каждую неделю.

    View full-size slide

  76. КАРТА ВЗАИМОДЕЙСТВИЯ (CJM)
    Повысить вовлечённость дизайнера в продукт и отдачу от его
    действий, видя весь жизненный цикл работы с job story. Говорить с
    менеджерами продуктов на одном языке.
    ❑ Выработать единый формат job stories и CJM
    ❑ Для пилотных продуктов есть описание job stories и CJM по
    выбранным задачам
    ❑ Проведена как минимум одна продуктовая встреча на базе
    CJM по каждому из этих продуктов (менеджеры с дизайнерами
    поработали по ней)
    ПРИНОСИМ ЦЕННОСТЬ ПРОДУКТАМ И БИЗНЕСУ →
    ПРОДУКТОВЫЕ ИНСАЙТЫ ИСХОДЯТ ОТ ДИЗАЙНЕРОВ

    View full-size slide

  77. ВЫРАБОТАТЬ ЕДИНЫЙ ФОРМАТ
    JOB STORIES И CJM
    ❑ CJM: Выбрать инструмент
    ❑ CJM: Шаблон
    ❑ Job Stories: Собрать примеры Job Stories — про процесс и
    про прогресс
    ❑ Синхронизировать подход с UX-лабораторией
    КАРТА ВЗАИМОДЕЙСТВИЯ (CJM)

    View full-size slide

  78. ДЛЯ ПИЛОТНЫХ ПРОДУКТОВ ЕСТЬ
    ОПИСАНИЕ JOB STORIES И CJM ПО
    ВЫБРАННЫМ ЗАДАЧАМ
    ❑ Продукт №: Job stories
    ❑ Продукт №: CJM
    ❑ Синхронизировать результаты с UX-лабораторией
    КАРТА ВЗАИМОДЕЙСТВИЯ (CJM)

    View full-size slide

  79. ПРОВЕДЕНА КАК МИНИМУМ
    ОДНА ПРОДУКТОВАЯ ВСТРЕЧА НА
    БАЗЕ CJM
    ❑ Продукт №: Встреча с менеджером (барьеры, мотиваторы)
    ❑ Продукт №: Макеты гипотез решения проблем
    ❑ Продукт №: Решения внедрены
    ❑ Продукт №: Собраны метрики, повторная встреча с
    менеджером для оценки результата
    КАРТА ВЗАИМОДЕЙСТВИЯ (CJM)

    View full-size slide

  80. Идея простая –
    мы превращаем абстрактное желание
    в банальный план проекта.

    View full-size slide

  81. ПИЛОТ →
    ЕВАНГЕЛИЗМ →
    МАСШТАБИРОВАНИЕ
    Наш основной подход к внедрению любых подходов и
    практик.
    Сначала обкатываем формат на нескольких тестовых задачах
    и проектах. После того, как они показали себя хорошо –
    рассказываем об успехе внутри компании и получаем новые
    внедрения.

    View full-size slide

  82. ПАТТЕРНЫ ДИЗАЙН-МЕНЕДЖМЕНТА
    Будущая книга
    на основе серии статей о UX-стратегии.
    http://dmpatterns.com/

    View full-size slide

  83. ПАТТЕРНЫ ДИЗАЙН-МЕНЕДЖМЕНТА
    Курс о дизайн-менеджменте цифровых продуктов
    на Bang Bang Education.
    https://bangbangeducation.ru/course/dmpatterns

    View full-size slide

  84. АЛГОРИТМИЧЕСКИЙ
    ДИЗАЙН
    Шумит с 2016 года

    View full-size slide

  85. РОБОТЫ ЗАМЕНЯТ ДИЗАЙНЕРОВ?
    Нет. Это скорее экзо-скелет для дизайнеров, где мы в паре с
    алгоритмами решаем продуктовые задачи.
    Самое время переосмыслить современную роль дизайнера.

    View full-size slide

  86. THE GRID CMS
    Сама подбирает шаблоны, оформление контента, обрабатывает
    фото. Делает A/B-тесты для выбора лучшего решения.

    View full-size slide

  87. ПАРНЫЙ ДИЗАЙН
    С КОМПЬЮТЕРОМ
    Полный отказ от дизайнера приведёт к штампованным и не
    всегда хорошим результатам (хотя в любом случае поднимет
    общий уровень качества) – революции в профессии так не
    делаются.
    Зато можно сгрузить часть рутины. И найти время для
    большого рывка.

    View full-size slide

  88. 1.
    УВЕЛИЧЕНИЕ ВОЗМОЖНОСТЕЙ
    Первое поколение перевело аналоговые инструменты
    в программы и развивается по пути увеличения
    возможностей.

    View full-size slide

  89. 2.
    УБИРАНИЕ РУТИНЫ
    Второе научилось брать на себя часть рутинных операций,
    которые раньше требовали профессиональной экспертизы.

    View full-size slide

  90. 3.
    СОАВТОРСТВО
    Третье должно стать соавтором решений, помогая находить
    новые интересные направления.

    View full-size slide

  91. AUTODESK DREAMCATCHER
    Основан на идее генеративного дизайна, который давно
    используется в перфомансах, одежде, архитектуре.

    View full-size slide

  92. ПОСТРОЕНИЕ
    ИНТЕРФЕЙСА

    View full-size slide

  93. ПРОСТЫЕ
    ИНСТРУМЕНТЫ ПАБЛИШИНГА
    Medium, Readymag и Tilda уже сократили количество ручной
    работы – в них полно добротных шаблонов, с помощью
    которых можно и без дизайнера собрать неплохой результат.
    Улучшение шаблонов сделает порог входа ещё ниже.

    View full-size slide

  94. МОЙ ИНТЕРЕС:
    АВТОМАТИЗИРОВАННАЯ
    ЖУРНАЛЬНАЯ ВЕРСТКА
    Мы описывали для одного из проектов в 2012. Контент не имел
    семантики, а переверстать архив вручную – затратно. Скрипт
    разбирал статью и исходя из её контента (количество абзацев и
    слов в каждом, фотографии и их форматы, врезки с цитатами и
    таблицами и т.п.) выбирал типовой паттерн для представления
    каждого куска в эффектном журнальном виде. И следил, чтобы
    паттерны чередовались и материал не выглядел однообразно.

    View full-size slide

  95. DUPLO
    Похожую модель недавно реализовал Flipboard.

    View full-size slide

  96. VOX MEDIA: CHORUS CMS
    Из коллекции паттернов алгоритм собирает гармоничные
    варианты главной страницы, оценивает их эффективность и
    выбирает оптимальный.

    View full-size slide

  97. DESIGNSCAPE
    Автоматически улучшает композицию макета.
    Решает мелкие косяки и предлагает другую компоновку.

    View full-size slide

  98. BILLUI
    Плагин для Sketch генерирует вариации интерфейса.
    Выбираете параметры и получаете быстрые наброски.

    View full-size slide

  99. AIRBNB: СКЕТЧ В КОМПОНЕНТ
    Сканируют бумажные скетчи интерфейсов и превращают их
    в готовый макет на базе типовых компонентов.

    View full-size slide

  100. ПОДГОТОВКА ГРАФИКИ
    И КОНТЕНТА

    View full-size slide

  101. РУТИНА :(
    Создание однотипной графики в разных вариациях – одна из
    самых унылых частей работы дизайнера.
    Это отнимает уйму времени и демотивирует, при том что эти
    силы можно было бы потратить на более осмысленную
    продуктовую работу.

    View full-size slide

  102. ГЕНЕРАТОР БАННЕРОВ NETFLIX
    Скрипт вырезает персонажей для постеров, накладывает тексты
    и делает автоматические эксперименты со всем этим. Магия!

    View full-size slide

  103. …И ИХ ПЕРСОНАЛИЗАЦИЯ
    В зависимости от того, что лучше зайдёт –
    например, настроение сцены или кадр с конкретным актёром.

    View full-size slide

  104. РОБО-РЕДАКТОР ENGADGET
    Воспитали робота-подмастерье для написания
    простых новостных заметок о новых гаджетах. Уф-ф-ф!

    View full-size slide

  105. ПЕРЕНОС СТИЛЯ: PRISMA
    Чёрная магия происходит в нейросетях. Prisma сделала перенос
    стиля известных художников на фото быстрым и массовым.

    View full-size slide

  106. THIS PERSON DOESN’T EXIST
    Плагин для Sketch генерирует
    правдоподобные лица несуществующих людей.

    View full-size slide

  107. ФОТОГРАФИЯ ИЗ НАБРОСКА
    Экспериментальное решение Nvidia превращает набросок в
    фотографию природного ландшафта.

    View full-size slide

  108. ПЕРВЫЙ ИНСТРУМЕНТ
    Bloma от команды Creative.ai.
    Позволяет создавать постеры, рекламу и другие простые форматы.

    View full-size slide

  109. LOGOJOY
    Заменяет недорогого фрилансера для создания логотипов.
    Генерирует варианты, показывает примерный фирстиль.

    View full-size slide

  110. ПЕРСОНАЛИЗАЦИЯ
    ИНТЕРФЕЙСА
    Для узкого сегмента аудитории
    или конкретного пользователя.

    View full-size slide

  111. ДАВНО ПОНЯТНЫЙ ПРИМЕР
    Мы видим это каждый день в ленте соцсетей, результатах
    поиска, рекомендательных системах, да и многих других
    массовых продуктах.
    Это снимает необходимость самому фильтровать потоки
    информации. Да и такое проявление заботы со стороны
    продукта создаёт лучшую эмоциональную привязку.

    View full-size slide

  112. ПЕРСОНАЛИЗИРОВАННЫЙ ТЕКСТ
    Persado оптимизирует рекламу для конкретного пользователя.
    Пробуют применить наработки и к интерфейсам.

    View full-size slide

  113. SPOTIFY DISCOVER WEEKLY
    Giles Colborne: из привычного дизайна интерфейсов это список
    треков, а вся основная работа – рекомендательная система.

    View full-size slide

  114. ПОДДЕРЖКА ПРИНЯТИЯ РЕШЕНИЙ
    Дизайнеры Airbnb общались с инженерной командой и научились
    прогнозировать цену в определённом городе в определённый сезон,
    так что пользователям проще задать конкурентоспособный тариф.

    View full-size slide

  115. JOHN MCCARTHY
    Автор понятия
    «Искусственный интеллект» говорил:
    «Как только сложная технология начинает
    просто работать, никто больше
    не называет её ИИ».

    View full-size slide

  116. ADOBE SENSEI
    Платформа, которая использует машинное обучение и станет
    основой для будущих «умных» функций продуктов Adobe.

    View full-size slide

  117. САЙТ-КОЛЛЕКЦИЯ
    http://algorithms.design/

    View full-size slide

  118. HYPE CYCLE
    Энтузиазм упал – не так просто, наигрались в базовые идеи
    вроде конструкторов сайтов, генераторов логотипов и
    наложения стиля.
    Зато появляются инструменты (Adobe, Bloma, плагины в
    Sketch). А по мере накопления критической массы будут и
    более сложные решения.

    View full-size slide

  119. ЛЮДИ ДЕШЕВЛЕ :(
    Часто проще нанять человека за плошку риса,
    чем делать алгоритм.

    View full-size slide

  120. ВЫВОДЫ
    Методов и подходов хватает.
    Их просто не всегда используют.

    View full-size slide

  121. ЧТО ДАЛЬШЕ?
    АНИМАЦИЯ
    КРУПНАЯ ТИПОГРАФИКА
    ИЗОМЕТРИЧЕСКАЯ ИЛЛЮСТРАЦИЯ
    ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ
    КИНЕТИЧЕСКАЯ ТИПОГРАФИКА
    JOBS TO BE DONE
    ГОЛОСОВЫЕ ИНТЕРФЕЙСЫ
    3D-ПЕРСОНАЖИ В ИЛЛЮСТРАЦИИ
    ГОЛОГРАФИЧЕСКИЕ И ПЕРЛАМУТРОВЫЕ ЦВЕТА
    ГИБКИЕ ЭКРАНЫ
    ЧАТ-БОТЫ
    МЕТОД ПЕРСОНАЖЕЙ
    МЕМФИС
    ТЕХНОЛОГИЧЕСКИЕ ИНТЕРФЕЙСНЫЕ ВИЗУАЛЬНЫЕ
    ЖАНРЫ И СТАНДАРТЫ

    View full-size slide

  122. ИНФОРМАЦИОННЫЕ ПОТОКИ
    FEEDLY
    ENGADGET/
    FAST COMPANY
    DRIBBBLE/
    BEHANCE/PANDA
    FACEBOOK/VK/
    TWITTER
    YOUTUBE
    /VIMEO
    PINBOARD ONENOTE PINTEREST
    ДАЙДЖЕСТ

    View full-size slide

  123. ONENOTE
    Кросс-платформенная записная.
    Кому-то ближе Evernote или Notion.

    View full-size slide

  124. НОВЫЕ ПРОДУКТЫ
    УМНЫЕ ЧАСЫ И
    БРАСЛЕТЫ
    АВТОМОБИЛЬНЫЕ
    ИНТЕРФЕЙСЫ
    ПЛАНШЕТНЫЕ ОС
    Это история отрасли, которая структурирует понимание того
    что есть сейчас и пути, по которому мы пришли к этому.

    View full-size slide

  125. ИСТОРИЯ ИНТЕРФЕЙСОВ
    ВИДЕНИЕ БУДУЩЕГО
    СОЦИО-ТЕХНИЧЕСКИЕ
    СИСТЕМЫ
    ВАЖНЫЕ ЛЮДИ
    Все отсылки из Википедии и других источников, собранные в
    хронологическом порядке.

    View full-size slide

  126. СТАТИСТИКА РЫНКА
    МОБИЛЬНЫЙ ВЕБ
    ЭЛЕКТРОННАЯ ПОЧТА
    СМАРТФОНЫ:
    ОС И ПРОИЗВОДИТЕЛИ
    По разным срезам – смартфоны, планшеты, конкретные
    отрасли.

    View full-size slide

  127. PINBOARD
    Онлайн-закладки, куда в 2006 перенес все из браузерных.
    Только непротухающая информация – новостей там почти нет.
    https://pinboard.in/u:jvetrau

    View full-size slide

  128. ПРИМЕРЫ ВЫБОРОК
    СТАТЬИ О РЕДИЗАЙНЕ
    НОВОСТНЫХ САЙТОВ
    ШАБЛОНЫ ДИЗАЙНА
    ДЛЯ УМНЫХ ЧАСОВ
    ИССЛЕДОВАНИЯ ПО
    ЧИТАБЕЛЬНОСТИ
    Залог хорошей коллекции – грамотная система тегов,
    заточенная под поиск и выборки.

    View full-size slide

  129. CONFLUENCE
    Внутренняя рабочая база знаний в привязке к продуктам
    Mail.ru Group. Её хочется строить по схожим принципам.

    View full-size slide

  130. СКАЖИ МНЕ, ЧТО ТЫ ЧИТАЕШЬ…
    Дима Карпов говорит, что арт-директора можно оценить по его
    Pinterest. Идея ложится и на фоновые исследования в целом.

    View full-size slide

  131. В ЧЕМ ФОКУС? ФОКУС!
    ❑ Тщательная фильтрация информации. Не трачу время на
    то, что не пригодится ни в каком виде.
    ❑ Читать по диагонали или вообще не дочитывать то, что не
    несет новой информации.
    ❑ Браться только за дела, которые развивают. И которые
    хватит времени довести до конца.

    View full-size slide

  132. ЧАС-ПОЛТОРА В ДЕНЬ
    НА ПРОФЕССИОНАЛЬНОЕ ЧТЕНИЕ
    Если у вас уже сложилась модель предметной области, то
    дальше идет приращение знаний, т.е. корректировка и
    дополнение этой модели.
    К сожалению, большинство публикаций рассказывают об
    одном и том же. Так что можно позволить себе быстро
    пробегать их глазами, выискивая только новое.

    View full-size slide

  133. КОНЦЕПТ-КАРЫ
    Наша цель – обновлять продукты чаще. Для этого делаем
    концепты каждый год и разбираем их на детали, часть из
    которых попадает в жизнь. Хорошо работают микро-
    хакатоны.
    Получается так:
    Фоновые исследования → Концепт-кары → Продукты
    Фоновые исследования → OKR → Продукты

    View full-size slide

  134. Всегда в курсе новых методов и практик.
    Нахожу примеры их внедрения, что сильно помогает
    использовать на деле.
    OKR для развития команды, многие идеи попадают в план.
    Дайджест как R&D.

    View full-size slide

  135. P.S.
    Вы можете получить профит, даже если будете собирать
    только часть из этой информации. Считайте, что это ваше
    постоянное обучение после университета – такой же задел на
    будущее. Так что дерзайте!

    View full-size slide

  136. СПАСИБО!
    ЮРИЙ ВЕТРОВ
    jvetrau.com t.me/pdigest

    View full-size slide