Дизайн Yury Vetrov
6 132

Нейросеть для рисования от Nvidia, инструкция Microsoft по дизайну ИИ-продуктов и другие важные новости дизайна за март

Традиционный дайджест от директора по дизайну бренда Mail.Ru.

В закладки

1. Teenager’s UX ― Designing for Teens

Алита Джойс и Якоб Нильсен из Nielsen Norman Group рассказывают о пользовательском исследовании подростков и их взаимодействии с интерфейсами. Полезная привязка к паттернам в конце и сравнение с другими возрастами (дети, студенты, взрослые).

2. Repeat after me — Preference testing is not A/B Testing

Золотые слова Дэвида Тревиса из Userfocus: «Хватит спрашивать пользователя, какой вариант дизайна ему нравится. Это даёт ложные результаты, которые создают иллюзию принятия решений на основе данных».

3. UI Copy — UX Guidelines for Command Names and Keyboard Shortcuts

Отличная памятка Анны Келли из Nielsen Norman Group о правильных названиях интерактивных элементов и выборе комбинаций для быстрых клавиш (десктопные и веб-приложения).

4. Design interviewing — Ask me anything

Мощная инструкция по проведению собеседований от Курта Варнера из Dropbox. Много толковых советов по вопросам, формату, портфолио, тестовым, отсеву и другим аспектам процесса.

5. Checklist Design — Best UI elements for the best UX practice

Коллекция чек-листов по проектированию типовых интерфейсных паттернов. Что не забыть при их использовании.

6. Технологические, интерфейсные и визуальные тренды в дизайне

Джон Маэда выпустил свежий ежегодный отчёт Design in Tech Report. В этом году скорее компиляция заметных новостей в профессиональном сообществе, чем анализ инсайтов, как это было в первые годы, и чего обычно ожидаешь от новых выпусков. Ну и «нативка» инициатив его текущей компании Automattic (создатели WordPress).

Я не очень верю в ежегодные обзоры трендов (хотя, конечно же, обозреваю те, что ещё выходят) — отрасль меняется медленнее. Многие из тенденций развиваются и живут в восходящем виде пару лет, так что видишь их кочующими в такие отчёты из года в год (виртуальная и дополненная реальность, например).

Некоторые вроде «анимации», «крупной типографики» или «фоновых видео» уже стали клише в духе гэгов Бенни Хилла, про них наверняка будут вынуждены читать наши внуки. Поэтому разделяю дизайнерские тренды на три вида: технологические, интерфейсные и визуальные.

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

  • Sketch: компания получила $20 млн от инвестфонда Benchmark. В отличие от всех остальных Sketch все эти годы развивалась на деньги основателей. Но становится видно, как Figma с суммарными $82,9 млн обходит её на повороте. Sketch тизернула планы на год: браузерная версия с совместной работой, передача макетов из коробки, командные тарифы и пространство в облаке. Правда, темпы всё равно не огонь — первую версию в браузере обещают только к концу года. За это время Figma сделает немало витков вокруг земли.
  • UXCam: сервис для аналитики пользователей. Ориентирован на изучение конкретных сессий использования сайта или приложения.
  • Bloma: первый коммерческий инструмент алгоритмического дизайна от команды Creative.ai. Позволяет создавать постеры, рекламу и другие простые форматы.
  • Populate: огромная коллекция полуреальных данных для макетов и прототипов. Имена людей, клички животных, адреса, цвета, музеи, художники — всего 120 списков.
  • Friendly Faces: генератор иллюстративных аватаров пользователей для макетов.
  • Joe Schmoe: коллекция иллюстраций-аватаров пользователей для ваших макетов.
  • Blocs: ещё один инструмент дизайна, сфокусированный на адаптивных сайтах. Основан на идее «поясов», которые можно перемещать вверх и вниз по странице — как и привычные Tilda или Squarespace.
  • Adobe XD: мартовское обновление. Упростилось использование наработок в Adobe Illustrator, доработки интерфейса, улучшение интеграции с Jira.
  • Marvel: добавили возможность пользовательского тестирования прототипов. Они помогают как с записью сессии, так и с рекрутингом. Также вышла вторая версия плагина Maze для тех же задач.
  • Geenes: наглядный сервис для подбора цветовой палитры для интерфейса. Сразу примеряет их на абстрактный экран мобильного приложения.
  • Mock: простой онлайн-сервис вставляет видео интерактивного прототипа в рамку телефона для промо.
  • Abstract: получила $30 млн инвестиций (всего в них вложили $55 млн). Сильно для относительно простого сервиса, который не является самостоятельным инструментом.
  • Figma: Томас Лоури из Figma написал памятку по созданию библиотеки элементов. Максим Робинет поженил инструмент с Lottie.
  • Haiku Animator: инструмент сфокусировался на интерфейсной анимации и переименовался соответствующе.
  • AfterEffects: Джонас Наймарк из Google опубликовал шаблон, облегчающий работу с анимацией в Material Design.
  • Accessible Brand Colors: сервис подсказывает, насколько выбранные цвета хорошо работают для пользователей с ограниченными возможностями в разных контекстах: фон, шрифты разного размера и так далее.
  • Usabilla: инструмент купила SurveyMonkey.
  • Supernova: серьёзно обновили техническую начинку.

8. Microsoft Guidelines for Human-AI Interaction

Группа исследователей Microsoft собрала гайдлайны по дизайну продуктов, использующих технологии искусственного интеллекта. Получилось 18 эвристик, которые достаточно удобно использовать в работе, вот анонс и как использовать их в креативном процессе.

9. What Is the Purpose of UX Measurement?

Годная памятка Джеффа Сауро о том, зачем делаются измерения UX, по каким принципам они работают и какие ответы можно получить с их помощью. Как выбрать правильные метрики и как связать изменения интерфейса с их улучшением.

10. Human error ― An important ingredient in great designs

Отличная памятка по обработке ошибок пользователей от Эмануэля Сербаноу. Он разбирает их психологические причины и даёт рецепты по типовым ситуациям. Вдогонку — чек-лист по понятным и ёмким сообщениям об ошибках в формах от Эми Лик.

11. AUX3 — Making UX Research Track with Agile

Кэрол Джей Смит, Тайра Раух и Ханна Мойерс подробно описывают модель интеграции пользовательских исследований в канонический Agile-процесс. Это три типа работ (learning, problem solving и execution), для каждого из которых показан пример реальных задач.

12. Organizing Brainstorming Workshops ― A Designer’s Guide

Толковая памятка Славы Шестопалова из Eleks о популярных методах-помощниках при проведении брейнштормов ― шесть шляп мышления Де Боно, креативная стратегия Disney и SCAMPER от BBDO.

13. IBM AR/VR Design Language

Гайдлайны IBM по интерфейсам виртуальной и дополненной реальности.

14. Portfolios for UX Researchers — Top 10 Recommendations

Lexie Martin из Nielsen Norman Group даёт советы пользовательским исследованиям по составлению портфолио. Хотя у них нет визуально наглядных результатов, можно неплохо рассказать об исследовательских проектах и их результатах.

15. User Need Statements

Сара Гиббонс из Nielsen Norman Group разбирает формат описания пользовательских потребностей. Она советует использовать глаголы (цели и конечные состояния), а не существительные (конкретные решения).

16. Nvidia AI turns sketches into photorealistic landscapes in seconds

Ещё один пример крышесносной магии — экспериментальное решение Nvidia превращает набросок в фотографию природного ландшафта.

17. Storybook 5

Вышла пятая версия одного из самых популярных живых гайдлайнов Storybook для компонентов на React, Vue, Angular, React Native и Ember. Он наконец-то стал выглядеть прилично и сам построен на базе Storybook.

18. Beyond Vision — Sound Design as Sensory Design

Глава звукового и сенсорного дизайна Microsoft Мэтью Беннет рассказывает о своём видении роли звука в интерфейсах и цифровых продуктах в целом. Интересный широкий взгляд на горячую тему.

19. Особенности подходов к дизайну в реальном производственном секторе

Лев Соломадин из Сибура рассказывает об особенностях работы дизайнера интерфейсов в крупной и сложной производственной компании. Крутое погружение в реальный мир.

20. A guide to starting your own design studio from Hawraf

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

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

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

Написать
{ "author_name": "Yury Vetrov", "author_type": "self", "tags": [], "comments": 0, "likes": 25, "favorites": 79, "is_advertisement": false, "subsite_label": "design", "id": 63590, "is_wide": false, "is_ugc": true, "date": "Fri, 05 Apr 2019 16:16:22 +0300" }
{ "id": 63590, "author_id": 8729, "diff_limit": 1000, "urls": {"diff":"\/comments\/63590\/get","add":"\/comments\/63590\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/63590"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

Комментариев нет 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": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "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, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }