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

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

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

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

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

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

• 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: серьёзно обновился сайт инструмента.

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

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

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

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

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

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

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

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

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

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

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

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