Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-февраль 2021.

Паттерны и лучшие практики
A Complete Guide To Accessible Front-End Components
Ультимативный список интерфейсных компонентов от Виталия Фридмана, которые свёрстаны с учётом требований accessibility.
Finding conversations on Clubhouse — A UX case study
Peter Ramsey разбирает интерфейс Clubhouse и то, насколько он помогает получать качественный контент.
The Search Before the Search — Keyword Foraging
Kate Moran из Nielsen/Norman Group описывает модель поведения пользователей «собирательства ключевых слов» при поиске в интернете. Она возникает, если человек не знает, как именно искать объект (например, это редкий термин для стиля одежды).
Designing for the Breakup
Liz Tan размышляет на тему здорового поведения интернет-сервисов, которые знают своё место в жизни пользователя и не пытаются жить «отныне и вовеки веков, пока смерть не разлучит нас».
10% of E-Commerce Sites Have Product Descriptions That Are Insufficient for Users’ Needs
Alex Krzyminski из Baymard анализирует важность хорошего описания товаров в интернет-магазинах.
Shifting from Consumer UX Design to Enterprise Product Design
Dan Fornal из Slack показывает, как изменил свой подход к дизайну для администраторов, потребности которых отличаются от обычных пользователей.
6 List Item Attributes to Include for Cross-Sells (68% of Desktop Sites Are Missing One or More)
Sally Collins из Baymard напоминает о ключевых атрибутах карточки продукта в блоках кросс-продаж интернет-магазинов.
Cookie Consent Speed.Run
Угарная игра пародирует идиотские бюрократические окна согласия с требованиями GDPR.
How to write inclusive, accessible digital products
Советы Nick DiLallo по написанию текстов в интерфейсе, которые инклюзивны.
California is banning companies from using ‘dark patterns,’ a sneaky website design that makes things like canceling a subscription frustratingly difficult
Штат Калифорния запретил использование тёмных паттернов. Правда, конкретных приёмов там не приводится.
Дизайн-системы и гайдлайны
The Component Gallery
Каталог типовых компонентов дизайн-системы, для каждого из которых есть куча примеров из реальных внедрений. Здорово помогает быстро сравнить подходы.
Тёмная тема оформления
Dark mode in 5 minutes, with inverted lightness variables
Lea Verou показывает по шагам, как быстро реализовать тёмную тему оформления через цветовую модель HSL. Правда, параметр яркости в ней варьируется от цвета к цвету, так что он советует похожую по смыслу модель LCH.
Building Dark Mode
Robin Rendle рассказывает о создании тёмной темы оформления для сервиса Sentry.
Redesigning the illustration style at Shopify
Holly Schofield рассказывает о переработке единого стиля иллюстраций Shopify. До этого у них была шикарная и так же единая стилистика, но они посчитали её отвлекающей от основных задач владельца интернет-магазина.
11 Fantastic Benefits of Design Systems
Кажется, одна из самых полных и толково описанных статей о пользе внедрения дизайн-системы от Lukas Oppermann.
Designing with a fluid space palette
James Gilyead описывает систему размеров дизайн-системы, которая позволяет реализовать гибкую адаптивную сетку как всего экрана, так и отдельных компонентов.
The Power of Composition with CSS Variables
Maxime Heckel показывает, как создать тему оформления интерфейса на базе CSS-переменных и цветовой модели HSL. Это упрощает поддержку состояний компонентов (например, наведение и нажатие на кнопку).
Storybook
- Научился показывать нативные компоненты для мобильных. Это упрощает создание живых гайдлайнов для них. Сама библиотека.
- Официальная памятка по созданию плагинов.
Понимание пользователя
Proposed Personas
Группа веб-стандартов W3C сделала первую версию набора персонажей для учёта требований accessibility.
Информационная архитектура, концептуальное проектирование, контент-стратегия
Getting Started with Journey Mapping: 27 Tips from Practitioners
Alita Joyce из Nielsen/Norman Group опросила пару сотен специалистов по интерфейсам и составила памятку с советами по созданию customer journey map.
Scenario Mapping — Design Ideation Using Personas
Kim Salazar из Nielsen/Norman Group описывает метод картирования сценария для конкретного персонажа. Он фокусируется на генерации идей вокруг конкретных шагов.
Новые инструменты дизайна интерфейсов
Figma
Бесплатный тариф будет ограничен с 21 апреля. Теперь можно вести максимум 3 файла по 3 страницы в каждом и 1 проект. Хотя при этом снимут ограничение на количество редакторов.
В последнюю неделю марта они выпускали по одному улучшению в день. Наконец-то появились списки. А ещё можно публиковать отдельные компоненты дизайн-системы, не обязательно всю библиотеку сразу. И, самое приятное, — связать личную и рабочую учётную запись. Публичный профиль в сообществе также будет единым.
Next up:
Do you use Figma for work? Yes.
And for your personal projects? Also yes.
Now you can switch accounts seamlessly, flipping between your design system and the side projects you bought domains for and are totally going to finish.
Stay tuned, more tomorrow ? pic.twitter.com/YaBgRz8psr
— Figma (@figmadesign) March 31, 2021
Также появился улучшенный поиск внутри инструмента а-ля известный плагин Sketch Runner.
Menu search got a visual refresh!
Press Command + / (Mac) or Control + / (Windows) to access your recent actions, Figma plugins, menu items, and more from the center of your canvas. pic.twitter.com/UlO7HF2zqW
— Figma (@figmadesign) March 18, 2021
Плагины
- Above the Fold: Отмечает, где находится конец первого экрана браузера на разных разрешениях экрана.
- Cards for Humanity: Стимулирует думать о пользователях с ограниченными возможностями.
- Yuan Qing Lim из Shopify сделал несколько небольших полезных плагинов, которые упрощают манипуляции с большим количеством объектов.
Шаблоны
- Annotation Kit 2.0: Вторая версия шаблона для комментирования и спецификации макетов от Mixpanel.
- A11y Annotation Kit: Спецификации по поддержке accessibility в макетах. Разметка для экранного диктора и экранной навигации, подсказки к элементам и логика поведения форм.
- Tailwind UI Kit: От создателей популярного CSS-фреймворка. Как работали над ним.
- Brick constructor: Можно поиграть в конструктор а-ля Lego внутри Figma.
- Microsoft опубликовали свои известные иллюстрации об инклюзивном дизайне.
Статьи
- Команда Figma рассказывает о том, как использует Figma, чтобы делать Figma.
- Wendy Lu: как менялось командное использование инструмента во время тотальной удалёнки. Она выгрузила много внутренней статистики.
- Steve Ruiz: безумные эксперименты с интерактивными компонентами. Интерфейсные компоненты со сложной логикой и игры.
- Rodrigo Osornio: микро-анимации с помощью новых интерактивных компонентов.
Getty Images купили Unsplash
Фотобанк останется бесплатным.
Float
Простой инструмент для послойной анимации иллюстраций от Gal Shir.
Placeholder
Генератор заглушек перед загрузкой изображения на основе фото. Выдаёт CSS, SVG или Base64.
Easing Gradients
Генератор градиентов с плавными переходами с возможностью получить CSS на выходе.
Mesh Gradients
Инструмент позволяет делать эффектные mesh-градиенты. Есть плагины для Sketch и Figma.
Dither Me This
Сервис позволяет сделать дизеринг изображения, что в духе одного из нишевых трендов.
Fancy Border Radius Generator
Простой онлайн-инструмент позволяет сделать сложный радиус скругления фигуры и получить его CSS.
Conic.css
Сервис позволяет генерировать конусные градиенты и выдаёт их CSS.
Haikei
Инструмент позволяет создавать подложки с фигурами или градиентами и сохранять их в SVG.
Mail Studio
Инструмент помогает создавать адаптивные письма рассылки. Есть версии для Windows, Mac и Linux.
Пользовательские исследования и тестирование
Attention Insight Heatmaps — AI-Driven Pre-Launch Analytics
Ещё один сервис, который моделирует тепловые карты для интерфейсов на основе исторических данных похожих тестов.
UXOps
Новый сервис для проведения карточной сортировки.
Быстрый клик-тест скриншотов вместо юзабилити-тестирования прототипа
Виктория Нагорная, Диана Вайнберг и Наталья Шмелева из Usethics описывают метод юзабилити-тестирования через клик-тесты скриншотов интерфейса.
UX and Net Promoter Benchmarks of Food Delivery Services
Jim Lewis и Jeff Sauro провели сравнительное исследование нескольких американских сервисов доставки еды. Они выявили ключевые драйверы хорошего пользовательского опыта и оценили их по модели Кано.
Cognitive Interviewing — A Method to Evaluate Surveys
Jean Fox и Jennifer Edgar описывают метод когнитивных интервью, который в каких-то ситуациях заменяет юзабилити-тестирование.
Four Reasons Why Research Participants Forget
Jeff Sauro и Jim Lewis описывают причины, по которым респонденты UX-исследований забывают причины, детали и последовательность событий, о которых рассказывают.
Retail research during COVID-19 and beyond
Michelle Brown из Shopify рассказывает, как научилась проводить пользовательские исследования физических платёжных устройств в условиях удалённых методов.
Seven Reasons People Misinterpret Survey Questions
Jeff Sauro и Jim Lewis приводят причины, по которым респонденты могут неправильно понять формулировки опросов.
Sample Size Estimation for NPS Confidence Intervals
Jim Lewis и Jeff Sauro показывают, как определить выборку для опроса NPS.
Stephanie Marsh — User Research
В начале 2022 года выйдет второе издание книги. Добавится раздел о ResearchOps и защите персональных данных, помимо множества других обновлений.
Визуальное программирование и дизайн в браузере
SVG и CSS Generators
Фантастическая коллекция генераторов CSS-кода для любых дизайнерских приёмов от Iris Lješnjanin. Цвета, типографика, сетки, анимация, декоративные элементы и много чего ещё. Во второй статье собраны генераторы SVG на самый разный случай: фигуры, фоны, анимация и т.п.
CSS Grid Cheat Sheet Illustrated in 2021
Свежая шпаргалка по CSS Grid от Joy Shaheb.
The End of AMP
Dwayne Lafleur прогнозирует, что AMP может потерять привелигированное положение в поиске Google, если сайт и так выполняет требования по скорости загрузки. Он описывает проблемы формата и говорит, что не будет скучать по нему.
Why should type be fluid, anyway?
Elise Hein размышляет на тему целесообразности поддержки гибкой адаптивной типографики (когда размер шрифта подстраивается под оптимальное количество знаков в строке). Это хорошо для читабельности, но требует не самых простых решений в коде.
Handling Text Over Images in CSS
Ahmad Shadeed разбирает разные виды подложек для текста на картинке и CSS-код для них.
The Future of CSS: Scroll-Linked Animations with @scroll-timeline
Bramus Van Damme рассказывает о готовящемся дополнении к стандартам CSS — появится анимация при прокрутке.
Новые скрипты
- Charts.css: CSS-фреймворк для визуализации данных.
Дизайн-менеджмент и DesignOps
A Framework for CX Transformation — How to Operationalize CX at Scale
Kim Salazar из Nielsen/Norman Group описывает фреймворк CX-трансформации компании. Недавно они выпустили отчёт с рекомендациями на тему.
Growing UX Maturity — Finding A UX Champion And Demonstrating ROI, part 1
Серия статей Victor Yocco о зрелости UX и том, как её повысить. В первой части он фокусируется на адвокатах дизайна среди лиц, принимающих решения, а также ROI. Во второй — об обмене знаниями и менторстве.
Interviewing with Lyft Design: The Product Designer
Tyler Norman рассказывает о том, как устроен процесс собеседования для дизайнеров в Lyft.
How to ask for design feedback at every stage of a project
Marijan Šnajdar из Shopify предлагает несколько способов собирать обратную связь в зависимости от стадии проекта и проработки концепта.
Why your organization needs product principles
Ethan Eismann рассказывает о продуктовых принципах Slack, которые помогают всем ролям — от дизайнеров до юристов.
Just Jump In — How to Scale Design Practices
Kate Sullivan из IBM описывает подход к внедрению сложных практик и методов дизайна. Это рамка «пилот → евангелизм → масштабирование», которая позволяет делать всё поэтапно.
Reflections on the user-centred design communities team
Как устроено дизайн-сообщество в государственных сервисах Gov.uk.
Design communication is a critical skill
Годные советы Kazden Cattapan о том, как объяснять дизайн-решения коллегам из разных ролей: разработчики, редакторы, менеджеры продуктов и топ-менеджеры.
Командное взаимодействие
Designing a Virtual Venue
Claire Cianca из Flexport рассказывает о формате ежегодной встречи дизайнеров, которая в этом году прошла виртуально. Они сделали необычный шаблон в Miro в виде дома, где в каждой комнате проходила своя активность.
Кейсы
Как мы отказались от вкладок в интерфейсе и ускорили работу пользователей почти в 2,5 раза
Кирилл Улитин рассказывает о перепроектировании панели инструментов в браузерном редакторе докумнетов МойОфис. Они рассматривали разные популярные подходы и сравнивали их эффективность.
People are talking
Jess Klein рассказывает о перепроектировании обсуждения правок статей в Wikipedia. Они в том числе используют силу сообщества для поиска идей.
Брендинг цифровых продуктов
Why Some Sonic Logos Actually Hurt Their Brands During Covid
Lauren McGuire говорит о том, что аудио-логотипы брендов должны адаптироваться к текущей ситуации в обществе. Например, фирменный джингл Netflix стал звучать намного чаще на карантине, а звук McDonald’s шёл вразрез с невозможностью физически попасть в заведение.
Brand Management for Dummies
Frontify выпустили бесплатную мини-книгу. Это совсем базовый обзор того, как сделать бренд цельным.
История
Jeff Bezos and Amazon — A complicated design legacy
Fast Co Design собрали хронологию взаимоотношений главы Amazon Jeff Bezos с дизайном. Успех и провалы с историей ключевых запусков.
A Look Back on 20 Years of The Skins Factory
Агентство The Skins Factory вспоминает историю своих тем оформления для медиа-плееров за последние 20 лет. Много эффектных приветов из прошлого. Продолжение.
Defending Personas. If you love a design tool, set it free
Alan Cooper говорит, что некорректное использование персонажей началось вскоре после публикации книги «Психбольница в руках пациентов». Он просто в своё время рассказал дизайнерам интерфейсом о потенциально интересном методе, а переврали его уже последователи.
Тренды
Aurora UI — new visual trend for 2021
Michal Malewicz предлагает название для одного из трендов прошлого года с размытыми градиентными пятнами на фоне — «северное сияние» (Aurora).
Алгоритмический дизайн
«Творческая и умеренно меланхоличная»: нейросеть проходит тест Роршаха
Сервис Seeing AI от Microsoft прошёл тест Роршаха и получил оценку личности от психолога.
Голосовые интерфейсы
Microsoft’s Cortana silenced as Siri gets new voice
Microsoft прекращает развитие голосового помощника Cortana на мобильных. Amazon и Google победили.
Diana Deibel & Rebecca Evanhoe — Conversations with Things
Rosenfeld Media выпускают книгу Diana Deibel & Rebecca Evanhoe «Conversations with Things. UX Design for Chat and Voice». Она посвящена проектированию голосовых и чат-интерфейсов.
The Rise of Touch Screens in Cars Explained
Casper Kessels размышляет о причинах популярности сенсорных экранов в машинах, несмотря на проблемы с их эргономикой. Он проследил рост функциональности за несколько десятилетий и отмечает, что её невозмоно поддержать физическими кнопками.
Ethics by Design — An organizational approach to responsible use of technology
Рекомендации по этичному использованию технологий от Всемирного Экономического Форума. Salesforce выделили основные пункты, полезные для дизайнеров интерфейсов.
The Mobile Performance Inequality Gap, 2021
Интересные расчёты Alex Russell: какие характеристики смартфона можно считать массовыми в 2021 году? Он предлагает в качестве ориентира одну из недорогих моделей на Android и даёт прогноз по размеру страницы в браузере, которую такое устройство может комфортно переварить.
It’s High Time to Replace JPEG With a Next-Generation Image Codec
Jon Sneyers представляет рабочую группу JPG XL, нового поколения формата JPG. Он сравнивает старые и новые форматы изображений по эффективности сжатия и качеству.
Для общего и профессионального развития
Google User Experience (UX) Certificate
Бесплатный курс по дизайну интерфейсов от Google на Coursera. Если платить $39 в месяц, то по окончанию дают сертификат то имени компании, что неплохо для резюме начинающих дизайнеров.
Winning with fidelities
Группа дизайн-менеджеров IBM предлагает свою модель уровней описания продукта и поведения пользователей. Шаблон в Mural.
Three things product teams need from designers
Chris Hill-Scott из Gov.uk говорит о трёх полезных вещах, в которых дизайнер интерфейсов может помочь продуктовой команде. Сделать вещи наглядными, реальными и осмысленными.
The Elements of Digital Ethics
Per Axbom собрал модель проблем в цифровой этике на разных уровнях — от общества и организации до человека и машины.
Люди и компании в отрасли
Magic Camp
Сайт внутренней креативной команды Яндекса Magic Camp, которая занимается сервисами такси и доставки. Например, там опубликованы реальные брифы.
Материалы конференций
#GAconf — A day of talks and networking, exploring accessibility for disabled gamers
Конференция #GAconf пройдёт 5-6 апреля в интернете. Она посвящена accessibility в играх.
Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме, vc.ru или по почте ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.