Дизайн Yury Vetrov
3 028

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

Дайджест от директора по дизайну бренда Mail.Ru Юрия Ветрова.

В закладки
Аудио

1. Унифицированные иллюстрации в цифровых продуктах

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

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

2. "Technology Myths and Urban Legends"

Кейт Моран и Ким Флаэрти из Nielsen, Norman Group показывают причины возникновения технологических мифов и то, как они влияют на использование продуктов.

3. Adobe Max 2018 и новые инструменты дизайна

На ежегодной презентации новых продуктов и экспериментов Adobe Max 2018 показали карьерный самосвал обновок: Adobe XD, Photoshop для iPad, Adobe Fonts (бывший TypeKit), обновления After Effects, Illustrator, InDesign, Dimension и других инструментов. Экспериментальные: Project Aero, Project Gemini, Character Illustrator CC, Premiere CC. Обновления уже прилетели через Creative Cloud.

4. "Everything you need to know about skeleton screens"

Билл Чанг провёл пользовательское исследование схематичных экранов загрузки, которые популяризировал в своё время Facebook. Они помогают, если показывают загрузку поэтапно и снижают неопределённость ожидания, а не просто служат в качестве заглушек. Автор даёт советы по правильной анимации для них.

5. "Dealing with Dependencies Inside Design Systems"

Пятая часть серии статей Нейтена Кёртиса о релизном цикле дизайн-систем говорит о взаимозависимостях между компонентами и другими слоями модульности.

6. "What Could an Intelligent Assistant Do for You? A Diary Study of User Needs"

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

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

  • Figma. Появилась мощная функция для работы с группой повторяющихся объектов, когда их можно изменять одновременно. Читайте также инструкцию по работе с API для начинающих от Даниэля Холика Daniel Hollick из TIDAL. Пошаговое подключение к макетам и их разбор.
  • FramerX. Лачезар Петков разобрал нюансы работы с инструментом.
  • Interplay. Экспериментальный онлайн-инструмент дизайна интерфейсов, который также обещает связку с реальными компонентами дизайн-системы на React, Angular и Vue.
  • Modulz. Кольм Тьют начал сбор денег на свой фреймворк для создания дизайн-систем, о котором писал несколько раз в дайджесте (сопроводительная статья). Денег дали.
  • Overframe. Простой инструмент для Mac позволяет вставить интерактивный прототип в рамку телефона и получить видео для промосайта.
  • Ratio. Экспериментальный инструмент дизайна от Флриана Шульца. В своей сопроводительной статье он рассказывает о принципах работы. Ratio основан на токенах и использует их в достаточно передовом виде (например, может подключать их из стороннего инструмента).
  • Principle 5. Вышло обновление, хотя и лёгонькое. Можно импортировать макеты из Figma, есть тёмная тема оформления.
  • UXPin. В прототипах появились общие переменные, которые можно использовать на разных шагах (например, введённое в форму имя пользователя).
  • Famous. Инструмент обещает экспорт макетов Sketch, Adobe XD и Photoshop в работающие Progressive Web Apps.
  • Webflow. Добавили инструмент работы с CSS Grid.
  • Sketch. Советы Дмитрия Бунина по использованию стилей текста в Sketch 52.
  • Prototypr. Запустила хронологию обновлений инструментов дизайна — сейчас есть архив за последний год.
  • UX Feedback. Сервис позволяет опросить пользователей сайта. На входе — оценка через смайлики (по шкале из пяти), есть возможность задать дополнительные вопросы.
  • Sympli Versions. Система версионирования макетов и шаблонов для дизайнеров от Sympli. Её анонсировали в 2017 году, теперь она доступна для всех.
  • Purple. Сервис помогает хранить проектную документацию по дизайну: от входящих требований и сценариев использования в самых разных вариациях до макетов и других наглядных результатов работы.
  • Drafta. Ещё один сервис для хранения макетов в команде. Правда, не особо полезный ― просто галерея без спецификаций и даже описания. Делает отечественная компания Scada.
  • Sensitive. Ещё один сервис версионирования макетов.

8. "Building a UX Metrics Scorecard"

Джефф Сауро описывает подход сводных оценочных листов состояния UX в продукте. Это отличный наглядный инструмент для отслеживания «здоровья» дизайна и выбора точек приложения усилий дизайн-команды.

9. "The fundamental job of design is not great design"

Карл Фаст пишет о трёх ролях дизайна в современных компаниях: интеграция, трансформация и эволюция. Толковый взгляд на задачи дизайн-менеджера.

10. "Improving Onboarding with Employee Experience Journey Mapping — A Fresh Take on a Traditional UX Technique"

Ханна Маккелви и Яккуилен Л. Франк рассказывают, как они использовали customer journey map для встречи новых сотрудников в библиотеке. Эта задача сама по себе интересная и важная, так что статья полезна вдвойне.

11. "Artificial Intelligence and the Future of Web Design"

Фред О'Брайан описывает текущее состояние конструкторов сайтов, использующих алгоритмический дизайн. Он пообщался с создателями многих из них или процитировал их мнения на эту тему.

12. "Lazy Loading Images"

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

13. Новые книги по дизайну интерфейсов

Дело Гутенберга живёт, новые книги по дизайну интерфейсов появляются регулярно. Вот пара-тройка свежих:

  • Скотт Кьюби "Writing for Designers" о текстах в интерфейсах.
  • Кэт Холмс "Mismatch" об инклюзивном дизайне.
  • Адам Силвер "Form Design Patterns" о приёмах дизайна форм.
  • Тим Браун "Flexible Typesetting" от главного типографа Adobe.
  • Ну и выдержка из прошлогодней книги Матей Латин "Rhythm in Web Typography".

14. "Individualized Recommendations — Users’ Expectations & Assumptions"

Аврора Харли говорит о значительном улучшении рекомендательных систем за последние годы. Она даёт советы по их реализации.

15. "User Interviews — How, When, and Why to Conduct Them"

Памятка по проведению интервью с пользователями от Кары Пернис из Nielsen, Norman Group. Достаточно подробно для обзора.

16. Micro nudge — A micro animation for behavioral change

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

17. "Designing design systems"

Толковая статья Жерлин Яренпун-Филипс из Clearleft о внедрении дизайн-систем на практике. Полезные нюансы процесса общения с продуктовой командой или клиентом.

18. "Four Jobs Teachers Are Trying to Get Done"

Отличный пример описания Jobs to Be Done на основе типичных жизненных ситуаций учителя.

19. Pocket Design

Блог дизайн-команды Pocket. В первой статье Тони Мёрфи рассказывает о целях редизайна продукта и принципах дизайна, которые закладывали в него.

20. "7 Tips for Building a UX Research Team"

Меган Вензель делится опытом выстраивания процесса UX-исследований в компании с нуля.

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

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

Написать
{ "author_name": "Yury Vetrov", "author_type": "self", "tags": [], "comments": 1, "likes": 20, "favorites": 71, "is_advertisement": false, "subsite_label": "design", "id": 50304, "is_wide": false, "is_ugc": true, "date": "Tue, 06 Nov 2018 21:06:55 +0300" }
{ "id": 50304, "author_id": 8729, "diff_limit": 1000, "urls": {"diff":"\/comments\/50304\/get","add":"\/comments\/50304\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/50304"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

1 комментарий 1 комм.

Популярные

По порядку

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" }