Yury Vetrov
1 702

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

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

Поделиться

В избранное

В избранном

1. Material Design 2.0 и Android P

Google показала обновлённую дизайн-систему Material Design 2.0 на конференции I/O. Это серьёзное изменение визуального стиля и расширение инструментария, первые звоночки которого появились ещё в марте. Визуально Android P продолжил сближение с iOS (различия между платформами стираются с обеих сторон).

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

2. GDPR Hall of Shame

Массовые рассылки сервисов для соответствия требованиям европейского законодательства GDPR стали главным мемом конца мая. К сожалению, многие делали это крайне топорно, так что интернет приобрёл черты бюрократической конторы, где люди должны заполнять бесконечные и не очень понятные бланки. Сайт собрал самые убогие подходы к решению проблемы.

3. Ideas for Proximity Feedback with Progressive Hover Effects

Один из новых интересных интерфейсных паттернов ― предугадывание движения курсора мыши к важному элементу на экране. Мэри Лу показывает несколько примеров реализации ― это помогает экономить время и силы.

4. A List of Awards — Design Competition Categories, Deadlines, & Prices

Шикарный список наград и премий по самым разным веткам дизайна. Дизайнеры агентства Red Collar участвуют в жюри нескольких из них и рассказывают о механике их работы.

5. Дизайн-система Студии Олега Чулакова

Студия Олега Чулакова опубликовала свою дизайн-систему. Пока она охватывает только сайт самого агентства и сопутствующих подсайтов, но здорово, когда они осознают их важность в клиентской работе и инвестируют в своё будущее — тот же Brad Frost начал atomic design как решение для клиентских проектов.

Одной из первых в рунете это сделала «Мануфактура» для клиентских сайтов. Это хорошо показывает, что дизайн-системы по силам не только гигантским продуктовым компаниям, сейчас хватает инструментов для низкого старта.

6. Google Assistant — Conversation Design Guidelines

И другие материалы по проектированию голосовых интерфейсов:

7. Fieldtrips ― Design, UX, tech and marketing conferences

Список конференций по дизайну и разработке.

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

  • Sketch: вышла версия 50. В ней команда сфокусировалась на исправлении багов и улучшении производительности. Этот и следующий релизы будут про причёсывание существующей функциональности, чтобы сильные рывки было делать проще. Плагины: вышла публичная бета Overflow для создания информационных карт. Статьи: Mark Grambau показывает шизоидный, но занятный способ менять цвета иконок в библиотеке Sketch.

  • Figma: анонсировано разделение стилей на переменные. Это один из важнейших шагов, что бы связать дизайнерские шаблоны и компоненты в коде — сейчас большинство инструментов не имеет модульности для описания символов и компонентов.

  • Adobe XD: майское обновление. Появилась бесплатная версия (один публичный прототип), открыт инвестфонд на $10 млн для создателей плагинов и расширений, быстрая замена символов и массовая вставка из буфера, доработки импорта из Photoshop и Sketch.

  • Hadron: новый инструмент на стыке дизайна и разработки веб-интерфейсов. Он позволяет наглядно набросать компоновку экрана, используя библиотеку компонентов из дизайн-системы в духе Framer.

  • InVision: анонсировал платформу для плагинов к Studio. Как и Adobe XD, они будут давать гранты лучшим разработчикам из своего Design Forward Fund. Порог входа для новых инструментов опять увеличился, теперь платформами себя называют все четыре ключевых игрока — Adobe, Figma, InVision, Sketch.

  • Marvel: инструмент открыл API и также стал платформой. Первые интеграции достаточно базовые — Slack, Dropbox, Sketch. Из действительно интересных — Maze (юзабилити-тестирование на базе прототипов Marvel), Lookback и Niice (мудборды).

  • Apply Matter: ещё один инструмент для дизайнеров, который обещает экспорт макетов в код. В комплекте идёт аналитика и другие полезные ништяки.

  • Haiku: запустил галерею пользовательских проектов.

  • Avocode: выпустили отчёт о популярности тех или иных приёмов работы с макетами за 2017 год. Дизайнеры стали использовать меньше слоёв и больше систем контроля версий.

  • Phase: первая версия будет сконцентрирована на создании динамики. Во второй обещают достаточно сложную адаптивность. Они также готовят запуск Phase Magazine. Сооснователь Nick Budden выступил на Mail.Ru Design Conference 2018 и рассказал о грядущем релизе. Видео пока монтируется (часть необработанного), но его коллега Влад Швец описал её основные тезисы на русском. Кстати, Ник успел заехать в гости в полдюжины отечественных дизайн-команд, так что евангелистов у инструмента станет больше.

  • Spirit: вышла версия для Mac.

  • Fuse: инструмент стал бесплатным и open source.

  • Screely: сервис делает из простого скриншота интерфейса красивую подачу для презентации или сайта.

  • Wired Elements: коллекция элементов интерфейса на HTML и CSS для стилизации прототипов под бумажные скетчи.

9. The 16 UX Factors In The Point Of Sale System — POS Design Guide

Дизайн-студия Creative Navy рассказывает о своём опыте проектирования POS-интерфейсов для кассиров. Хороший обзор особенностей использования и лучших практик. Есть ещё вторая часть.

10. The divisiveness of design thinking

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

11. Lean User Research — Lessons from the Agile Trenches

Группа пользовательских исследователей из Indeed даёт советы по оптимизации процесса пользовательских исследований в Agile-процессе. Аналогичные советы от Лаи Ху.

12. Learning to let go as a design leader, part 1

Отличная статья Аластера Симпсона о трёх стадиях роста дизайн-менеджера: первый опыт управления дизайнерами, управление другими дизайн-менеджерами и работа с целым портфелем продуктов. Он даёт советы по тому, как грамотно вести себя на каждом из них. Часть вторая.

13. How to design interruptions

Маргарет Пи и Даг Ким из Microsoft предложили фреймворк "Design Considerations", который помогает грамотно спроектировать уведомления и другие прерывания основной деятельности пользователя. Отличный чек-лист и подход в целом.

14. Page Flows — Design inspiration & user flow patterns

Коллекция интерфейсных паттернов в виде видеозаписей прохода по сценариям.

15. By the people, for the people ― Keeping your design system evergreen

Отличный рассказ Лары Тасито о процессе работы команды дизайн-системы в HubSpot. Неплохо раскрыты этапы работы над условным компонентом и внутренний инструментарий для взаимодействия дизайнеров и разработчиков.

16. FAST UX Research — An Easier Way To Engage Stakeholders And Speed Up The Research Process

Зоя Димова описывает подход к вовлечению участников продуктовой команды к пользовательским исследованиям. Это важно в современном процессе создания продуктов, где мало времени и важно единое понимание проблематики рынка и целевой аудитории.

17. Ухудшающие A/B-тесты ― самый недооценённый инструмент менеджера продукта

Олег Якубенков рассказывает об ухудшающих A/B-тестах. Это быстрый и дешёвый способ проверить, можно ли вообще повлиять на целевую метрику. Для этого делается вариант дизайна, который явно хуже текущего ― это покажет, работает ли существующая версия лучше его.

18. Annoying Online Ads Cost Business

Якоб Нильсен давно пытался найти подтверждения того, что избыточная реклама снижает лояльность пользователей и приводит к их оттоку. Сервис Pandora проводил длительное исследование на эту тему в 2014-2016 году, и его результаты подтверждают гипотезу.

19. Plugged In

Microsoft выпустили игровой контроллер Xbox Adaptive Controller для геймеров с ограниченными возможностями. Статья подробно рассказывает о проблематике, работе над устройством и сообществе таких пользователей.

20. How LEGO Run Design Sprints at Scale

Интервью с Eik Brandsgård из LEGO о внедрении практики дизайн-спринтов в компании. Они решили сделать революционные, а не эволюционные изменения и запустили одновременный процесс с десятками команд. Для этого пришлось приостановить всю работу на два месяца, но по его словам, результат того стоил.

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

#дизайн

{ "author_name": "Yury Vetrov", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 2, "likes": 16, "favorites": 28, "is_advertisement": false, "section_name": "default", "id": "39564", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "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" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } } ]