Дизайн Yury Vetrov
3 411

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

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

В закладки

1. «Основные принципы использования анимации в UX»

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

2. «Шаблоны iPhone XS, XS Max и XR»

Apple анонсировали новые телефоны iPhone XS, XS Max и XR. В мини-обзоре собраны шаблоны для подачи макетов, разрешение и плотность экрана, актуальный UI Kit для Sketch, Adobe XD, Photoshop и Keynote.

3. “Enterprise Design Sprints

Электронная книга по дизайн-спринтам от InVision. Автор — Richard Banfield, который уже выпускал книгу на тему. Читайте также о том, как Jake Knapp провёл метадизайн-спринт для The New York Times. В рамках ежегодного хакатона компании 13 команд одновременно решали свои задачи с помощью методологии.

4. “Releasing Design Systems

Серия статей Nathan Curtis о процессе обновления дизайн-систем. Как строить релизный цикл и версионирование на разных уровнях (библиотека компонентов, сами компоненты, дизайнерские шаблоны и токены), выкатывать новые версии и с чего вообще начинать.

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

  • Sketch 52: вышла бета. Обещают улучшение интерфейса и тёмную тему оформления. Самое главное — упрощение работы с изменяемыми свойствами в символах, так что то же переопределение цвета будет менее костыльным. Джон Мур в диком восторге описал новый подход подробнее. А ещё — намёк на упрощение вставки реальных данных в макеты. Плагины: 6Spiral позволяет рисовать спирали, Visual Inspector Scribble обеспечивает совместную работу дизайнеров и интерфейсных писателей. Статьи: Трэвис Фолк из Walmart рассказывает о Sketch-библиотеке дизайн-команды.
  • FramerX: продукт вышел из беты. Зак Джонстон из Dropbox собрал несколько примеров того, что можно сделать с реальными данными в новом FramerX. А Моду Ло перечислил самые сырые места текущей версии.
  • Adobe XD: сентябрьское обновление. Изменение размеров макетов с адаптивностью, проверка правописания, улучшение прототипов и анимации. Читайте подробный разбор от Prototypr и инструкцию по работе с внешним контентом.
  • Axure RP 9: бета-версию уже можно попробовать. Возможен импорт макетов из Sketch.
  • Mokup: ещё один инструмент прототипирования и анимации. Выглядит средне, импортирует только PSD и SVG, но можно добавить.
  • Principle 4.0: много улучшений по редактору и возможностям анимации.
  • Affinity Publisher: компания запускает конкурента InDesign — постепенно откусывает всё больше от продуктовой линейки Adobe. Бета-версия уже доступна и пока что бесплатна. Видео-демонстрация — по ссылке.
  • React Proto: экспериментальный инструмент помогает переводить макеты Sketch в компоненты на React. Он облегчает разбивку экрана на отдельные паттерны, каждый из которых может иметь вложенность и логику поведения.
  • Preely: инструмент помогает собирать и тестировать интерактивные прототипы интерфейсов. Импорт из Sketch и достаточно обширная аналитика по выполнению сценариев.
  • Logo Lab: инструмент помогает оптимизировать логотип для разных представлений в цифровых продуктах и печати.
  • Marvel: поддерживает импорт прототипов, сделанных внутренней функциональностью Sketch.
  • Alva: продукт тоже вышел из беты. Как и FramerX, он заточен под дизайн-систему в правильном понимании ― дизайнер использует визуальное представление React-компонентов, а не банальный UI Kit.
  • Avocode: добавили поддержку Adobe Illustrator (на подходе Figma и InVision Studio) и открыли свой SDK. Они накопили неплохой опыт работы с макетами разных инструментов и сделали универсальный формат, который содержит данные из всех возможных инструментов.
  • Cleanmock: ещё один сервис для эффектной презентации экранов интерфейса в устройствах.
  • Trailer: приложение для Mac помогает делать видео работы с интерфейсом для продуктовых промороликов. Видео работы — по ссылке.
  • Chipmunk: сервис обещает помочь командам хранить рабочие макеты и другие дизайн-ресурсы.
  • Abstract: серьёзно обновился сайт инструмента.

6. “Unboxing Chrome

Ханна Ли рассказывает о редизайне браузера Chrome к десятилетию выхода на рынок. Больше про нюансы работы с визуальным дизайном верхней панели и особенно адресной строки, но достаточно дотошно, чтобы понять масштаб сложности продукта, о котором некоторые ухмыляются, мол, «да что тут делать-то». Читайте также интервью с Алексом Эйнсли о редизайне Google Chrome.

7. “Everyday Ethics of AI

Адам Катлер, Adam Cutler, Милена Прибик и Лоуренс Хамфри из IBM подготовили свод этических правил для создателей интерфейсов и продуктов в целом с искусственным интеллектом. Анонс от авторов.

8. “The Paradox of Intelligent Assistants: Poor Usability, High Adoption

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

9. FakeClients — Generate Fake Design Client Briefs

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

10. “How to recruit for user research

O’Reilly выпустило книгу Дэвида Фаркаса и Брэда Нанналли “UX Research” в конце 2016 года. Издание публикует седьмую главу из неё, посвящённую поиску респондентов для пользовательских исследований.

11. “Let’s do this! How to write better calls to action

Простые и наглядные советы Рэйчела Макконнелла из Deliveroo по написанию хороших названий для кнопок в интерфейсе.

12. ColorBox

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

13. “4 Classes of Survey Questions

Памятка Джеффа Сауро по основным типам вопросов для пользовательских опросников.

14. “DesignOps

Колонка UXmatters о DesignOps, в которой Дженнифер Фабрици (Travelers), Лео Фришберг (Home Depot Quote Center), Пабини Габриэль-Пти (UXmatters) и Тобиас Камке Tobias Komischke (Honeywell) приводят своё видение термина.

15. “Motion design doesn’t have to be hard

Джонас Наймарк из Google показывает базовые подходы к интерфейсной анимации. Ёмко и по делу.

16. “The Role of Observation in User Research

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

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

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

Написать
{ "author_name": "Yury Vetrov", "author_type": "self", "tags": [], "comments": 4, "likes": 16, "favorites": 83, "is_advertisement": false, "subsite_label": "design", "id": 47094, "is_wide": false, "is_ugc": true, "date": "Thu, 04 Oct 2018 15:48:02 +0300" }
{ "id": 47094, "author_id": 8729, "diff_limit": 1000, "urls": {"diff":"\/comments\/47094\/get","add":"\/comments\/47094\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/47094"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

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

Популярные

По порядку

2

Re: mobile Chrome: Несмотря на все усилия, мобильный Хром выглядит просто караул как уродски (iphone x). Закругления слишком большие, синяя обводка вокруг открытых вкладок фублядь какая противная, элементы интерфейса в нижней панели жирные и огромные. Особенно смешно на фоне открытых страниц (да тот же самый гугл) где все аккуратненько и удобненько и БДЫЩЬ ебанистические стрелки вперед-назад, адов поиск и фубля иконка открытых вкладок.

И таки да, сравнение прямоугольника с закругленными краями с брендом гугл хрома - натягивание совы на глобус. Нельзя было использовать прямоугольник (новый материал дизайн + челка на гугл пикселях), нельзя просто скруглить углы (сафари), пришлось елозить задницей и придумывать какую-то чушь.

Сафари, кстати, выглядит на пятерочку.

Ответить
1

Вот-вот, последний апдейт хрома доканал настолько, что перешел на сафари и О ЧУДО, сафари не тормозит и не жрет батарею так как хром ни на мобиле, ни на маке.

Ответить
1

Я давно на маке перешел на сафари, все летает как ракета.

Ответить
1

Спасибо за подборку.

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

нарадоваться не могу. Как говорится: я джва года ждал.

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