Дизайн Yury Vetrov
2 810

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

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

В закладки

1. Building the perfect splash screen

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

2. Все видео с Dribbble Meetup, «UX-Среда» и других мероприятий Mail.Ru Design на YouTube и во «ВКонтакте»

Мы проводим много конференций и митапов для дизайнеров, причём большинство из них записывается на видео. С 2011 года накопилось полторы сотни записей выступлений и панельных дискуссий о дизайне интерфейсов, графическом дизайне, пользовательских исследованиях и других профессиональных областях. Наконец-то мы собрали их.

3. Индексы ценности дизайна для бизнеса

Понимание ценности дизайна для бизнеса помогает обеим сторонам. Собрал несколько индексов, пытающихся посчитать взаимоопыление: McKinsey Design Index, Design Value Index; отчёты Forrester для IBM, British Design Council и финский рынок дизайна. В статье дискуссия о том, можно ли им верить.

4. Design for security

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

5. Внедрение UX-стратегии 2.0 или DesignOps

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

6. Строим Customer Journey Map

Станислав Хрусталёв из Hard Client написал годную памятку по созданию карты путешествия клиента. В блоге компании много других отличных материалов на тему сервисного дизайна: методы сбора обратной связи, внедрение улучшений, построение программ лояльности.

7. Новости голосовых интерфейсов

Голосовые помощники показывают крутой рост — на конец года прогнозируют 75 миллионов проданных устройств по миру (подробная статистика ниже). Китай скоро обгонит США, да и в России намечается горячая пора — к «Яндексу» и Google добавится Mail.Ru Group. Чтобы не остаться в стороне, дизайнерам давно пора качать мускул голосовых интерфейсов.

8. Как разобрать интерфейсный долг

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

Дизайн-долг ― это намеренно или неумышленно накопленные проблемы с юзабилити, решение которых откладывается до будущих версий. В итоге страдают пользователи, а они хоть и терпеливые, со временем соскакивают и не возвращаются. Есть несколько примеров системного подхода: Nielsen Norman Group, Truven Health, Athena Health, Salesforce, Optimizely.

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

  • Bondlayer: новый инструмент дизайна и разработки. Можно получить код для веба, Android или iOS (и даже опубликовать в магазинах приложений).
  • InVision Studio: вышла версия 1.0. Общие библиотеки компонентов, улучшение интерфейса и производительности. UI-кит для iOS и Android.
  • Sketch. Плагины: Timelapse позволяет записать скринкаст работы над макетом. Anima управляет отступами вложенных символов. VK Data позволяет вставлять различные данные из профиля «ВКонтакте»: аватарки друзей, сообществ, обложки видео. Felipe позволяет превращать примитивные фигуры в символы Sketch. Анонс от автора ― по ссылке.
  • Atomic: инструмент закрывается. Команда планирует заняться более общим инструментом для продуктовой разработки.
  • Figma: Дилан Филд сделал обзор основных обновлений за год. Скорость развития инструмента, конечно, фантастическая. Читайте также советы по эффективной работе с инструментом от Тома Джонсона.
  • Hadron: инструмент добавил отдельный набор возможностей для разработчиков, так что они могут работать вместе с дизайнером над одним проектом.
  • Iterate: Тарас Бризицкий делает свой инструмент для проектирования интерфейсов на iPad. Недавно появилась бета-версия. Более ранний анонс с описанием изначальной идеи ― по ссылке.
  • Cleverstack: сервис помогает проводить мозговые штурмы в онлайне — записывать идеи и голосовать за них, чтобы выбрать наиболее хорошие.
  • Drawkit: шаблоны иллюстраций в духе Slack.
  • Meta Tags: сервис помогает быстро примерить метатеги сайта и то, как ссылка отображается в Google, Facebook, Twitter, LinkedIn, Pinterest и Slack.
  • Adobe XD: демо возможностей прототипирования голосовых интерфейсов. Памятка по дизайну интерфейсов в Adobe XD.
  • Framer: компания получила ещё $24 млн инвестиций в серии B.
  • Readymag: сервис анонсировал бета-версию разбивки длинных страниц на секции. Это упростит изменение контента в середине (не придётся двигать и перепроверять то, что ниже).
  • Leeflets. Ура! Ещё один конструктор одностраничников.
  • Grid Studio. Стоп. Ещё один!
  • Palx: генератор цветовых палитр. Вы ему основной цвет, он вам ― вспомогательные.
  • Squoosh: сервис для оптимизации изображений от Google.
  • Avocode: теперь сервис тоже показывает связку экранов, загруженных как прототип.

10. Samsung Infinity Flex

Samsung давно показывала технологии гибких экранов, а в начале ноября 2018 года показала концепт телефона. Весной выйдет коммерческая модель. Похоже, наконец-то начнётся интересная движуха в мобильных интерфейсах, где всё стало слишком предсказуемо.

Android поддержит эту возможность в ближайшее время. Кроме этого, компания анонсировала новую интерфейсную оболочку One UI. Интересно, что она разделила экран на верхнюю (контент) и нижнюю (элементы управления) части.

11. Efficient Consistency with the Mosaic Design System

Мощный рассказ Бенджамина Мартина из TeleTracking о том, как их дизайн-система собирает компоненты и шаблоны в Sketch из токенов. В статье отличная диаграмма последовательности сборки с упоминанием всех нужных инструментов.

12. We are Colorblind — Making the world a better place for the colorblind

Толковый сайт по оптимизации интерфейсов для людей с нарушениями восприятия цвета (300 миллионов человек в мире). Кейсы, статьи, инструменты.

13. Master Product Design at Scale

Брэд Фрост, Дэн Молл и Джош Кларк подготовили серию образовательных видео по работе над дизайн-системами для InVision. Анонс — по ссылке.

14. Инструкция по созданию тёмной темы для сайта или приложения

Судя по всему, тёмные темы оформления станут хитом следующего года. Энди Кларк показывает, как поддержать её на сайте через медиазапросы.

15. A collection of open source frameworks for helping designers and engineers to grow at work

Джонни Берч собрал коллекцию карт компетенций для дизайнеров и разработчиков от разных компаний. Он запустил свой инструмент Progression Pack, где компетенции разбиты на три категории — общечеловеческие, профессиональные и лидерские навыки.

16. Отчёт о DesignOps Summit 2018

Попал на относительно свежую конференцию по дизайн-менеджменту цифровых продуктов DesignOps Summit (проходит второй год). Оказалось очень годно ― одна из самых полезных, на которых бывал.

Мощно, что смогли набрать столько узкоспециализированного контента на два дня ― почти все выступления были либо добротными, либо крутыми (всего несколько пустышек). Уже есть презентации и отчёт от Натали Хансон. Организаторы обещают опубликовать видео.

17. Research That Counts

О методах количественных исследований, которые использует Facebook.

18. The User Experience of Chatbots

Пользовательское исследование ботов от Nielsen Norman Group. Отличное описание типовых сценариев и частых проблем.

19. The Methods UX Professionals Use (2018)

Джефф Сауро провёл регулярный опрос среди UX-специалистов на тему используемых ими методов пользовательских исследований. В статье статистика за 2018 год.

20. Experimenting with brain-computer interfaces in JavaScript

Чарли Жерар научилась управлять сайтами в браузере через устройство мозг-компьютер с помощью JavaScript.

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

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

Написать
{ "author_name": "Yury Vetrov", "author_type": "self", "tags": [], "comments": 4, "likes": 15, "favorites": 104, "is_advertisement": false, "subsite_label": "design", "id": 52529, "is_wide": false, "is_ugc": true, "date": "Wed, 05 Dec 2018 18:20:40 +0300" }
{ "id": 52529, "author_id": 8729, "diff_limit": 1000, "urls": {"diff":"\/comments\/52529\/get","add":"\/comments\/52529\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/52529"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

4 комментария 4 комм.

Популярные

По порядку

3

Опять всего много и читать времени нет ((

Ответить
2

как-нибудь потоооооооооом почитаю прокрастинация зовет чаи гонять

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