Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-сентябрь 2021.
Исследование: Отношение к продуктовым дизайн-командам в России
Четвёртый год я провожу исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные? С прошлого года результаты стали открытыми (результаты за 2020, 2019 и 2018).
Такой рейтинг будет полезен рынку. Дизайнерам — лучше понимать, где есть хорошие вызовы и комфортная среда дл я профессионального роста. Компаниям и дизайн-командам — видеть, что нужно докачать.
Интенсив «Паттерны дизайн-менеджмента» для Smashing Magazine
В начале декабря делаю эксперимент — интенсив по дизайн-менеджменту для Smashing Magazine. Это 5-дневная версия моего курса и книги «Паттерны дизайн-менеджмента» — по 2,5 часа вечером с 1 по 15 декабря. Много теории и практики теперь и на английском языке.
Паттерны и лучшие практики
Building a multi-select component
Adam Argyle показывает, как сделать адаптивный список с множественным выбором, органично работающий на компьютерах и сенсорных устройствах.
Tracking designs using watermarks
Riya Chakravarty показывает простой способ напомнить коллегам о том, что вы показываете сырую версию дизайна — водяные знаки на макетах.
Devices that require no user training scale well
Creative Navy сделали обзор методов, помогающих упростить первое использование интерфейсов физических устройств (и не только).
Buttons vs. Links
Eric Eggert подсвечивает проблемы в accessibility, если в интерфейсе кнопки и ссылки используются друг вместо друга.
Дизайн-системы и гайдлайны
Material Design 3
На осенней конференции Android Developer Summit опубликовали много материалов по работе с Material Design 3 (на I/O его называли Material You). Помимо заметного изменения стилистики, в анонсе есть неплохой обзор важных частей гайдлайнов:
Темы оформления с динамическим цветом — самая заметная часть Android 12. Причём можно создавать и более сложные темы. Команда выпустила отличный плагин для Figma, помогающий создавать их.
Теперь всё построено на дизайн-токенах.
Доступен мощный UI Kit для Figma.
Тёмная тема оформления
“Dark Mode” vs “Inverted”
Brad Frost предлагает разделять тёмную тему и инвертированный режим в дизайн-системах. Они могут решать одинаковые задачи (например, смена цвета текста и иконок), но это вызвано разными ситуациями — общая настройка устройства пользователя или конкретный блок в интерфейсе.
Designing something new with the Atlassian Design System
Deborah Lindberg рассказывает о регулярных упражнения дизайнеров Atlassian, когда они пробуют создать на дизайн-системе компании известные продукты на рынке. Это позволяет проверить её масштабируемость и отловить потенциальные проблемы.
Four Principles for the Future of Design
Jennifer Bost и Anna Gregory рассказывают о новых принципах дизайна Microsoft. Они дают пару советов на тему внедрения принципов в рабочие практики.
ЦФТ Elephas
Дизайн-система отечественной компании Центр Финансовых Технологий.
Nord Design System
Дизайн-система компании Nord Health.
Fluent Design
Sunmin Chung и Rachel Romano бегло рассказали, как Windows 11 и Office обновились под новые гайдлайны.
Понимание пользователя
Hocus :focus
Браузерная игра, в которой наглядно показывают проблемы с навигацией по сайтам через клавиатуру для пользователей с ограниченными возможностями.
Accessibility Maze
Браузерная игра, в которой наглядно показывают принципы accessibility.
Respecting Users’ Motion Preferences
Michelle Barker разбирает способы уменьшить объём анимации в вебе для людей с ограниченными возможностями.
Информационная архитектура, концептуальное проектирование, контент-стратегия
How to Handle Category Outliers in Your IA
Page Laubheimer из Nielsen/Norman Group показывает способы организации товаров в интернет-магазинах, которые не укладываются в основные категории.
Design Stories and Truth
Советы Owen Schoppe по моделированию и описанию видению будущего взаимодействия с продуктом. Это где-то рядом со спекулятивным дизайном, но в контексте интерфейса.
Storyteller Tactics — A Card Deck of Story Recipes by Charles Burdett
Набор карт-подсказок для сторителлинга от Charles Burdett.
Новые инструменты дизайна интерфейсов
Figma
Из беты вышли сразу две мощные возможности: ветки в версиях и интерактивные компоненты.
Плагины
- Auto Layout Grids: Совмещает плюсы работы компоновочной сетки и auto layout.
- Simple Sort: Помогает рассортировать варианты компонентов.
Шаблоны
- Chad Bergman: Описание добавок в дизайн-систему от дизайнеров компании.
Статьи
- Microsoft Teams: Структура дизайн-системы. Они постарались максимально отзеркалировать структуру компонентов в коде.
Cleanup.pictures
Простой онлайн-инструмент позволяет моментально убрать объект с фотографии. Просто выделяете его и он сам отрисовывает всё.
Mesh Gradient Editor
Генератор mesh-градиентов в браузере. Их можно настраивать.
Adobe MAX 2021
Ежегодная мега-конференция Adobe MAX 2021 прошла 26-28 октября в онлайне. Было несколько крупных и мелких анонсов:
Photoshop и Illustrator в браузере
Уже могут работать в браузере. Пока с базовыми возможностями, но их будут развивать. Есть также гостевой доступ с просмотром и комментированием макетов.
Creative Cloud Canvas
Аналог Miro.
Creative Cloud Spaces
Организация проектов и макетов для совместной работы в вебе.
XD
Подзатих, новостей в последнее время мало. Появилась связка с Lottie, проигрывание видео и публикация на Behance.
Lorem.space
Сайт даёт картинки для макетов — обложки фильмов, карточки товаров и т.п. Их можно получить по простой ссылке.
Spectrum
Генератор цветовых палитр, которые можно быстро применить к любой части макета, включая иллюстрации и картинки. Плагин для Figma.
Пользовательские исследования и тестирование
How to Build a compelling UX Research Roadmap
Советы Nora Pekker из IBM по составлению roadmap UX-исследований в продукте или команде.
How Many Participants for a UX Interview?
Maria Rosala из Nielsen/Norman Group даёт ориентиры по выборке респондентов для пользовательских интервью. Она описывает разные ситуации, которые влияют на размер.
Context Methods: Study Guide
Nielsen/Norman Group сделали структурированную подборку своих статей о методах полевых и контекстных исследований.
Remote Usability Testing: Study Guide
Nielsen/Norman Group сделали структурированную подборку своих статей об удалённом юзабилити-тестировании.
How to Sell UX Research with Two Simple Questions
Sophia V. Prater описывает процесс дизайна и исследований ORCA (Objects, Relationships, CTAs, Attributes) в рамках концепции Object-Oriented UX.
Визуальное программирование и дизайн в браузере
Checkboxland — Render anything as HTML checkboxes
Безумный эксперимент Bryan Braun, в котором он делает картинки из чекбоксов, а потом анимирует их. Как и зачем сделал его. Другой энтузиаст Andrew Healey сделал Doom.
Новые скрипты
- Atropos: JavaScript-библиотека для эффектов параллакса при наведении курсора.
- Как Facebook меняет радиус скругления в зависимости от разрешения экрана.
- Более мягкая и органичная тень в интерфейсе через совмещение двух источников освещения: прямого и рассеянного.
Метрики и ROI
Three Ways to Measure a User’s Prior Experience
Jeff Sauro и Jim Lewis показывают, как измерить прошлый опыт работы пользователя с продуктом. Это комбинация срока использования, частоты и процента востребованных ключевых функций.
Evolution of the UX-Lite
Jim Lewis и Jeff Sauro рассказывают о предыстории появления их интерфейсной метрики UX-Lite. Как появились SUS, TAM и UMUX-Lite повлияли на неё.
How to Estimate SUS Using the UX-Lite
Jim Lewis и Jeff Sauro показывают, как предсказывать значения метрики SUS на основе их новой метрики UX-Lite, которая сильно проще.
Дизайн-менеджмент и DesignOps
How to Write a Mission Statement for a UX Team — A Case Study in Design Operations
Kate Kaplan из Nielsen/Norman Group описывает формат воркшопа по описанию миссии дизайн-команды.
Driving User Centricity — Remotely Building an Experience Vision
Liz Blanchard рассказывает о работе над видением будущего для интерфейсов RedHat. Формат описания и воркшопы, на которых его генерировали.
UX-Maturity Stage 3: Emergent
Kate Kaplan описывает третий уровень зрелости дизайна в фреймворке Nielsen/Norman Group.
How we’re creating an outcome led culture (and why it matters)
Ben Brewer из сети британских магазинов Sainsbury’s рассказывает о подходе к продуктовой работе, ориентированном на конкретный выхлоп.
Designing a remote UX mentorship program
Sharon Moorhouse рассказывает об удалённой менторской программе в Shopify. Как запустили её и как она устроена.
Кейсы
The story of Slack Clips — Prototyping the path to audio and video messages
Anna Niess, Pedro Carmo и Johnny Rodgers рассказывают о проектировании и поэтапном запуске новой функции Slack коротких аудио- и видео-клипов. Они прошли много итераций и показывают, как менялось взаимодействие пользователей.
Брендинг цифровых продуктов
A 10-step approach to inclusive branding, using the BBC as an example
Gareth Ford Williams рассказывает о комплексной задаче оптимизации брендинга для accessibility в рамках недавней эволюции BBC. Он вызвал много насмешек (мол, увеличили расстояние между квадратиками за десятки миллионов фунтов), но это был целенаправленный тюнинг всех аспектов для облегчения восприятия.
Meta
Новый бренд материнской компании Facebook от внутренней студии Creative X.
Building a brand identity for the world’s largest community
Новая айдентика Facebook от внутренней студии Creative X.
Working for Exposure. A new visual identity for a visual storytelling company
Ребрендинг сервиса для создания мини-сайтов Exposure от американского агентства Smith & Diction.
VK
Ребрендинг Mail.ru Group в VK от британской Saffron Branding и внутренней команды.
Kion
Новая айдентика облачного сервиса Kion от американского агентства Focus Lab.
Heyday
Новая айдентика productivity-сервиса Heyday от американского агентства Order.
Тренды
Behold, the Book Blob
R.E. Hawley анализирует занятный тренд в дизайне книг — массу однообразных обложек, состоящих из абстрактных цветных пятен.
Алгоритмический дизайн
Artflow
Генератор аватаров по словесному описанию с помощью алгоритмического дизайна. Можно смешать разных персонажей и жанры.
Для общего и профессионального развития
Ryan Rumsey — Business Thinking for Designers
Перевод на русский онлайн-книги Ryan Rumsey «Business Thinking for Designers» от InVision.
Marvel Character or Font? Quiz
Уматный тест, в котором нужно угадать по названию: это шрифт или персонаж из вселенной Marvel?
We Analyzed 425,909 Favicons
Группа энтузиастов проанализировала 425 909 фавиконок из интернета. Популярные форматы, размеры, цвета и всё такое.
How to build a better product using Object-Oriented UX: Part Two
Nikki Davis из Athena Health описывает принципы объектно-ориентированного подхода к проектированию интерфейсов.
Люди и компании в отрасли
Inside Designing Microsoft Teams
Блог дизайн-команды Microsoft Teams.
Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме или на vc.ru ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.
