Дизайн
Yury Vetrov
3070

Продуктовый дизайн: главные инструменты, новости и статьи за ноябрь

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

В закладки

Артур Абраров из Redmadrobot сделал подробнейший обзор отличий интерфейсных паттернов Android и iOS.

Ралука Будиу из Nielsen Norman Group рассказывает о теории сбора информации, которая проводит аналогию с поиском пищи животными. Как пользователи решают свои информационные задачи и чем интерфейсы могут помочь им.

Опубликован следующий документальный фильм из серии о Ленинградской школе дизайна.

История развития полосы прокрутки в операционных системах.

Creative Market провела большое исследование природы креативности. Компания запустила серию статей на тему и в первой из них предложила крутую универсальную модель.

Dribbble провела мощное исследование среди своего сообщества (участвовало 17 тысяч человек). Особенности места работы и графика, образование, зарплата и другие аспекты.

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

  • Photoshop для iPad вышел, а в следующем году запустят Illustrator для iPad. Они работают с хранящимися в облаке настоящими файлами .PSD и .AI, хотя портированы не все функции — будут смотреть на органичность для планшетов и запросы пользователей.
  • Adobe XD: ноябрьское и октябрьское обновления. Одно из самых мощных: совместная работа над макетом (правда, надо включать для каждого макета), история версий, состояния компонентов (UI Kit с примерами), множественные взаимодействия в прототипе с одним элементом через разные триггеры, импорт библиотек из Sketch (макеты с использованием компонентов оттуда не сломаются).
  • Обновление линейки Adobe CC: Photoshop с упрощённым выделением объектов и общие улучшения интерфейса в Illustrator, InDesign, Animate и других. А ещё появится стриминг своей работы.
  • Adobe Aero: дизайн в дополненной реальности через мобильное приложение. Импортирует файлы из известных программ (Maya, Cinema 4D, Dimension, Photoshop, Illustrator).
  • Sketch 60: переделано управление компонентами, автоматическое подключение библиотек новому сотруднику в версии для команд.
  • Плагины. Flowkit: информационные карты в Figma, Sketch и Adobe XD.
  • Suitcase Fusion: управление подключаемыми шрифтами.
  • Represent: дать доступ к прототипу коллеге или клиенту, сидящему далеко.
  • Sketch Styler: находит визуально похожие решения без назначенных стилей и предлагает причесать их.
  • FramerX: готовит версию для браузера. Совместная работа и все дела. Как Salesforce готовит свои компоненты своей дизайн-системы на React для FramerX и делает прототипы на их основе.
  • Figma: добавляется аналитика использования компонентов из общей библиотеки.
  • Плагины: Vectary и Artboard Studio — 3D-шаблоны телефонов и физических предметов для примерки макетов в них.
  • Figma Ninja: обучалка основам инструмента в виде шаблона.
  • Product Planner: тонна шаблонов для управления продуктами и проектами.
  • InVision: обновился Design Systems Manager. Появилась интеграция со Storybook.
  • Glide: генератор мобильных приложений на основе «Google Таблиц».
  • Paper & Media: простейший конструктор картинок для публикаций в соцсетях.
  • UI Bakery: простой онлайн-конструктор интерфейсов на базе дизайн-системы Eva.
  • 8b: ещё один конструктор промосайтов.
  • BuilderX: ещё один браузерный инструмент дизайна с экспортом в код на React.

Ралука Будиу из Nielsen Norman Group рассказывает о микросессиях (около 15 секунд и меньше), которые позволяют решить многие мелкие задачи пользователей на мобильных и носимых устройствах, а также в голосовых помощниках. Она показывает хорошие и плохие примеры в уведомлениях и виджетах.

Подкаст Smashing Magazine с Джиной Энн о токенах в дизайн-системах. Она один из авторов идеи и рассказывает об истории их создания. Сейчас Энн пишет книгу на тему (в дополнение к онлайн-курсу) и вместе с рабочей группой W3C прорабатывает стандарт.

Каталог дизайн-систем с использованием токенов.

Мощный разбор задач и состава CJM от Михаила Руденко в двух частях, включая примеры из практики «Бюро сервисного дизайна». Часть вторая.

Стефани Уолтер и Лоуренс Вагнер подготовили набор игральных карт с когнитивными искажениями. Его можно скачать.

Эмма Болтон описывает фреймворк ResearchOps. Это восемь ключевых аспектов: от формулирования вопроса исследований и поиска респондентов до настройки инструментария.

Прия Камат и Кэндис Хоган из Uber рассказывают о команде пользовательских исследований, ориентированных на изучение фундаментальных особенностей поведения. Она состоит из учёных.

Статья описывает один из примеров применения: сократили отказ от заказа во время ожидания на 11% за счёт обработки феноменов избегания ожидания, организационной прозрачности и градиента целей.

Отличная простая памятка Марка Дженкинсона из Trello по методам координации удалённой дизайн-команды. К некоторым из них доступны шаблоны.

Джефф Сауро разбирает метрику CES (Customer Effort Score), которая оценивает проблемы пользователя во взаимодействии с продуктами компании (в основном речь про обращения в поддержку). Интересно, что агентство (автора концепции) купил Gartner и впоследствии немного изменил опросник.

Кара Пернайс из Nielsen Norman Group уже 20 лет проводит исследование лучших интранетов. Составила критерии ключевых возможностей на сегодня.

Энди Торнтон рассказывает о карте компетенций агентства Clearleft. Чуть раньше он описал структуру навыков и критерии оценки. Но самое крутое: его опубликовали в сервисе Progression App. Кажется, это первый публично доступный пример карты компетенций из него.

Джефф Сауро разбирает подходы к измерению delight.

В сентября по ноябрь проходит основной поток конференций по дизайн-менеджменту. Я был на четырёх основных: MXConference (позже переименовалась в LXConference, а затем закрылась), UX Strat, DesignOps Summit и Leading Design. Собрал для вас материалы с нескольких из них.

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

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

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

Написать
{ "author_name": "Yury Vetrov", "author_type": "self", "tags": ["\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439\u043e\u043f\u044b\u0442","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","ux","sketch","figma"], "comments": 15, "likes": 12, "favorites": 123, "is_advertisement": false, "subsite_label": "design", "id": 96027, "is_wide": false, "is_ugc": true, "date": "Thu, 05 Dec 2019 17:08:27 +0300", "is_special": false }
Создать объявление на vc.ru
Офлайн
Алексей Колесников, основатель сети Strike Arena: как заработать на арене для киберспорта
Киберспорт успешно развивается уже несколько десятилетий. За это время он стал официальным видом спорта…
0
{ "id": 96027, "author_id": 8729, "diff_limit": 1000, "urls": {"diff":"\/comments\/96027\/get","add":"\/comments\/96027\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/96027"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
15 комментариев
Популярные
По порядку
Написать комментарий...
2

В Figma еще добавили auto-layout сегодня 

Ответить
1

Очевидно, это уже новость для следующего дайджеста)

Ответить
0

Издержки ежемесячного формата — подборка на конец ноября, даже если 1 декабря выйдет что-то новое крутое. Но делать чаще — и по времени сложно, и не всегда набирается крутого.

Ответить
0

Подправь статью по бырику пока она не вышла на пик просматриваемости (как раз сегодня будет 100%) - автовёрстка в фигме это САМОЕ главное, что произошло в дизайне за весь 2019-й год.

Ответить
0

В дайджесте был тизер пару месяцев назад, когда они анонсировали autolayout.

Ответить
0

Ну тизер это же не тооо, ну

Ответить
1

Спасибо)

Ответить
0

Юрий, откуда столько времени, чтобы собирать такие Материалы на еженедельной основе?)

Ответить
0

 Читайте полную версию дайджеста в моём блоге

Там ссылка на апрельский дайджест, поправь :–)

Ответить
0

Блин, уже не отредактировать :(

Ответить
0

Бывает. Пользуясь случаем, прошу: поменяй, пожалуйста это сочетание цветов. Оно прям отвратительно :–)

Ответить
0

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

Ответить
0

Получается, нужно найти такой цвет ссылок, чтобы он сочетался со всеми фонами? Ну и задачка))

Ответить
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" }