Дайджест продуктового дизайна за январь: новые инструменты, статьи зарубежных специалистов и обзор CES 2020

Традиционный дайджест директора по дизайну «Райффайзенбанка» Юрия Ветрова.

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

В недавней статье описаны форматы взаимодействия команды дизайн-системы и продуктовых команд, которые предлагают свои решения и изменения.

Выставка прорывного и уматного хайтека CES 2020 шла с 7 по 10 января в Лас-Вегасе. На ней традиционно обкатывают новые технологии для массовых продуктов, потом наперегонки заявляют «у нас тоже есть концепт применения этой штуки», а затем переключаются на что-то новое.

Выбрал интересные устройства и направления, которые касаются дизайнеров интерфейсов: гибкие экраны (второе пришествие), «умные» колонки и голосовые помощники, авто, носимые устройства, «умный» дом и просто интересные технологии.

Ким Флаэрти из Nielsen Norman Group говорит о двух типах персонажей широкого и узкого спектра. Первые описывают компанию в целом, вторые — отдельные продукты.

Nielsen Norman Group повторила исследование Xerox PARC 1997 года о том, как пользователи ищут информацию в интернете. Фейфей Лью рассказывает об основных выводах.

В прошлом году мы с Митей Осадчуком взяли интервью у студии Ony, одной из лучших отечественных компаний в цифровом брендинге. Макс Орлов, Сергей Лавриненко и Андрей Потапов рассказали о своём подходе, процессе создания и поддержки айдентики, метриках и трендах. А также показали офис агентства.

Совершенно дикая штука — инструмент дизайна мобильных приложений на самом телефоне. Ребята сотворили совершеннейшую чуму (пусть и вызывающую вопросы по продуктивности такой работы дизайнера).

Улучшение Smart Layout (минимальная и максимальная ширина). И, наконец-то, бета-версия аналога Zeplin.

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

• Bravo Studio App подключает реальные данные и генерирует нативный код для Android и iOS на основе прототипов.
• Design Lint — линтинг для макетов.
• Smooth Shadow — аккуратные тени с помощью кривых easing.
• Типограф Text Prettier.

MS Office 365 может подключить библиотеки Creative Cloud для импорта стилей и ресурсов.

• Adalo — ещё один конструктор мобильных приложений, делающий нативную сборку на основе прототипа. Android, iOS и веб.
• WebStudio — ещё один конструктор сайтов в браузере.
• Fronty — сервис конвертирует картинку в HTML. Эффектно, но непонятно зачем: макет сайта и так сделан в каком-либо инструменте с разбивкой по слоям, а генераторов оттуда и так хватает.
• EscherSketch — браузерный инструмент позволяет делать паттерны из симметричных фигур и наглядно видеть их в повторяющемся полотне.
• Super Sphere — генератор контурных сфер с анимацией.
• Flow Lines — генератор абстрактных паттернов из линий.
• Trace — ещё один сервис, который убирает фон с фотографий.
• BG Painter — генератор модных фонов (например, «жидкий металл»).

• Scribbbles — бесплатная коллекция клякс и абстрактных паттернов для промосайтов.
• Calcolor — интересный генератор цветовых палитр, который позволяет копать смежные в разные стороны.
• Gradienta — генератор градиентов и интересных наложений слоёв в браузере с экспортом в CSS.
• Social Sizes — большая коллекция шаблонов для всех соцмедиа с актуальными размерами.

• Pixelworm — занятный сервис, который позволяет сравнить макет в Sketch и реализацию в мобильном приложении.
• Clai — инструмент позволяет сделать подачу макета на устройстве, которое в свою очередь можно вертеть с анимацией.
• Nototo — дичайший сервис заметок в виде карты виртуального мира.

Подробнейшая памятка по учёту GDPR при проведении пользовательских исследований от Кэрри Бойд из сервиса User Interviews. Закон накладывает много ограничений.

Дейв Каннингем из Co-op предлагает модель DIET (Design Impact Evaluation Tactic) для оценки потенциального успеха проекта. Она оценивает доработанную версию double diamond по нескольким вопросам. Чек-лист на отдельном сайте и в виде таблицы.

Интереснейшее обсуждение роли и будущего визуализации данных в эпоху искусственного интеллекта от IBM. Нужен ли вообще спидометр в машине с автопилотом?

Крепко обновил подборку материалов по созданию тёмной темы оформления интерфейса: гайдлайны платформ, двигатель прогресса в токенах, поддержка в письмах рассылки и на сайтах, хорошие кейсы.

Подробный чек-лист по внедрению дизайн-системы. Визуальный язык и токены, компоненты, инструменты, управление проектом.

Адам Шрики разложил паттерны для уведомления по степени комфорта для пользователя. От push-уведомлений и попапов, которые вырывают из текущего потока, до более нейтральных всплывающих подсказок.

Maria Rosala из Nielsen Norman Group даёт чек-лист этической зрелости при проведении пользовательских исследований. Всё больше компаний, где дизайнеры и менеджеры продуктов самостоятельно общаются с пользователями, но не всегда умеют делать это.

Хлоя Кархарт из HubSpot описывает потенциальную помощь дизайнера в увеличении retention. Она разобрала процесс «залипания» пользователя на четыре составляющих.

Джефф Сауро и Джим Льюис составили полный список стандартных методов оценки UX. Они развивались по трём веткам с 1980-х годов.

Ещё одна крупная галерея реалистичных лиц, сгенерированных алгоритмами. Причём это не просто лица, а целые позы в классическом для фотостоков виде.

Сайт анализирует айдентику в фантатических фильмах и комиксах. Они достаточно подробно разбирают вымышленные бренды: Blade Runner, Terminator, Back to the Future, Alien, Robocop, Total Recall и другие. Алексей Бусыгин также анализирует вымышленные логотипы из фильмов и айдентику в целом.

Мэтт Григорски из команды роста Shopify описал практики совместной работы и координации для распределённой команды. Отличная цельная памятка.

Мощный разбор текущего состояния Progressive Web Apps от Максимилиано Фиртмана. Внедрение, поддержка платформ, даже про тёмную тему и гибкие экраны.

Читайте полную версию дайджеста в моём блоге. В нём много новых материалов по дизайн-системам, инструментам дизайна, трендам, пользовательским исследованиям.

За свежими ссылками также можно следить: