Дизайн Yury Vetrov
6 445

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

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

В закладки

1. 10 years of the App Store ― The design evolution of the earliest apps

17 октября 2008 года открылся AppStore для iPhone, который здорово изменил модель продаж и распространения цифровых продуктов. К десятилетию магазина Майкл Стибер собрал историю изменения дизайна десяти приложений, которые появились в тот день и живут до сих пор.

2. Голосовые интерфейсы

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

3. How to write any error message

Рианнон Джонс из Deliveroo описывает подход компании к написанию сообщений об ошибках. Они делят их на несколько категорий и выбирают тональность.

4. «S7 Airlines. UX-стратегия на практике. Начало»

Алексей Шайхелисламов описал UX-стратегию S7 Airlines на основе выступления на московском Dribbble Meetup. Компания стремится стать более зрелой в плане дизайна и выбрала очень системный подход. Читайте также рассказы о работе дизайн-команд Rambler Group и Priceline.

5. Providing Better UX Recommendations

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

6. Why Blue Light Is So Bad — The Science and Some Solutions

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

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

  • Framer X. Показали видео работы и основные возможности. Получился цельный инструмент дизайна и прототипирования в духе InVision Studio.
  • Sketch 51. Теперь стили можно добавить в библиотеки. Много небольших доработок по прототипированию и основному интерфейсу.
  • Плагины Sketch. Timeline 2.0: надстройка от Anima стала ещё мощнее и сделала упор на интерактивные компоненты, код которых можно выгрузить (пока голый HTML, CSS, JS, но обещают React, VueJS, Angular, Lottie, iOS и Android).
  • persP. Ещё один новый инструмент дизайна, который играет на поле Figma ― одновременной работе нескольких дизайнеров в браузере. Заявлен весь комплект современных возможностей (прототипирование, обсуждение экранов, адаптивность, символы или компоненты). Из новых идей ― поддержка нескольких языков в макете, экспорт макетов в код и загрузка на сервер, быстрый просмотр на телефоне через QR-код. Анонс от создателей ― по ссылке.
  • Relate. Позиционируется как визуальная работа на базе кода — причём якобы можно сразу работать с компонентами на React. Интригующе, но пока из деталей есть только статья от авторов.
  • Affinity Designer для iPad. Вышла планшетная версия приложения. Первое время можно купить со скидкой 30%. Кстати, можно почитать пошаговое руководство по работе с инструментом.
  • Adobe Photoshop для iPad. На Adobe MAX 2018 этой осенью покажут полноценную версию для планшетов (сейчас есть простецкий Photoshop Express).
  • Flow. Инструмент для работы с анимацией вышел из беты (изначально назывался C4 Studio).
  • Flowmapp. Добавили инструмент для описания пользовательских сценариев. Здорово, что не нужно мучаться с этим в каком-нибудь Sketch или создателе ментальных карт.
  • Modulz. Колм Тьют сравнивает два популярных подхода к дизайну интерфейсов: работу в инструментах-наследниках печатного дизайна, результаты которых потом передаются в разработку, и визуальное программирование, где этого перехода нет. Он с прошлого года работает над инструментом Modulz, который движется во вторую сторону и позволяет в наглядном виде работать с компонентами на React.
  • Marvel. Надстройка Userflows позволяет автоматически сгенерировать карту переходов на основе прототипа.
  • Visual Sitemaps. Инструмент обещает создавать визуальную карту сайта на основе URL. Пока можно записаться на бета-версию.
  • Gradient Hunt. Ещё одна коллекция градиентов с быстрой возможностью забрать их CSS.
  • InVision. Вышла вторая версия мобильного приложения. Можно комментировать на планшетах и телефонах с помощью Freehand, быстро открывать прототипы Studio через QR-код.
  • Figma. Райан Корделл из Deliveroo рассказывает, как интерфейсные писатели работают совместно с дизайнерами.
  • SVGator. Пошаговое руководство по работе с инструментом для анимации SVG.
  • История создания Screely.
  • Polypane. Ещё один инструмент для тестирования адаптивных сайтов в браузере. Стивен Хей, один из ключевых авторов на тему, считает его одним из лучших.
  • Carbon. Онлайн-сервис помогает сделать эффектную подачу куска кода.
  • Shotsnapp. Ещё один инструмент для эффектного оформления экранов интерфейса.
  • Overflow. Мощный пример того, что можно делать в инструменте.
  • Firefox. Появился инструмент для анализа accessibility сайта.

7 (б). Новые инструменты поиска инсайтов

  • UXPressia 4.0. Вышла версия 4.0. Появилась совместная работа, и расширился инструментарий по всем аспектам — сами карты взаимодействия, персонажи, карта эмоций.
  • Pyoneer. Интересный интегрированный инструмент для поддержки дизайн-мышления. В нём богатый набор возможностей — карта путешествия клиента, персонажи, агрегация обратной связи из разных источников для поиска возможностей роста, привязка аналитики. И всё это на базе «двойного алмаза».
  • Dovetail и Aurelius. Сервисы для работы с базой инсайтов. Они помогают агрегировать данные пользовательских исследований, обратную связь и другие каналы, чтобы находить среди них полезные идеи для развития продукта.

7 (в). Шаблоны

  • MacOS. Apple добавила в интерфейсные гайдлайны MacOS, официальные шаблоны для Sketch и Photoshop. Скачать — по ссылке.

8. Design Systems at GitHub

Шикарный рассказ Дианы Маунтер о появлении и развитии дизайн-системы GitHub. Поэтапное развитие, примеры внутренних документов и процессов. Читайте также рассказы о работе команд Atlassian, Oscar Health и SalesForce.

9. Design for Kids Based on Their Stage of Physical Development

Nielsen Norman Group описывает особенности проектирования интерфейсов для детей. Автор сопоставляет развитие моторики с возрастом и даёт советы по элементам управления для каждого из них.

10. Real developers don’t use UIs

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

11. Responsibility Without Territory

Шикарный взгляд на правильное понимание и определение ролей в продуктовой команде от Питера Льюиса из Capital One. Они должны идти от конечного результата и цели, а не просто набора обязанностей, — это и результат обеспечивает, и гибкость в тактике даёт.

12. A Model for Conducting UX Workshops and Exercises

Сара Гиббонс из Nielsen Norman Group предлагает универсальный подход для проведения рабочих сессий. Три этапа — объяснить, провести, изучить результаты.

13. What Is This Thing Called Design?

Толковый пример рассказа о том, что такое дизайн, для начинающих от Кой Винь.

14. What Can Bike Sharing Apps Teach Us About Mobile On-boarding Design?

Люк Вроблевски изучил приложения для проката велосипедов и сравнил шаги, которые нужно пройти до начала езды. Многие неоправданно усложняют процесс, спрашивая лишнее или злоупотребляя обучением использования.

15. Level up for UX — Design lessons from video games

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

16. Storyboards Help Visualize UX Ideas

Рэйчел Краус из Nielsen Norman Group показывает, как создавать раскадровки сценариев использования. Они показывают кусок карты путешествия пользователя, причём эти два подхода можно совместить.

17. Accessibility at a Glance

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

18. 15 principles of good service design

Луиз Даун, глава дизайна Government Digital Services (делают Gov.uk) приводит свои принципы проектирования услуг.

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

#дизайн

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

Написать
{ "author_name": "Yury Vetrov", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 0, "likes": 25, "favorites": 32, "is_advertisement": false, "subsite_label": "design", "id": 43381, "is_wide": false, "is_ugc": true, "date": "Wed, 08 Aug 2018 15:09:46 +0300" }
{ "id": 43381, "author_id": 8729, "diff_limit": 1000, "urls": {"diff":"\/comments\/43381\/get","add":"\/comments\/43381\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/43381"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

Комментариев нет 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" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления
{ "page_type": "default" }