Май '21

Сайт дизайн-команды Азбуки Вкуса.

Сайт дизайн-команды сервиса FanDuel. Статьи, дизайн-система.

Сайт дизайн-команды Miro.

Неплохие размышления Adrian H. Raudaschl о пользе и вреде копирования в дизайне и искусстве.

Группа энтузиастов запустила глоссарий терминов в дизайне интерфейсов.

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

3 млрд

активные устройства на Android в мире

Тренды в логотипах от LogoLounge.

Дизайнеры Wikipedia рассказывают о проектировании виджетов для главного экрана iOS.

Rachel Krause из Nielsen/Norman Group разбирает типичные проблемы при проведении сессий дизайн-критики. Нереалистичные сценарии использования, плохая обратная связь и вопросы не в тему.

Презентация David Hoang из Webflow о том, что делать дизайн-менеджеру в быстрорастущей компании. Как поддерживать дизайн и дизайн-команду цельными.

Pavitra Logeswaran рассказывает о необычном формате сессий дизайн-критики в Shopify. Это виртуальные дебаты, в которых две группы обсуждают интерфейс в диалоге.

Clara Greo, Kara Kane и Keeley Robertson рассказывают о задачах координаторов дизайн-сообщества Gov.uk. Это огромное количество команд (4000 человек), для которых они проводят масштабное обучение и процессную поддержку.

Jason Cyr описывает роль дизайн-продюсера в Cisco. Это дизайн-менеджер с зонами ответственности, которые хорошо работают для централизованных команд.

Redmadrobot собрали сводный материал по развитию дизайнеров в компании. Карта компетенций, менторство, способы прокачки навыков.

Обзор основных способов измерить и оптимизировать производительность сайта. Это сильно влияет на восприятие продукта пользователями.

Carie Fisher показывает, как организовать поддержку accessibility для изображений в формате SVG.

Появились в одной из веток Chrome. Они позволяют задавать адаптивность на уровне отдельного компонента, а не всей страницы — это здорово облегчает работу над дизайн-системой. Ahmad Shadeed, Stephanie Eckles, Adrian Bece и Max Böck сделали обзоры самой концепции и текущего состояния.

Oscar Salandin рассказывает, как команда Microsoft Hololens тестирует интерфейс.

Yao Ding рассказывает, как проводятся UX-исследования интерфейсных решений, которые ориентированы на пользователей с ограниченными возможностями.

Jeff Sauro и Jim Lewis описывают четыре типа вопросов, которые могут включаться в опросники: атрибуты, поведение, возможности, оценки.

Шикарнейшая шпаргалка по составлению опросников от Jeff Sauro и Jim Lewis. Это дерево решений, в котором можно подобрать правильный вопрос исходя из задачи.

Большая и бесплатная коллекция пиктограмм в SVG. Сейчас их почти 1000 штук и это явно не предел.

Бонус: Ещё одна коллекция.

Генератор аватаров-заглушек на основе градиентов.

Обзор инструмента для новичков от Мирослава Бекярова.

Объединили подписки на сам инструмент и командную работу в единую, за $99 в год и $9 в месяц.

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

Экспериментальный сервис, который примитивизирует фото в ASCII-графику, печать на матричном принтере и другие старые и низкокачественные техники.

• Yang Qing: Подробная пошаговая инструкция по созданию плагинов.

• Matt Deco: Как синхронизировать стили в компонентах в коде и Figma.

Команда отдала все силы конференции Config в апреле, так что крупных обновлений не было. Разве что поддержали процессоры Apple M1.

Sara Hill из Shopify рассказывает о рабочей сессии по созданию customer journey map и поиску продуктовых идей на её основе.

Sarah Gibbons из Nielsen/Norman Group описывает работу с болями пользователя на трёх уровнях customer journey: конкретное взаимодействие, весь путь и отношения с компанией в целом.

Matt Wallaert из Frog предлагает свою модель поведенческой науки. Она состоит из 4 частей: стратегия, инсайты, проектирование и измерения.

Tolu Adegbite из Shopify даёт советы по оптимизации интерфейса для пользователей с ограниченными когнитивными возможностями.

Методичка Sheri Byrne-Haber для дизайнеров интерфейсов по поддерже пользователей с ограниченными возможностями. PDF.

Каталог приёмов самостоятельных обязательств, которые помогают сформировать привычки. Это полезно при проектировании интерфейсов, где важна вовлечённость пользователя. Сопроводительная статья.

Emanuela Cozzi и Lennart Overkamp предлагают альтернативу персонажам — «динамические личности». Они не пытаются схлопнуть множество респондентов в один профиль, а показывают спектр поведения в разных контекстах.

Фреймворк для создания дизайн-системы на React.

Вышел из беты. Обзор изменений.

Дизайн-система города Хельсинки.

Дизайн-система сервиса B2B Center. Всё на месте — компоненты в коде, токены, редактура.

На ежегодной конференции Google I/O анонсировали Android 12. Это сильное визуальное обновление.

Меняется многое:

Элементы интерфейса стали крупнее, а скругления — больше. Это видно по обновлённой панели быстрых настроек:

Изначальная идея Material Design слоёных панелей, которые отделяются тенями — всё. Теперь зонирование делается с помощью новой цветовой палитры (основной цвет и его высветленные градации).

Интерфейс использует новый вариативный шрифт Google Sans Text в дополнение к семейству.

Анимация стала ещё плавнее и стройнее. Она также отражается на размерах элементов — они растягиваются и сжимаются при перестройке экрана.

Элементы могут иметь необычные геометрические формы (например, виджет или область нажатия). Но тут пока деталей мало.

Подкрутили стиль всплывающих окон.

Переработали виджеты.

Функционально изменений немного — они будут появляться позже, к осеннему запуску. Но уже сейчас появился индикатор работы камеры. А телефон можно будет использовать как пульт для Android TV и машины.

Бета-версия уже доступна. Документация для разработчиков и её обзор.

А вот несколько дизайнерских презентаций:

Обзор нового:

Адаптация интерфейса под большие экраны (в дополнение: текстовый обзор и памятка c шаблоном в Figma).

Интерфейсные тексты:

Поддержка accessibility:

Сборка дизайна через Jetpack Compose (также запустили каталог компонентов):

И обновления для разработчиков.

Кстати, Google и Samsung объединили усилия в разработке WearOS. Собственная ОС Tizen от Samsung уйдёт в закат.

Со всеми изменениями это полный разрыв с изначальной идеологией Material Design, так что это название уже не имеет смысла. Но получилось свежо и бодро, даже если чистую оболочку использует не самое большое количество устройств — остальные увидят оформление своего производителя. А в мире уже 3 млрд активных устройств на Android.

Памятка Storybook по визуальному тестированию компонентов дизайн-системы. Как настроить процесс и почему они рекомендуют оставлять его наполовину ручным. Краткая выжимка.

Разбор интерфейса того самого OnlyFans.

Коллекция примеров неплохих промо-сайтов.

Edward Scott из Baymard Institute рассказывает об исследовании сервисов с подпиской. Как люди относятся к ним и насколько готовы платить.

Kathryn Totz из Baymard советует выбирать правильную сортировку товаров в интернет-магазине, когда пользователь попадает в категорию. Иначе может создаться ощущение, что в ней мало полезного.

Andy Sellick из Gov.uk описывает сложности, которые возникают при реализации, казалось бы, простого интерфейсного решения — возможности показать пароль в поле ввода.

Jasmine Bilham рассказывает, как приложение Headspace для медитации пересмотрело процесс встречи нового пользователя и повысило вовлечённость и возвращаемость.

Daniel Kerris из Atlassian описывает четыре способа добавить вдохновляющие моменты в интерфейс (предугадать, повысить эффективность, понять намерение, эмоционально отреагировать), а также приводит примеры для каждого из них.

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

Ещё одна коллекция тёмных паттернов с возможностью предложить пример автору сайта.

Runi Goswami из Lyft рассказывает о лучшем сегментированном переключателе, который они нашли. В статье есть простая и наглядная памятка по выбору элементов интерфейса для выбора.

Виталий Фридман анализирует большие выпадающие меню в навигации и их проблемы. Он показывает, как сделать их хорошо, а ещё — на что можно заменить их, потому что проблем с ними масса и они не всегда нужны.

Виталий Фридман описывает типичные проблемы в проектировании и разработке поля выбора даты рождения. И предлагает оптимальный вариант.

Методичка Райффайзенбанка про работу с текстом в интерфейсе. Она построена по наглядному принципу «правильно/неправильно» и покрывает три важные темы: смысл, тон общения и логику в интерфейсе. Пока это файл в Figma, но позже станет разделом в дизайн-системе.