Продуктовый дизайн: 20 самых важных материалов за февраль13.03.2017 15:37

Уже семь лет руководитель портальной дизайн-команды Mail.Ru Group Юрий Ветров публикует в своём блоге регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов.

Из лент нескольких сотен тематических подписок он отбирает примерно 5% стоящих публикаций, которыми интересно поделиться среди экспертов. Специально для vc.ru Юрий Ветров собрал выжимку из 20 самых интересных ссылок февраля.

В избранное

UCDtoolbox — Find and learn methods for UCD

Студенческий проект UCD Toolbox собирает методы проектирования интерфейсов в единую базу с инструментами подбора. Он полностью переработан и позволяет подбирать методы проектирования и исследований под конкретную ситуацию.

Motion design handovers made easy

Пол ван Ойен предложил подход к спецификации интерфейсной анимации для передачи разработчикам. Он разложил основные трансформации с объектами и динамику их изменений. Частично эта задача может решаться плагинами для AfterEffects, которые экспортируют параметры анимации в JSON, но описанный в статье формат отлично подойдёт для дизайн-систем.

2017 Design Trends Guide

Кажется, самый полный обзор трендов от Лареданы Папп-Динеи, Михая Бальдана и Мило Тэмса на Behance. Хотя во многом это всё те же набившие оскомину «большие шрифты», «фоновые видео» и «анимация», здесь собрано, пожалуй, всё, что было востребовано в последние годы. В противовес постоянно повторяющимся трендам Кристиан Бек сделал пародию на них.

Form Design for Complex Applications

Обзор паттернов отображения форм в сложных веб-приложениях от Эндрю Койла. Перевод.

Cassette

Приложение Cassette упростило проведение пользовательских интервью. Помимо аудиозаписи, оно предлагает черновую транскрипцию и категоризацию инсайтов. Другие полезные инструменты для дизайна:

• Sketch выпустили Lunacy — просмотрщик макетов Sketch для Windows. Плагин Auto Layout развивает функцию «stack groups» и в последнем обновлении использует механику «flexbox» для адаптивных групп элементов. Алан Рой записал подробное пошаговое видео, показывающее, как построить такую адаптивную сетку.
• Craft разработали Freehand — платформу, которая даёт возможность обсуждать макеты с менеджерами и разработчиками. Кусочек основного InVision теперь есть и в Craft. У самого InVision вышла вторая версия сопроводительного мобильного приложения.
• Figma развивает компоненты — их стало легче синхронизировать между командой.
• AfterEffects: Airbnb создал библиотеку Lottie на базе BodyMovin, которая позволяет экспортировать анимацию из AfterEffects в JSON, а после этого импортировать её в приложения на нативном Android и iOS, либо на базе ReactNative.
• Marvel разработали плагин для Sketch, который позволяет смотреть изменения в прототипе, не выходя из инструмента.
• Zeplin: начал показывать историю версий экрана.
• Framer: научился выдавать параметры анимации для Android и iOS.
• UID8 — новое приложение для создания скетчей интерфейсов на планшете.

Control Panel

Отличная коллекция старых приборных панелей на Flickr. 2300 фотографий редких устройств, приборов и социотехнических систем.

Design Principles Behind Great Products

Антон Бадашов из Rambler&Co проанализировал принципы дизайна известных веб-сервисов.

Patterns ≠ Components

Натан Кёртис описал разницу между паттернами и компонентами. В статье также представлен хороший список книг и статей, повлиявших на развитие идеологии модульного дизайна. В другом материале он писал об особенностях создания и описания версий интерфейса на тёмном фоне. Команда EightShapes также опубликовала простой веб-сервис для проверки сочетаний цветов на доступность — вбиваешь переменные своей дизайн-системы, видишь, что в них нужно подправить. Другие новости дизайн-систем:

• Доминик Нгуен написал о том, как строить живые гайдлайны. Он привёл готовые фреймворки, позволяющие поднять просмотрщик компонентов на React и других платформах.
• Колм Туит хорошо описал первый шаг работы над дизайн-системой — определение ключевых переменных. Он работает над своим CSS-фреймворком Bantam.

«Модели медиапотребления. Что люди читают, почему, когда и как» (PDF)

Команда медиапроектов и UX-лаборатория Mail.Ru Group провели исследование того, как люди читают медиа. Это качественная, а не количественная научная работа — эксперты просто отвечают на вопрос «как бывает», собирают разные варианты поведения и глубоко их изучают. Нет задачи понять, насколько типично это поведение, главное — всесторонне описать найденные кейсы. При этом количественные данные из сервиса аналитики «Медиатор» подтверждают выводы исследования.

Scott Belsky on the importance of your product’s first mile

Интервью со Скоттом Белски, создателем Behance и партнёром венчурного фонда Benchmark Capital. Первая половина общая, вторая раскрывает две его концепции развития продуктов — «первая миля», касающаяся onboarding, и этапность привлечения пользователей.

Speaking up for Experiences

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

Stakeholder mapping

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

The UX of Voice — The Invisible Interface

Джейсон Амунва из Digital Telepathy порассуждал на тему особенностей проектирования голосовых интерфейсов. На выставке CES 2017 был настоящий бум устройств, использующих Amazon Alexa, так что многие дизайнеры столкнутся с проектированием для голосовых ассистентов в этом году.

Getting Started With VR Interface Design

Сэм Эпплби и Алекс Деруэтт из Kickpush показали, как прототипировать интерфейсы виртуальной реальности в Sketch.

Апурва Шах из Capital ONE описал пошаговое руководство о том, как создавать видео 360. Он упоминает забавную идею: запись этнографических исследований на такую камеру, чтобы лучше понять обстановку на рабочем месте или дома у пользователя.

How to get experience without experience — A new designer’s paradox

Ричард Янг дал советы начинающим дизайнерам на тему того, как получить опыт и портфолио без реальных задач. Он советует сделать «непрошенный» редизайн и подробно описывает, как выбрать подходящий проект и подать его.

Stanford d. school

Блог стенфордской d.school на Medium. В одной из недавних статей директор по обучению Карисса Картер рассказала о том, как в студентах воспитывают гибкость по отношению к процессу. В статье отличная аналогия с рецептами. Другие блоги дизайн-команд и компаний:

How IBM Is Embracing the Future Through Design

Хороший рассказ о том, как IBM переосмыслил дизайн в компании.

Классификация методов пользовательских исследований

Сьюзан Фаррелл из NielsenNorman Group предложила классификацию методов пользовательских исследований в привязке к ключевым этапам проекта.

«Всему голова — нейрофизиологические исследования в разработке игр»

Ксения Стернина с коллегами из ВШЭ последние полгода занималась проектом с использованием нейрофизиологических показателей человека.

Do responsive sites have to be so tall on mobile

Кевин Виньо из Viget написал о том, как важно помнить о высоте адаптивных сайтов. Часто простое расположение блоков друг под другом приводит к огромному количеству прокруток.

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

©  vc.ru