Дизайн
Yury Vetrov
2800

Продуктовый дизайн: 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% сейчас.

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

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

  • 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 — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Yury Vetrov", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 4, "likes": 15, "favorites": 19, "is_advertisement": false, "subsite_label": "design", "id": 37567, "is_wide": false, "is_ugc": true, "date": "Mon, 07 May 2018 12:15:59 +0300", "is_special": false }
0
{ "id": 37567, "author_id": 8729, "diff_limit": 1000, "urls": {"diff":"\/comments\/37567\/get","add":"\/comments\/37567\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/37567"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
4 комментария
Популярные
По порядку
0

Автор, вы правда считаете, что у кого-то из читателей ВЦ в ленте нету Хабра?

Ответить
3

Многие жалуются на объём дайджеста, поэтому для vc я специально делаю упрощённую версию с ключевыми новостями. И да, Хабр читают не все (как и любой другой ресурс).

Ответить
0

Quantitative как раз не качественных, а количественных.

Ответить
0

Спешил, исправили.

Ответить

Комментарий удален

{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }