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

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

Google показала обновлённую дизайн-систему Material Design 2.0 на конференции I/O. Это серьёзное изменение визуального стиля и расширение инструментария, первые звоночки которого появились ещё в марте. Визуально Android P продолжил сближение с iOS (различия между платформами стираются с обеих сторон).

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

Массовые рассылки сервисов для соответствия требованиям европейского законодательства GDPR стали главным мемом конца мая. К сожалению, многие делали это крайне топорно, так что интернет приобрёл черты бюрократической конторы, где люди должны заполнять бесконечные и не очень понятные бланки. Сайт собрал самые убогие подходы к решению проблемы.

Один из новых интересных интерфейсных паттернов ― предугадывание движения курсора мыши к важному элементу на экране. Мэри Лу показывает несколько примеров реализации ― это помогает экономить время и силы.

Шикарный список наград и премий по самым разным веткам дизайна. Дизайнеры агентства Red Collar участвуют в жюри нескольких из них и рассказывают о механике их работы.

Студия Олега Чулакова опубликовала свою дизайн-систему. Пока она охватывает только сайт самого агентства и сопутствующих подсайтов, но здорово, когда они осознают их важность в клиентской работе и инвестируют в своё будущее — тот же Brad Frost начал atomic design как решение для клиентских проектов.

Одной из первых в рунете это сделала «Мануфактура» для клиентских сайтов. Это хорошо показывает, что дизайн-системы по силам не только гигантским продуктовым компаниям, сейчас хватает инструментов для низкого старта.

И другие материалы по проектированию голосовых интерфейсов:

Список конференций по дизайну и разработке.

8. Новости инструментов дизайна

  • Sketch: вышла версия 50. В ней команда сфокусировалась на исправлении багов и улучшении производительности. Этот и следующий релизы будут про причёсывание существующей функциональности, чтобы сильные рывки было делать проще. Плагины: вышла публичная бета Overflow для создания информационных карт. Статьи: Mark Grambau показывает шизоидный, но занятный способ менять цвета иконок в библиотеке Sketch.

  • Figma: анонсировано разделение стилей на переменные. Это один из важнейших шагов, что бы связать дизайнерские шаблоны и компоненты в коде — сейчас большинство инструментов не имеет модульности для описания символов и компонентов.

  • Adobe XD: майское обновление. Появилась бесплатная версия (один публичный прототип), открыт инвестфонд на $10 млн для создателей плагинов и расширений, быстрая замена символов и массовая вставка из буфера, доработки импорта из Photoshop и Sketch.

  • Hadron: новый инструмент на стыке дизайна и разработки веб-интерфейсов. Он позволяет наглядно набросать компоновку экрана, используя библиотеку компонентов из дизайн-системы в духе Framer.

  • InVision: анонсировал платформу для плагинов к Studio. Как и Adobe XD, они будут давать гранты лучшим разработчикам из своего Design Forward Fund. Порог входа для новых инструментов опять увеличился, теперь платформами себя называют все четыре ключевых игрока — Adobe, Figma, InVision, Sketch.

  • Marvel: инструмент открыл API и также стал платформой. Первые интеграции достаточно базовые — Slack, Dropbox, Sketch. Из действительно интересных — Maze (юзабилити-тестирование на базе прототипов Marvel), Lookback и Niice (мудборды).

  • Apply Matter: ещё один инструмент для дизайнеров, который обещает экспорт макетов в код. В комплекте идёт аналитика и другие полезные ништяки.

  • Haiku: запустил галерею пользовательских проектов.

  • Avocode: выпустили отчёт о популярности тех или иных приёмов работы с макетами за 2017 год. Дизайнеры стали использовать меньше слоёв и больше систем контроля версий.

  • Phase: первая версия будет сконцентрирована на создании динамики. Во второй обещают достаточно сложную адаптивность. Они также готовят запуск Phase Magazine. Сооснователь Nick Budden выступил на Mail.Ru Design Conference 2018 и рассказал о грядущем релизе. Видео пока монтируется (часть необработанного), но его коллега Влад Швец описал её основные тезисы на русском. Кстати, Ник успел заехать в гости в полдюжины отечественных дизайн-команд, так что евангелистов у инструмента станет больше.

  • Spirit: вышла версия для Mac.

  • Fuse: инструмент стал бесплатным и open source.

  • Screely: сервис делает из простого скриншота интерфейса красивую подачу для презентации или сайта.

  • Wired Elements: коллекция элементов интерфейса на HTML и CSS для стилизации прототипов под бумажные скетчи.

Дизайн-студия Creative Navy рассказывает о своём опыте проектирования POS-интерфейсов для кассиров. Хороший обзор особенностей использования и лучших практик. Есть ещё вторая часть.

Один из лучших материалов на тему здоровой критики дизайн-мышления. Джон Колко начинает с предыстории появления основных составляющих методологии, а после этого приводит мнения за и против того, что происходит вокруг этого баззворда сейчас. Получилась одна из самых взвешенных статей на тему с отличными выводами.

Группа пользовательских исследователей из Indeed даёт советы по оптимизации процесса пользовательских исследований в Agile-процессе. Аналогичные советы от Лаи Ху.

Отличная статья Аластера Симпсона о трёх стадиях роста дизайн-менеджера: первый опыт управления дизайнерами, управление другими дизайн-менеджерами и работа с целым портфелем продуктов. Он даёт советы по тому, как грамотно вести себя на каждом из них. Часть вторая.

Маргарет Пи и Даг Ким из Microsoft предложили фреймворк «Design Considerations», который помогает грамотно спроектировать уведомления и другие прерывания основной деятельности пользователя. Отличный чек-лист и подход в целом.

Коллекция интерфейсных паттернов в виде видеозаписей прохода по сценариям.

Отличный рассказ Лары Тасито о процессе работы команды дизайн-системы в HubSpot. Неплохо раскрыты этапы работы над условным компонентом и внутренний инструментарий для взаимодействия дизайнеров и разработчиков.

Зоя Димова описывает подход к вовлечению участников продуктовой команды к пользовательским исследованиям. Это важно в современном процессе создания продуктов, где мало времени и важно единое понимание проблематики рынка и целевой аудитории.

Олег Якубенков рассказывает об ухудшающих A/B-тестах. Это быстрый и дешёвый способ проверить, можно ли вообще повлиять на целевую метрику. Для этого делается вариант дизайна, который явно хуже текущего ― это покажет, работает ли существующая версия лучше его.

Якоб Нильсен давно пытался найти подтверждения того, что избыточная реклама снижает лояльность пользователей и приводит к их оттоку. Сервис Pandora проводил длительное исследование на эту тему в 2014–2016 году, и его результаты подтверждают гипотезу.

Microsoft выпустили игровой контроллер Xbox Adaptive Controller для геймеров с ограниченными возможностями. Статья подробно рассказывает о проблематике, работе над устройством и сообществе таких пользователей.

Интервью с Eik Brandsgård из LEGO о внедрении практики дизайн-спринтов в компании. Они решили сделать революционные, а не эволюционные изменения и запустили одновременный процесс с десятками команд. Для этого пришлось приостановить всю работу на два месяца, но по его словам, результат того стоил.

Читайте полную версию дайджеста в моём блоге. В нём, как обычно, много новых материалов по дизайну, дизайн-системам, инструментам дизайна, свежих скриптов и прочего. За свежими ссылками также можно следить в группе на Facebook, сообществе во «ВКонтакте» или канале Telegram — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.

#дизайн

©  vc.ru