Продуктовый дизайн: 20 самых важных материалов за декабрь

Дайджест руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.

В этом году многие отечественные компании показали свои наработки по дизайн-системам. Команда Mail.Ru Group решила придать импульс их развитию в России и запустила сайт-коллекцию Design Systems Club.

На сайте собрана информация о компаниях, про активность которых мы знали наверняка: библиотеки компонентов, статьи, презентации и прочее. Главный критерий упоминания на сайте — компания понимает под «дизайн-системой» технологический фреймворк, а не банальный UI Kit в Sketch (или классический гайдлайн на скриншотах).

Если мы про вас незаслуженно забыли или переврали в описаниях ― пишите Андрею Сундиеву или мне. Подпишитесь на рассылку, чтобы получать всё свежее раз в месяц.

Бен Бринелл собрала ещё одну мощную коллекцию дизайн-принципов, которая в чём-то даже крупнее классического Design Principles FTW.

Кара Пернис и Кэтрин Уайттон подсказывают, как действовать в ситуации, когда менеджер или заказчик предлагает странные решения. Важно не вступать в конфликт, а лучше изучить суть идеи и на практике объяснить её работоспособность или неуспешность.

Ежегодный обзор трендов от Fjord. Он всегда один из самых сбалансированных.

Другие прогнозы на 2018 год.

• Толковый обзор визуальных и интерактивных трендов 2018 года от дизайн-команды Webflow без вечного тухляка вроде анимации, фоновых видео и крупных заголовков.
• Ольга Шевченко из Vintage Web Production участвует в жюри Awwwards и отмечает одни из самых выразительных приёмов, которые используют современные промосайты и сайты компаний.
• Ежегодный обзор трендов от журнала uxdesign.cc, которые перебирают приличное количество публикаций за год.
• Крейг Филлипс троллит ежегодные обзоры трендов серией дурацких прогнозов.
• Якоб Нильсен пытается спрогнозировать рост количества UX-специалистов и замахнулся аж на 100 млн человек к 2050 году. Он ссылается на три предпосылки: больше специалистов в компаниях, которые уже системно занимаются дизайном, больше компаний, которые начинают делать это, и больше стран, где есть такие компании.

Игорь Губайдулин собрал список конференций.

Моя коллега Ксения Стернина описала популярные методы пользовательских исследований в гифках.

• Alva: новый инструмент для дизайнеров заточен под дизайн-систему в правильном понимании ― дизайнер использует визуальное представление React-компонентов, а не банальный UI Kit. После моды на конвертеры из кода в Sketch создатели инструментов наконец-то добрались до правильного подхода.
• Вышло большое обновление инструмента для создания макетов Framer. Видео показывает работу с векторными объектами, адаптивность и другие обязательные вещи. Читайте инструкцию Павла Лаптева по работе с интерфейсами виртуальной реальности, пошаговое руководство по базовым функциям от Саши Окунева, смотрите видеокурс от Руслана Шарипова.
• Adobe XD: декабрьское обновление. Очень ленивое.
• Вышла версия 48 Sketch. В этот раз без больших рывков: управление цветовыми профилями, развитие Sketch Cloud и библиотек, поиск и замена цвета, улучшенное масштабирование символов и много мелочей. Компания также выпустила официальный UI Kit для iOS. Плагины: SketchCleaner помогает причесать макеты, а Chart — создавать простые графики и диаграммы в макетах.
• Обзор обновлений в основном продукте InVision, которые будут доступны в начале следующего года. А ещё она запустила небольшой венчурный фонд для создателей дизайн-инструментов.
• Небольшая памятка по работе с новым инструментом анимации Haiku от Nad Chishtie.
• UXPin показала экспериментальный инструмент для импорта реальных компонентов в коде в свой инструмент дизайна. Оказалось, не в Sketch, но обычно такие примеры вдохновляют создателей плагинов и других надстроек.
• Вышла версия 1.5 Fuse. Появилось приложение для просмотра прототипов на Android и iPhone. В следующем году появится интеграция со Sketch и FuseJS с возможностью использовать просто JavaScript.
• Интервью с основателем Tilda Никитой Обуховым об истории и будущем продукта.

Выступление Кристобаль Кастильи о дизайн-системе FIG в Facebook. Рассказ касается в основном шаблонов для Sketch и Origami, но затрагивает компоненты в коде и подход к развитию платформы в целом. Для дизайнерских инструментов собственными силами написан какой-то космический набор дополнений, прослоек и плагинов.

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

Обновлённая статистика по конверсии в мобильных интернет-магазинах от Nielsen Norman Group. Хотя она всё ещё хуже обычных компьютеров и по процентам, и по деньгам, разрыв стремительно сокращается.

Подборка 11 экспериментальных проектов Adobe, показанных на конференции MAX 2017. Многие из них основаны на платформе алгоритмического дизайна Sensei. Самые интересные ― SceneStitch для быстрой замены целых частей фото, Puppetron для стилизации фотографий под работы иллюстраторов (модель не нужно тренировать заранее) и PhysicsPak для создания сложного паттерна в любой форме. Другие новости алгоритмического дизайна:

• Отечественный сервис Trendmind помогает генерировать дизайн одежды. Один из его основателей Татьяна Попова рассказывает историю создания.
• Экспериментальный инструмент от группы исследователей MIT подсказывает предположительную визуальную заметность элементов на странице или в макете. Получается тепловая карта, которую впоследствии должно подтвердить или опровергнуть реальное eye-tracking-исследование. Для сравнительно простых интерфейсов это вполне рабочий инструмент, хотя нужно критически относиться к результатам для более-менее сложных продуктов. Видео работы.
• Исследовательская инициатива Google PAIR на тему пользы современных решений на базе искусственного интеллекта в профессиональной среде. Анонс.
• Команда Netflix продолжает разрывать шаблоны и рассказывает о следующем поколении своей технологии автоподбора промобаннеров для фильмов. Они научились персонализировать кадр для конкретного пользователя в зависимости от того, что лучше зайдёт ― например, настроение сцены или кадр с конкретным актёром.
• Экспериментальное приложение от Google автоматически собирает комикс в несколько кадров из видео. Выбирает нужные моменты, располагает их в шаблоне, обрабатывает с помощью фильтров.
• Microsoft добавила в Word помощника по составлению резюме, который ориентируется на других кандидатов с LinkedIn. Он подсказывает, какие навыки лучше добавить и на что сделать упор, чтобы получить конкурентоспособный профиль и адаптировать его под конкретную вакансию.
• Джастин О'Бейрн дотошно сравнивает карты Google и Apple. Он пытается разобраться, как Google умудрилась получить высокую графическую и смысловую детализацию зданий и зон активности даже для небольших городов и посёлков. Компания использует подходы алгоритмического дизайна и выделяет уйму полезной информации из спутниковых снимков и панорам улиц.

Александр Остервальдер показывает, как снижать риски новых продуктов по трём критериям (желанность, жизнеспособность, реализуемость) с помощью его шаблонов бизнес-модели и ценностного предложения.

Мощный лонгрид Ли Винселя с глубокой критикой дизайн-мышления. Он копает в сторону нездорового отношения к понятию «инновации» и абстрактному желанию «переизобрести что-нибудь» без попытки осознать, как эта вещь или явление работает и в чём именно его проблемы.

Дизайн-мышление — отличный способ популяризации вдумчивого дизайн-процесса для недизайнеров; проблема в том, что зачастую всё заканчивается просто на уровне простого выплеска «креативной энергии».

Билл Парди разжёвывает дизайнерам основные принципы анализа больших данных.

Станислав Рапп достаточно ёмко описывает подход к организации критики дизайна. Её ценность, процесс, пример из личной практики.

Неплохое описание навыков и обязанностей проектировщика интерфейсов в дизайн-команде СКБ Контур.

Джефф Сауро даёт пять простых критериев для оценки успешности интерфейса, который проверяется через удалённое немодерируемое юзабилити-тестирование. Просматривать десятки и сотни видео бывает утомительно, так что способ быстрее обнаруживать проблемы важен.

Дэн Браун описывает универсальный подход к проведению любой рабочей сессии по концептуальной проработке интерфейса. Это общая канва, в которую вполне укладываются популярные «брендированные» процессы. В другой статье он описывает основные навыки фасилитатора, которые помогают провести удачные рабочие сессии по проектированию интерфейса.

Де Трейнор из Intercom показывает пример того, как много вопросов по реализации продуктового решения нужно решить даже для маленького изменения.

Команда Facebook Messenger подготовила анализ истории развития общения с помощью коротких сообщений и мессенджеров и описывает своё видение того, как они меняются. Много интересных данных и статистики.

Интересный эксперимент на тему того, как потребители запоминают логотип бренда. Группу респондентов попросили набросать логотипы десяти широко известных компаний. В результате выделились их наиболее запоминаемые черты. А ещё Джим Нильсен собрал простой онлайн-тест на узнаваемость логотипов ― насколько форма символа известных брендов позволяет узнать его по общим очертаниям.

Читайте полную версию дайджеста в моём блоге. В нём, как обычно, много новых материалов по дизайну для Apple Watch, Android Wear, Material Design, расширений для Sketch, свежих скриптов и прочего. За свежими ссылками также можно следить в группе на Facebook и канале Telegram — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.

#дизайн