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

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

В 2016 году издательство Morgan & Claypool Publishers выпустило книгу Джейсона Джеральда (Jason Jerald) «The VR Book: Human-Centered Design for Virtual Reality». Издание UXmatters опубликовало 28 главу из неё со списком паттернов для интерфейсов виртуальной реальности.

Подробная инструкция Кёртиса Далмейджа (Curtis Dulmage) из Shopify по созданию интерфейсных звуков, включая работу с инструментами, запись и пост-обработку. Вторая и третья части.

Это одна из самых известных студий, специализирующихся на разработке мобильных приложений. История компании началась с запуском App Store в 2008 году.

«Роботы» активно работают с сотовыми операторами («Билайн», «МегаФон», Tele2), банками и финансовыми организациями («Открытие», «Промсвязьбанк», МДМ, «Альфа-Страхование», «Ренессанс»), продуктовыми компаниями (Rambler & Co, ABBYY) и другими крупнейшими отечественными клиентами.

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

• Design Systems Handbook: InVision выпустили методичку по созданию дизайн-систем от Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter и Roy Stanfield.
• Дизайн-система «МегаФона»: В первой части больше про UI Kit, но есть задел на описание компонентов в коде. Скоро они откроются по адресу ui.megafon.ru.
• Райан Маккормак (Ryan McCormak) из General Electric рассказывает о подходе компании к развитию дизайн-системы.
• Design Systems: Figma готовится запустить ресурс про дизайн-системы. Планируют серию мероприятий и статьи по теме.
• Атомарный дизайн: Полный перевод книги Брэда Фроста (Brad Frost) «Atomic Design» от Ольги Кокулиной.
• ReactSymbols.com: Новая мода на Dribbble — продавать не только масштабный UI Kit для Sketch, но и React-библиотеку для него.

Лилиан Варнер (Lillian Warner) предлагает шаблон для набросков карты переходов при проектировании интерфейсов смешанной реальности. В статье есть пример его использования.

Джейсон Месат (Jason Mesut) 12 лет пытался наглядно представить навыки продуктового дизайнера. В своей статье он показывает все промежуточные варианты диаграммы и даёт шаблон итоговой версии.

Корри Кван, Эрик Морроу и Джон Мюррей (Corrie Kwan, Eric Morrow и John Murray) сделали подробный обзор того, как использовать версию дизайн-мышления от IBM в связке со story mapping в Agile. В двух частях. Получилась интересная модель продуктовой работы с учётом интересов пользователей.

• Haiku: Экспериментальный инструмент обещает легко экспортировать наработки в реальный код.
• Spirit: Расширение для Chrome, с помощью которого можно редактировать анимацию на странице.
• FlowMapp: Инструмент позволяет создавать карты сайта в браузере. Это всегда было головной болью, ведь обычно приходится делать их в слабо приспособленном для этого графическом редакторе или не очень наглядном составителе ментальных карт.
• Sketch: Интересные плагины. SketchViewer обновился и теперь позволяет просматривать макет во всех деталях в вебе, появился улучшенный менеджер стилей и символов, возможность объединения символов с одинаковым названием, менеджер горячих клавиш, быстрое переключение типовых состояний элементов управления, удаление неиспользуемых стилей, подсветка синтаксиса кода для 170 языков, создание сложной графики с помощью Javascript. 27-28 октября в Берлине прошёл прошёл хакатон по созданию плагинов для Sketch.
• Adobe XD: В ноябрьском обновлении инструмента появились спецификации экранов а-ля Zeplin, колоночная сетка и оптимизация работы для Windows 10. Опубликована сессия вопросов и ответов с командой продукта на Designer News.
• Framer получила $8 млн инвестиций на развитие инструментов. Будут расширять команду, развивать инструмент и усиливать работу с сообществом. Стив Руиз (Steve Ruiz) реализовал аналог Zeplin для Framer.
• InVision получила $100 млн инвестиций. Теперь они станут ещё более вездесущими.
• Figma запускает страницы, на которых можно собрать разные арт-борды и компоненты.
• UXPin анонсировала на конференции Clarity по дизайн-системам дополнение к инструменту, которое позволит импортировать технологические компоненты с GitHub в макеты Sketch. Идея React → Sketch от Airbnb станет доступна всем. Они также запускают категоризированный каталог дизайн-систем Adele.
• Pixelmator Pro: Вышла финальная версия инструмента. Предварительный обзор.
• What the Font: Новое мобильное приложение от MyFonts позволяет определить шрифт по фото.
• Landbot.io: Онлайн-конструктор промосайтов, построенных вокруг общения с ботом.
• Как дизайнеры Google используют браузерные плагины для экспериментов с сайтами ― с их помощью меняется стандартный интерфейс у пользователя.
• MailChimp Landing Pages: Конструктор промосайтов на базе своего редактора писем. Он, правда, один из самых неудобных на рынке, но для тех, кто уже в экосистеме, это может быть привычнее.

Ким Флахерти (Kim Flaherty) рассказывает о сравнительном исследовании двух видов компоновок списка с изображениями: перечисление с иллюстрациями на одной стороне экрана и с чередованием картинок по сторонам (то слева, то справа). Серьёзного влияния на восприятие информации нет, хотя есть нюансы.

UsabilityLab составили очередной рейтинг российских интернет-банков по их интерфейсам. В презентации разбираются удачные паттерны.

Роберт Додис и Иветт Мосийчук (Robert Dodis и Yvette Mosiichuk) достаточно подробно описывают особенности адаптации мобильных интерфейсов для языков, которые читаются справа налево.

Дизайн-менеджер Spotify Стэнли Вуд (Stanley Wood) посетил 20 ведущих продуктовых компаний США и пообщался с их дизайн-командами. Он сделал огромное количество заметок на тему их организации, процессов и инструментов, часть из которых описал в статье.

• Сооснователь британской дизайн-студии Clearleft Энди Бадд (Andy Budd) рассказывает о том, как устроена работа дизайн-команды в компании и как она всё чаще выступает как внешняя группа дизайн-менеджеров для развития компетенций у клиента.
• Интервью с одним из вице-президентов по дизайну Intuit Куртом Волеки (Kurt Walecki) о том, как устроена работа над интерфейсами в компании.
• Кэт Смолл и Джессика Харли (Catt Small и Jessica Harllee) рассказывают о том, как работают дизайн-команды в Etsy.
• Джонни Бёрч (Jonny Burch) рассказывает о принципах дизайн-команды сервиса доставки еды Deliveroo.

Соня Хернандез (Sonja Hernandez) продолжает рассказ о ребрендинге продуктов Adobe и поднимает историю развития иконок приложений. В свежем обновлении Creative Cloud они сделали ещё один шаг по упрощению работы с ними и систематизации всей линейки. Полезно для тех, кто заведует большой линейкой продуктов.

Джефф Суаро (Jeff Sauro) поднимает исследования на тему влияния «эффекта наблюдателя» на респондента в ходе юзабилити-тестирования. Результат неоднозначный, железобетонных доказательств нет.

Джули Чо (Julie Zhuo) описывает здравый подход продуктового дизайнера на всех этапах жизненного цикла продуктов.

Обновлённая версия трёхчасового мастер-класса Люка Вроблевски (Luke Wroblewski) по дизайну мобильных интерфейсов.

Конференция по дизайн-менеджменту и UX-стратегии от Rosenfeld Media прошла в Нью-Йорке 6-8 ноября. Натали Хэнсон (Natalie Hanson) конспектировала все выступления. Участники конференции также запустили блог на Medium.

Конференция по дизайн-менеджменту цифровых продуктов Leading Design прошла 25-27 октября в Лондоне. Опубликованы презентации и видео выступлений. Мой коллега Андрей Сундиев сделал обзор наиболее интересных.

Руководитель UX-лаборатории Mail.Ru Group Ксения Стернина рассказала журналу Prototypr о том, как бренд влияет на восприятие продукта на примере поисковых систем. На три абсолютно одинаковых страницы с поисковой выдачей поставили логотипы «Яндекса», Google и mail.ru, а пользователи оценили качество одинаковых результатов по-разному.

Читайте полную версию дайджеста в блоге. В нём, как обычно, много новых материалов по дизайну для Apple Watch, Android Wear, Material Design, расширений для Sketch, свежих скриптов и многого другого. За свежими ссылками также можно следить в группе на Facebook и канале в Telegram. Спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.

#дизайн