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

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

«Альфа-Банк» оформил свою дизайн-систему в отдельный сайт (до этого была просто библиотека на GitHub). Есть как компоненты в коде, так и описание принципов дизайна, а также шаблоны в Sketch ― один из лучших примеров на нашем рынке, да ещё и удачно сопровождённый их новым стилем иллюстраций.

Отличный кейс исследования по методике Jobs to Be Done для запуска сервиса Userlist от Клэр Суэллентроп (Claire Suellentrop). Пошагово рассказано о процессе исследования и сделанных выводах по функциональности и интерфейсу продукта.

Здоровый взгляд Хой Винь (Khoi Vinh) на никак не умолкающую дискуссию о том, полезен ли для профессии лейбл «дизайн-мышление» или это пустой маркетинговый баззворд. Даже если кто-то использует его неправильно, это мощный инструмент для того, чтобы сделать дизайн более массовым явлением (пусть даже кто-то поначалу будет делать это неправильно).

То же самое сейчас происходит с программированием — огромное количество курсов для детей и просто начинающих наверняка породит массу дрянного кода, но это решаемая проблема. Он также полемизирует с Наташей Джен (Natasha Jen) из Pentagram, чьё одиозное выступление в 2017 году — чистейший кликбейт и непонимание роли дизайнера в современных продуктах и мире в целом.

Ричард Бэнфилд (Richard Banfield) — ещё один дизайнер, которого утомил кликбейт Наташи Джен. Он разбирает её псевдокритику.

Конференция по дизайн-системам DSCONF прошла 14-15 марта в Хельсинки. Опубликованы видео выступлений с неё.

Свежие выкладки Терезы Фессенден (Therese Fessenden) из Nielsen/Norman Group о том, насколько пользователи готовы прокручивать страницы. Хотя основная часть всё ещё не опускается ниже первого экрана, это число уменьшилось с 80% в 2010 году до 57% сейчас.

Актуализировал прошлогоднюю заметку про книги о дизайн-системах. Мне было интересно разобраться в первоисточниках, поэтому в прошлом году я засел за чтение всего, что выходило на тему паттернов, компонентов и модульности. Идеальной книги нет, но часть из них показывает очень правильные точки зрения.

• Figma: примеры свежих экспериментов по использованию API. Некоторые из них: официальный конвертер макетов в код для React на GitHub (как это устроено и что он умеет) и сторонний Pagedraw; GitHub экспортирует библиотеки иконок в продукт.
• Sketch the Ripper разбирает макеты Sketch в онлайне. Плагины: Stackswell для адаптивных макетов. Статьи: Мэтью Талеби (Matthew Talebi) описывает более-менее здоровый процесс работы с шаблонами и перечисляет разные способы его распространения.
• InVision: купила Wake, который показывает текущие макеты дизайнеров в команде. А ещё у них были крутейшие интервью с дизайн-командами, так что и Design Genome Project перепадёт.
• Framer: появилась работа с 3D-объектами и их анимация. Это востребованный визуальный стиль, который делает продукты бодрее.
• Studio: инструмент вышел из беты.
• Flawless: появилась возможность сравнивать макеты с реализацией приложения на iOS (в эмуляторе).
• Visual Inspector: плагин для Chrome позволяет ковырять стиль сайтов в более наглядном виде, чем стандартный инспектор кода. Изменения можно обсуждать с коллегами.
• Solis: приложение для Macbook облегчает вёрстку адаптивных сайтов. Его можно подключить к любому редактору кода и получить гибкий и мгновенный предпросмотр даже для изменений в файлах препроцессоров.
• Lonely Page: ещё один конструктор одностраничников.
• Sheet2Site: генератор простых сайтов из таблиц в Google Sheets.

Брэд Фрост (Brad Frost) описывает принцип создания тем оформления в дизайн-системах по всем модным канонам ― токены, единая архитектура элементов интерфейса.

Кара Пернис (Kara Pernice) из Nielsen/Norman Group описывает знакомые и свежие выкладки из исследований, посвящённых баннерной слепоте.

Дэниел Голман (Daniel Goleman) и Ричард Бояцис (Richard E. Boyatzis) предлагают отличную модель для описания эмоционального интеллекта по 12 характеристикам: самоанализ, самоконтроль, социальный анализ и управление взаимоотношениями. На основе неё удобно оценивать базовые навыки специалиста в команде.

Хороший рассказ студии «Мыслеформа» о создании гайдлайнов иллюстраций для «Лаборатории Касперского». Разбор стилеобразующих элементов и вариаций по исполнению.

Джефф Сауро (Jeff Sauro) показывает, как измерить отношение пользователей к бренду. Он приводит пример оценки для пары десятков известных компаний.

Рассказ о редизайне Reddit, который не менялся с 2008 года. В такой ситуации опасно делать резкие шаги ― важно начать процесс обновления, а после этого сделать его непрерывным. Есть официальный анонс (выкатываться он будет постепенно). На очереди Craigslist.

Лиа Гарвин (Lia Garvin) из Google даёт советы по прокачке soft skills в команде. Его коллега Хардик Пандья (Hardik Pandya) сравнительно недавно попал в компанию и описал свой опыт интеграции в неё. Получилась хорошая памятка по профессиональной гигиене и командному взаимодействию для любого специалиста.

Алёна Маккензи (Alaine Mackenzie) из Shopify рассказывает о текущей структуре дизайн-команд в компании и том, почему она изменилась за последние годы.

Глава дизайн-системы Microsoft Fluent Джо Питт (Joey Pitt) рассказывает о принципах работы её команды. Как строится цикл обновлений, как они завязаны на версии Windows.

Отличная статья Пола Макинерни (Paul McInerney) из IBM о том, как и в каких ситуациях пользовательские исследования корректируют планы продуктовых команд.

Том Уайт (Tom White) научился генерировать человекоподобные абстрактные иллюстрации с помощью алгоритма — он скармливает ему обучающую выборку, а затем подбирает относительно узнаваемое исполнение. Проект сделан в рамках инициативы Google Artists and Machine Learning, у неё есть блог.

AIC запустила академию для начинающих дизайнеров с бесплатной стажировкой. В свежей статье Сергей Попков сравнивает плюсы и минусы найма сильного дизайнера и прокачки начинающего с нуля. Он рассказывает о системе развития стажёров в AIC и Skillbox. Кстати, в последних числах апреля AIC объединилась с Лабораторией Артёма Геллера — они сфокусируются на работе над государственными сайтами.

Сравнительная таблица методов количественных пользовательских исследований от Кейт Мейер (Kate Meyer) из Nielsen/Norman Group.

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

#дизайн