Март '18

Конференция Enterprise UX 2017 прошла 7-9 июня в Сан-Франциско. Она посвящена работе над продуктами и управлению дизайн-командами в крупных компаниях. Pabini Gabriel-Petit сделала обзор первого дня с мастер-классами Peter Merholz, Kristin Skinner, Laura Klein и Kate Rutter.

Блог дизайн-команды Slack.

Accenture купили осенью дизайн-студию Matter, которая занимается пром.дизайном гаджетов.

Verizon купили дизайн-студию Moment.

Genpact купили осенью UX-агентство Tandem Seven. Они делали интересные вещи в плане UX-стратегии.

Отличная пародия на типичную повестку дня в дизайнерском сообществе от Jon Moore.

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

Последние 4 года Javier Cuello путешествует по миру и работает удалённо — всё больше дизайнеров практикуют такой подход. Он описывает плюсы, минусы и подводные камни.

Ещё один алгоритмический генератор логотипов.

Fast Co Design пообщался с командой MS Office, которая сумела подать возможности алгоритмического дизайна в PowerPoint в человечном виде. Они изучали работу персональных ассистентов руководителей и опирались на постепенное выстраивание доверия.

Michael Flarup решил потроллить дизайн-сообщество и сделать современное прочтение скеоморфного дизайна календаря для iPhone X. Правда, возможно он говорил об этом серьёзно... Тем более, что возвращение бесполезного декора может закончиться именно этим.

Новый отчёт John Maeda о состоянии дизайна в цифровых продуктах. В нём всё ещё хватает интересных наблюдений за тем, как меняются компании и рынок в целом, но с прошлого года фокус смещается на продвижение его собственных концепций (включая спорную «computational design»). Это всё ещё отражает направление движения рынка, но прорывных открытий, как было в первых двух выпусках, всё меньше.

Концепция обновлённого приложения Apple Health от студии Chapps.

Команда сервиса JotForm рассказывает о способах проверки гипотез по ходу работы над новой версией продукта. Хорошая провязка методов к этапам. Другие кейсы:

Простой, но достаточно толковый кейс редизайна веб-приложения Siesta от Signe Roswall.

Ещё одна маркерная доска в интернете для совместной работы.

Sara Zailskas Walsh из Capital ONE даёт советы по проведению полезных рабочих встреч. Она выработала набор форматов, которые легко комбинируются и используются по ситуации.

Советы Gabriella Campagna из IBM даёт советы простым дизайнерам на тему того, как доносить свои идеи до высшего руководства.

Руководители дизайн-команд в Uber, IBM, Microsoft и нескольких других компаниях рассказывают о точках фокуса своих команд на 2018 год.

Arin Bhowmick из IBM пообщался с коллегами Tom Waterton и Pérez-Hemminger на тему масштабирования дизайна в компании.

Глава дизайна Airbnb Alex Schleifer рассказывает о том, как работает дизайн-команда и как компания повышает доверие пользователей. А ещё у них самая большая дизайн-команда в мире — они плотно работают с владельцами жилья, так что те вносят огромный вклад в общий UX.

считают дизайнерами

4,5 млн

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

Dave Malouf описывает три уровня ответственности дизайн-менеджера ― tradecraft (профессиональные навыки), stagecraft (режиссура процесса) и statecraft (участие в развитии компании в целом). Одному человеку крайне сложно совмещать их, поэтому он разбирает типичные проблемы в попытках всё-таки сделать это.

Dave Malouf из Digital Ocean описывает три подхода к организации DesignOps, в зависимости от структуры компании и её текущих задач.

InVision давно публикуют интервью с руководителями дизайн-команд о том, как они устроены. Они сделали следующий шаг и запустили проект, пытающийся сравнить и просуммировать опыт дизайн-менеджмента. На старте есть материалов о Netflix, Slack, Shopify, Pinterest и Capital One. Наверняка это связано с недавней инициативой Design Leadership Forum.

Kyle Gill показывает, как создать анимацию «аплодисментов» из Medium с помощью инструмента Haiku.

Визуализация музыки на JavaScript.

Библиотека позволяет превращать изображения в а-ля рисованные от руки.

Онлайн-инструмент позволяет получить набор координат для SVG-изображений.

Онлайн-инструмент для анимации SVG.

Каталог вариативных шрифтов.

Бодрый демо-сайт Microsoft, посвящённый возможностям вариативных шрифтов. В весеннем обновлении Windows появится переработанный менеджер шрифтов, который поддерживает их.

Как реализовать эффект текста как маски для изображения с помощью CSS.

Простая обучалка основам CSS с помощью 30-секундных кусочков информации.

Philip Walton описывает экспериментальный подход адаптивности для конкретных блоков интерфейса — это предполагаемое развитие media queries. Перевод.

Переработан инструмент для проведения исследований.

Kate Meyer и Kara Pernice из Nielsen/Norman Group описывают формат и особенности проведения удалённого модерируемого пользовательского тестирования.

Jeff Sauro разбирает, насколько важно сопровождать интерфейсные опросники несколькими вопросами, чтобы результаты были более достоверными. Как обычно, зависит от задачи ― где-то одного вопроса вполне достаточно. Да и у опросников на несколько вопросов есть свои проблемы.

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

Jeff Sauro проанализировал исследования тему «эффекта оценщика» — насколько отличаются интерфейсные проблемы, найденные разными экспертами в ходе эвристической оценки или просмотра записей сессий юзабилити-тестирования. Как всегда, отличные выводы на основе множества добротных экспериментов.

согласие между экспертами

27%

Alipta Ballav исследует ограничения метода эвристической оценки интерфейсов. Перевод.

Ruth Buchanan из Dropbox рассказывает об опыте компании по проведению сессий ко-дизайна с пользователями.

Peter McNally даёт советы по планированию и проведению пользовательских исследований среди людей с ограниченными возможностями.

Масштабная подборка ссылок о дизайне интерфейсов для виртуальной и дополненной реальности от Jae Salavarrieta ― инструменты, курсы, статьи, книги.

Неугомонный Meng To продолжает окучивать нишу за нишей и теперь он запустил большой каталог инструментов дизайна. Можно ещё раз заценить, как много хорошего делается для нас с вами.

Инструмент создания презентаций от создателей Paper. Недавно в нём появилась возможность вставлять макеты в устройства, есть уйма вариаций.

В версии 0.5 можно экспортировать макеты в код HTML и Swift, а также импортировать макеты из Sketch.

Немного истории создания InVision и их стратегии проникновения в компании клиентов.

Muzli собрали примеры интересных интерактивных прототипов, сделанных на InVision Studio.

Сравнение подходов к адаптивности в макетах в инструменте и аналогах на рынке.

Инструмент вышел из беты.

Студия Icons8 выпустила инструмент для дизайнеров интерфейсов на Windows. Он умеет работать с макетами Sketch (инструмент и вырос из просто просмотрщика).

Мартовское обновление. Открытие макетов Photoshop и Sketch, доработки по символам и стилям.

Экраны можно собирать в интерактивные прототипы, что теперь абсолютный стандарт на рынке ― обраточка InVision за заход на территорию инструментов создания макетов, которая сильно подкосит необходимость в нём (Alexander Handley неплохо подметил это).

Это уже поддержали Zeplin и Sympli, но пока на самом базовом уровне.

После спокойного исправления багов между 2017 и 2018 все ждали, в какую сторону будет двигаться Sketch и это очень сильная заявка.

Также теперь можно хранить библиотеки в официальном облаке, добавлен полноценный шаблон для iOS, а поиск и замена цветов стала мощнее.

Добавлена анимация переходов для прототипов.

Улучшена история версий.

Появилась тёмная тема интерфейса.

Thomas Lowry подробно разбирает возможности компонентов.

Под конец прошлой недели Figma шумно анонсировала открытый API, который делает из неё платформу, а не просто инструмент. Получился ортогональный ответ на систему плагинов в Sketch и любом другом десктопном инструменте.

Если переход с Photoshop на Sketch давал огромнейший прирост к скорости и комфортности работы, то замена Sketch на другой современный инструмент уже не так однозначна для большой команды (если только вашей главной задачей не является быть на пике трендов любой ценой). Плюсы, конечно, есть ― например, у дизайнеров на Windows (которых, если что, на порядок больше) появился выбор. Но их не так много, чтобы бросить всё и снова потратить полгода-год на перестройку процессов, шаблонов и т.п.

Одна из главных задач, которую решают дизайн-команды продуктов ― как повысить качество дизайна «на живом» без постоянных войн с косяками реализации. Есть «серебряная пуля» ― дизайн-системы с компонентами на технологическом уровне. Но и тут костыль ― дизайнерские шаблоны и компоненты в коде живут в разных мирах, их нужно обновлять параллельно и руками. Airbnb и несколько других энтузиастов показали в прошлом году, как можно экспортировать компоненты в шаблоны Sketch, но это всё равно костыль, требующий настройки кучи скриптов и сервисов.

У Figma другая история ― она уже работает в вебе, родной среде компонентных дизайн-систем. И хотя «компоненты» в инструменте пока далеки от того, что понимается под этим в технологических фреймворках типа React, связка между ними через API выглядит гораздо проще. Команда Figma уже попробовала экспорт макетов в React, а вездесущие Airbnb когда-то успели прикрутить свою дизайн-систему. Есть и другие попытки связки живого продукта и Figma, GitHub научились выдавать иконки в продукт.

Пока это всё ранние эксперименты, которые ничего не гарантируют, и я скорее расписываю свои влажные фантазии на тему будущего, которое не обязательно случится. Тем более, что придётся решить ещё уйму проблем, в том числе с нормальными переменными ― сейчас их нет ни в одном инструменте; единые цвета, шрифты и отступы на совести дизайнера, экспортировать их тоже нельзя (хотя Design Systems Manager от InVision идёт в правильную сторону и выдаёт кое-какие переменные во всех возможных форматах). Но если вы слышали про концепцию подрывных (disruptive) инноваций, то с анонсом платформы Figma начинает выглядеть именно так.

Если ещё год назад я считал Figma модной, но необязательной мулькой (работать над макетом одновременно нужно не так что бы многим командам), то теперь верю, что ещё через год можно будет задуматься о переезде.

Инструмент позволяет создавать карты переходов для интерфейса. Можно записаться в очередь на бета-версию. Анонс и рассказ о том, как он работает.

Ещё один инструмент для совместной работы над диаграммами и другими способами описать логику интерфейса. Как создавалась его панель инструментов.

Обновление одной из самых больших коллекций шаблонов от Meng To ― 500 устройств.

Ещё одна коллекция шаблонов для презентации макетов интерфейсов и сувенирки.

Nathan Gitter показывает, как избавиться от типичных проблем реализации дизайна для iOS, которые приводят к пропаданию анимации или элементов интерфейса.

Обновлённые шаблоны iOS 11 для Origami, Sketch, Framer и Photoshop.

Google переименовали свою ОС для умных часов из Android Wear в Wear OS. Одна из основных причин — треть пользователей подключают их к iPhone.

Дизайн-система компании Pluralsight. Одно из самых толковых описаний принципов анимации ― шкала скорости с разбивкой по ситуациям применения.

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

Jeeyoung Jung изучает цветовые палитры в крупных дизайн-системах и предлагает своё решение для разных цветовых тем. Судя по всему, модели HSL/HSB постепенно становятся такой же обязательной вещью, как и микро-модуль.

Дизайн-система от создателей фреймворка Vue.js. Анонс и описание архитектуры.

Конспект презентации Allard van Helbergen из Atlassian о том, как устроена дизайн-система в компании.

Агентство Мэйк рассказывает о создании госсайта Администрации Кемеровской Области на базе дизайн-системы России.

Amy Thibodeau из Shopify рассказывает о работе команды дизайн-системы. Правда, описание достаточно абстрактное.

Серия статей Nathan Curtis о том, как описывать компоненты в дизайн-системах. Получается исчерпывающее руководство, которое работает и как инструкция для начинающих, так и неплохой чеклист для уже имеющих дизайн-системы.

Dani Nordin использует модель изменений John Kotter для этапов внедрения дизайн-системы. Детали процесса достаточно тривиальные, но способ организации мыслей хороший.

Осталось только отучиться называть дизайн-системой UI Kit в Sketch и рынок станет зрелым.

Dominic Nguyen описывает примерную архитектуру процесса тестирования и выкатки на продукты обновлений дизайн-системы.

Ken Skistimas из GE примеряет подходы классических брендов к унификации дизайна продуктов для современных дизайн-систем. Насколько они должны давать свободу дизайнерам?

Nathan Curtis описывает подходы к объединению разных дизайн-систем, которые могли развиваться в компании параллельно. Это часто случается, если в организации много продуктов разной степени зрелости, а их команды не связаны между собой.

Небольшой чеклист по работе с текстами в интерфейсах от Ryan Cordell.

Heydon Pickering описывает следующий инклюзивный компонент: уведомления.