Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-июнь 2020.
Паттерны и лучшие практики
Experience is in the details: analyzing the UX of streaming services
Joseph Mueller проанализировал интерфейс мобильного видео-плеера Netflix, Hulu и YouTube. Самые интересные решения у Hulu — они здорово понимают контекст использования.
5 Ways to Integrate Accessible Design into Fast-paced Projects
Caterina Falleni и Mike Shebanek дают серию советов по поддержке accessibility.
10 design principles for delightful CLIs
Michael Benton и Natalie Johnson из Atlassian рассказывают о запуске продукта Forge и дают советы по проектированию интерфейса командной строки.
Look Who’s Talking
Megan Marz размышляет на тему того, как развивались подходы к текстам в интерфейсах. От братюньско-панибратских до более прозрачных и понятных, но с характером.
User Onboarding: Is HEY Email Worth It?
Разбор процесса встречи нового пользователя в почтовом клиенте Hey от сайта Growth Design.
The Secure UX Curriculum
Caroline Sinders и Natalie Cadranel собрали чеклист по учёту безопасности и приватности пользователей в интерфейсе и методах работы. Сам чеклист.
Designing Mobile Tables
Советы Steven Hoober по адаптации таблиц для мобильных.
The Love-at-First-Sight Gaze Pattern on Search-Results Pages
Feifei Liu из Nielsen/Norman Group рассказывает о паттерне «любовь с первого взгляда» в результатах поиска — пользователь выбирает первый результат.
Privacy Policies and Terms of Use — 5 Common Mistakes
Therese Fessenden из Nielsen/Norman Group разбирает лучшие практики для представления сложных и трудночитаемых правил использования сервисов.
Inspired Design Decisions With Emmett McBain — Art Direction As Social Equity
Andy Clarke продолжает серию экспериментов с интересной журнальной вёрсткой в вебе. В одиннадцатом выпуске разбирает работы Emmett McBain.
Дизайн-системы и гайдлайны
Toolabs DSM Plugin for Figma
Плагин Toolabs для Figma позволяет управлять токенами дизайн-системы: цвета, шрифты, отступы, анимация, графика и многое другое. Можно переключать темы оформления, есть состояния компонентов. Анонс.
Тёмная тема оформления
A Complete Guide to Dark Mode on the Web
Годная памятка по разным аспектам реализации тёмной темы оформления в вебе от Adhuham. Больше про вёрстку, но достаточно развёрнуто.
Лучшая в мире переключалка (в правом верхнем углу).
Taming Chaos: Our Design System Governance at Scale
Henry Daggett из Societe Generale рассказывает о модели консулов для развития дизайн-системы. Это 4 человека из разных команд, которые регулярно ротируются. Процесс добавления нового компонента в таком формате: как любой участник сообщества в компании может сделать это.
Adobe Spectrum React Libraries
Adobe опубликовали фреймворк на React для своей дизайн-системы Spectrum.
Storybook Controls
В Storybook появилась возможность поиграть с компонентом прямо в живом гайдлайне.
How To Use Styled-Components In React
Базовая инструкция Adebiyi Adedotun Lukman по использованию стилизованных компонентов на React.
iOS 14
Понимание пользователя
Caterina Falleni — Accessible by Design
Книга Caterina Falleni «Accessible by Design» выйдет в начале 2021 года.
Информационная архитектура, концептуальное проектирование, контент-стратегия
How to Run a Journey-Mapping Workshop — A Step-by-Step Guide
Пошаговая методичка Kate Kaplan из Nielsen/Norman Group по проведению рабочих сессий для создания Customer Journey Map. Сбор вводных, текущее состояние продукта и видение будущего.
Service Blueprinting — A Digital Template for Remote Teams
Sarah Gibbons из Nielsen/Norman Group предлагает шаблон для Service Blueprint, который поможет оптимизировать работу компании во всех точках взаимодействия с клиентом. Сам шаблон.
Редач — первый подкаст для UX-писателей на русском
Отечественный подкаст для UX-писателей. Связанный Телеграм-канал.
Новые инструменты дизайна интерфейсов
Бета Sketch 68
Запускаются ассистенты, которые помогут сверять макет с требованиями дизайн-системы или оформления макетов. Их нужно устанавливать как плагины.
Adobe XD
Июльское обновление. Оптимизация интерфейса.
Теперь IBM будет активно предлагать клиентам Creative Cloud и Adobe XD в частности — возможно, его доля подрастёт.
Squircley
Простой инструмент для генерации аккуратных квадрокругов в SVG.
Figma Config Europe
17 сентября пройдёт вторая титульная конференция Figma по дизайну в онлайне.
Плагины
- Breakpoints: создает адаптивный дизайн (макет продолжает работать и без плагина). Статья-инструкция.
Шаблоны
- Templatery: презентации в Figma.
Статьи
- Kevin Kwok подробно анализирует причины успеха Figma. Инструмент быстро становится платформой и использует сетевые эффекты по полной.
3D Hands gestures
Иллюстрации рук в 3D. Есть шаблоны для всех популярных инструментов дизайна.
Zero Divs
Экспериментальный простой инструмент дизайна, выдающий CSS-код без вложенных <div>.
Plasmic — The visual UI builder for React
Визуальный редактор компонентов на React. Можно импортировать их готовый код и подкрутить или наоборот — превратить в код макеты из Sketch и Figma. Анонс от авторов.
Uicard — A Pocket Friendly Wireframing Ruler by Jan Haaland
Металлический шаблон для скетчей мобильных интерфейсов. Как его делали.
Пользовательские исследования и тестирование
72% of participants are ready to go back to face-to-face research
Британские специалисты изучили готовности респондентов вернуться к обычным пользовательским исследованиям в офлайне. 72% уже готовы (правда, больше половины из них уже бывали на таких сессиях). Обзор ключевых выводов.
Converting Rating Scales to 0–100 Points
Jim Lewis и Jeff Sauro показывают, как конвертировать любую шкалу опроса типа SUS в значение от 0 до 100. Оно, как правило, проще для общения внутри продуктовой команды.
Turning Complex Data into Compelling Stories — A 5-Step Process
Rachel Krause из Nielsen/Norman Group предлагает формат отчёта о пользовательском исследовании, который продуктовая команда сможет прочитать и понять.
Яндекс Взгляд + Яндекс Толока — Простой и быстрый способ провести UX-тестирование
Яндекс Взгляд сделал интерфейс для быстрого удалённого юзабилити-тестирования простых прототипов на аудитории Яндекс Толоки. Дёшево (999 ₽) и быстро, но к аудитории Толоки всегда были вопросы.
Are Sliders Better than Numbered Scales?
Jim Lewis и Jeff Sauro изучили вопрос: можно ли использовать ползунки вместо набора радиокнопок в стандартизированных опросах от 1 до N. Это не смертельно, но не даёт сильного улучшения данных и сложнее для пользователей.
Are Star Ratings Better Than Numbered Scales?
Jim Lewis и Jeff Sauro разбираются, стоит ли использовать шкалу рейтинга со звёздами вместо цифр.
Визуальное программирование и дизайн в браузере
Modern CSS Techniques To Improve Legibility
Обзор приёмов CSS для улучшения читабельности текстов в вебе от Edoardo Cavazza. Иерархия размеров, высота и длина строки, цветовой контраст.
Новые скрипты
Дизайн-менеджмент и DesignOps
The Growing Practice of IBM DesignOps
Дизайн-менеджеры IBM рассказывают о своих зонах ответственности. На чём они фокусируются и как измеряют успех.
Justin Dauer — Creative Culture: Human-Centered Interaction, Design, & Inspiration
Вышло второе издание книги Justin Dauer «Creative Culture» о формировании креативной культуры в компании. Выдержка из главы 5.
Командное взаимодействие
Collaborative design research
Matthew Ström активно вовлекает недизайнеров в обсуждение дизайна. Ему нужен был способ сделать их комментарии конструктивными и он использует опросник в виде нескольких шкал: каким прилагательным лучше описать макет.
Кейсы
The Future Vision of Microsoft 365
Jason Friedman из MS Office рассказывает о новом интерфейсе на базе Fluent Design.
Redesigning Babylon’s appointment booking system — A UX case study
Georgia Kent-Braham из Babylon Health рассказывает о редизайне сценария записи к врачу. Они проанализировали реальные обращения и грамотно разделили поток на разных специалистов.
Bringing the Spotify Heart to Life
Дизайнеры Spotify рассказывают, как применили принципы анимации для работы над иконкой добавления в избранное.
Content hierarchy in action
Gillian Massel из Shopify показывает хороший пример работы интерфейсного копирайтера. Как она улучшила форму запроса информации так, чтобы показать пользу, а не просто задачу.
Брендинг цифровых продуктов
Ребрендинг навигационного сервиса Waze от Pentagram
Тренды
Designing for a changing world
Дизайн-команда Airbnb рассказывает, как изменялся интерфейс, продукт и работа команды в целом во время пандемии.
Статистика рынка: II квартал 2020
Алгоритмический дизайн
Generative Design is Doomed to Fail
Некролог генеративному дизайну от Daniel Davis на примере пром.дизайна и архитектуры. Он очень точно и жёстко описывает причины, по которым эта идея не взлетела ещё в 80х, не взлетает сейчас и вряд ли взлетит в будущем. Daniel приводит утрированный пример с генератором писем электронной почты, что звучит абсурдной идеей. Но результат мало чем отличается от генеративного дизайна.
- Алгоритмы написаны под очень узкие задачи и их нужно каждый раз переписывать заново.
- Количество сгенерированных вариантов не приводит к качеству.
- Вдумчиво выбирать из множества вариантов на деле сложно.
- Невозможно измерить качество результата, чтобы отфильтровать лучшее.
- Это примитивизация реального процесса работы дизайнера.
- Нет примеров универсальных инструментов в других отраслях.
GPT-3 Design Hype — GPT3 Figma, plus more Design and UX examples
Обзор экспериментов в алгоритмическом дизайне на базе модели машинного обучения GPT-3 (часть инициативы OpenAI). Она позволяет генерировать части интерфейса или, скажем, цветовую палитру на основе текстового описания.
GPT-3 (what, why, how), Figma designing for you
Jordan Singer сделал экспериментальный плагин для Figma, который генерирует интерфейс с помощью модели машинного обучения GPT-3. Вы описываете результат словами, он переводит это в JSON с разметкой элементов.
This changes everything. 🤯
With GPT-3, I built a Figma plugin to design for you.
I call it "Designer" pic.twitter.com/OzW1sKNLEC
— Jordan Singer (@jsngr) July 18, 2020
Похожий пример, позволяющий создать промо-страницу:
I built a UI creator in Figma using @OpenAI's GPT3.
— Dhvanil (@dhvanilp) July 24, 2020
Define your UI component in simple English, and GPT3 + @figmadesign will create full blown mockup for you. With accurate text, images and logos.
Very impressed with GPT3! It is absolutely incredible⚡️
How it works? Read on… pic.twitter.com/ryqO48VDPc
Debuild — Build web apps lightning fast
Экспериментальный сервис, который генерирует интерфейс и код на React на основе текстового описания. Он использует модель машинного обучения GPT-3.
I just built a *functioning* React app by describing what I wanted to GPT-3.
I'm still in awe. pic.twitter.com/UUKSYz2NJO
— Sharif Shameem (@sharifshameem) July 17, 2020
Генератор цветовых палитр на GPT-3:
GPT-3 generated these color scales, given some existing scales and a hue name (or emoji⁉️) as a prompt. Let that sink in. https://t.co/XeLQDz795V pic.twitter.com/1uumvK7hgb
— Harley Turan (@hturan) July 12, 2020
Using Metrics to Generate and Quantify UX Design
Owen Schoppe из Salesforce описывает критерии, по которым их движок алгоритмического дизайна Einstein анализирует интерфейс: группировка, заметность, узнаваемые визуальные коды.
Для общего и профессионального развития
UX Writing Worldwide Report, 2020
Небольшое исследование текущего состояния профессии UX-писателя на основе опроса 110 человек и интервью 6 экспертов. Суть роли, профиль специалиста, проф.сообщества.
47 Key Lessons for UI & UX Designers
Danny Sapio собрал вместе свою коллекцию статей для начинающих дизайнеров. Перевод.
The Guide to Design
Серия обзорных статей о профессии дизайнера интерфейсов от UX Collective. Описаниие базовых понятий и рекомендации книг, статей и видео.
That Portfolio Book
Целая книга с советами по созданию хорошего портфолио от Lyft, Clya, Dan Petty и других.
Люди и компании в отрасли
Babylon Health — Experience Design
Блог дизайн-команды Babylon Health, занимающейся медициной.
Материалы конференций
Future London Academy: UX & Product Design Week 2020
На следующей неделе стартует курс по продуктовому дизайну, который я курирую. В этом году классический формат в Лондоне невозможен, поэтому будем ходить по сильным продуктовым дизайн-командам и агенствам в онлайне. Программу, как всегда, готовили с любовью:
- Carolyn Chmielewski (Spotify). Как построить команду UX-исследований от всеми любимого музыкального сервиса.
- Clara Gaggero Westaway (Special Projects). Прорывные концепции интерфейсов на стыке физического и цифрового мира от агентства, которое делает их для топовых компаний.
- Katie Wishlade (Clearleft). Проектирование услуг от мастодонтов британского UX.
- James Greenfield (Koto). Связь бренда с интерфейсом от одной из самых свежих и бойких компаний на рынке.
- Dan Makoski (Lloyds). Дизайн-лидерство от одного из самых сильных и харизматичных специалистов на британском рынке.
Хотя в этом году расширить годную программу туром по лучшим бургерным и старейшим пабам не удастся, в онлайн-формате цена стала доступнее — £399. Каждый вечер начинается мастер-класс или лекция, после которой идёт общение со спикером, а после — нетворкинг.
Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме, vc.ru или по почте ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.
1 comment