Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-сентябрь 2023.
Исследование: Отношение к продуктовым дизайн-командам в России
Пятый год я провожу исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные? С прошлого года результаты стали открытыми (результаты за 2021, 2020, 2019 и 2018).
Такой рейтинг будет полезен рынку. Дизайнерам — лучше понимать, где есть хорошие вызовы и комфортная среда дл я профессионального роста. Компаниям и дизайн-командам — видеть, что нужно докачать.
Паттерны и лучшие практики
Transition animations — A practical guide
Толковые советы Dongkyu Lee, помогающие сделать анимацию переходов между экранами и их состояниями более логичной и симпатичной.
Framing Effect — Why context affects decisions
Команда Growth Design рассказывает об эффекте «фрейминга» в интерфейсах. Как правильно подавать варианты выбора и рекомендации.
Industrial Automotive Interfaces UX Benchmarking
Агентство Creative Navy сделало обзор интерфейсов производственных линий по сборке автомобилей.
Table of Contents — The Ultimate Design Guide
Подробная шпаргалка Huei-Hsin Wang и Maddie Brown из Nielsen/Norman Group по проектированию оглавления в вебе и на мобильных.
Digital Accessibility Blogs and Newsletters
Большой список блогов и рассылок по accessibility.
Sheet, dialog, or snackbar — what should a designer go for?
Ксения Толокнова из Альфа-Банка описывает разницу между action sheets, диалогами и панелями для уведомлений в мобильных приложениях. Когда и для чего их использовать.
Dialysis Machine UX Design Patterns & Benchmarking
Агентство Creative Navy сделало обзор интерфейсов медицинских приборов для диализа.
A checkout designed for impulse purchases
Peter Ramsey разбирает процесс оформления подписки на сервис доставки готовой еды Hello Fresh.
UX and NPS Benchmarks of Hotel Websites (2023)
MeasuringU опубликовали новое сравнительное исследование сайтов краски для дома. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
AI Intranet Features — Current and Future
Anna Kaley из Nielsen/Norman Group показывает, как современные интранеты используют ИИ-помощников. Правда, многое из перечисленного обычно решалось просто расширенными возможностями поиска.
Дизайн-системы и гайдлайны
Ship Faster by Building Design Systems Slower
Josh Clark предлагает смириться с тем, что команда дизайн-системы не успевает за скоростью изменений в продуктах и пересмотреть её роль. Это инфраструктурная часть, которая должна быть надёжной и продуманной. Её роль ― не придумывать любые возможные решения, а курировать уже созданные в продуктовых командах. Сама мысль не новая, но предложение идти от этой реальности ― достаточно свежее и абсолютно разумное.
Тёмная тема оформления
The Future of CSS — Easy Light-Dark Mode Color Switching with light-dark()
Bramus Van Damme пишет о новой функции light-dark() в CSS, которая позволяет выбрать значение исходя из того, какая тема сейчас включена у пользователя (тёмная или светлая).
Material Web
Вышла первая версия библиотеки компонентов для веба.
Design Systems Events
Список конференций и митапов по дизайн-системам в разных странах мира.
How Netlify rebranded their app in just 6 weeks
Как Netlify канонически обновили интерфейсы под ребрендинг через дизайн-систему с помощью инструментов Storybook.
Naming Variables In CSS
Советы Jonathan Dallas по именованию переменных в CSS для дизайн-систем.
Unveiling the Design Systems Awards Finalists!
zeroheight организовали свою награду среди дизайн-систем и объявили победителей этого года.
Storybook 7.5
Вышла версия 7.5.
Новости инструментов дизайна интерфейсов
Adobe MAX 2023
Ежегодная конференция прошла 10-12 октября в Лос-Анджелесе. Что там нового во флагманских продуктах Creative Cloud?
Photoshop
Всё катанули ещё до мероприятия. В основной версии вышли из беты алгоритмические фукнкции Generative Fill и Generative Expand, упростилось удаление объектов. На iPad появился фильтр Camera Raw. А накануне дали доступ к браузерной версии с частью функциональности для всех.
Illustrator
Запустили бету для веба. В основной версии можно генерировать векторные иллюстрации по текстовому описанию через Firefly, накладывать графику на макет мерча с предложением перспективы (выросло из прошлогоднего концепта #ProjectVectorEdge), преобразовывать растровый текст в редактирумый, оптимизировать векторы.
Firefly
Доступен в вебе, работает на базе новой модели Firefly Image 2.
InDesign
В основной версии можно оформить большой кусок контента с помощью автостилизации на базе наборов стилей, встраивать Google Analytics, лучше контролировать экспорт.
Lightroom
В основной версии можно играть с глубиной на фото через инструменты размытия (тоже родом из экспериментов Sneaks).
AfterEffects
В основной версии новая Roto Brush лучше выделяет объекты на видео, прокачали работу с цветом и скриптами.
Express
Основная версия генерирует цельные редактируемые шаблоны, которые адаптируются для разных сред вроде соцсетей или печати. Предлагает варианты текста, графики и композиции. Переводит на 45 языков.
Premiere Pro
В основной версии можно искать по транскрипции текста и вырезать эти части из видео (прошлогодний эксперимент #ProjectBlink), подчищать качество диалогов, экономить время на цветокоре, плюс оптимизировали интерфейс таймлайна.
Fresco
В основной версии обновления вышли ещё в сентябре. Вертикальные тексты, улучшение экспорта видео, больше кистей.
Animate и Character Animator
Общий тюнинг.
Дикий крутяк то, что многие из алгоритмических нововведений основаны на экспериментах Adobe Sneaks, которые тизерили последние годы. Так что компания смогла наладить понятный путь реализации этих диких идей, а не просто хайпанула потешками.
Webflow
Конференция Webflow Conf 2023 прошла 5 октября в Сан-Франциско и онлайне, а позже приехала ещё в пару городов. На ней анонсировали кучу обновлений.
Редизайн под новый брендинг, токены и прокачка компонентов, тесная интеграция с 3D-инструментом Spline, гибкая локализация от контента до дизайна с автопереводом и учётом SEO, более лучшие интеграции со сторонними сервисами, развитие API, экспорт React-компонентов. Улучшили совместную работу ― появились комментарии, качнули редакционные процессы для разных ролей и добавили отдельную роль контент-редактора (может менять только тексты).
И, самое главное ― экспериментальный импорт из Figma работает более нативно и понимает переменные с токенами. Это вообще разрыв аорты ― порог входа для дизайнеров становится ещё меньше.
Figma
Интеграция с Zoom стала плотнее (можно совместно работать прямо на созвоне), улучшения для организаций и общие интерфейсные обновления.
Неплохой обзор прошлого и будущего инструмента от Fast Company, выросший из беседы с Dylan Field на конференции Adobe MAX 2023. Включая видение того, как инструмент будет интегрироваться в Adobe.
Since announcing the acquisition over a year ago now, we’ve talked a lot about what the future could look like, but we haven’t shown it.
So, we came together with @scottbelsky and the @adobe team to imagine “what if ...”
We wanted to share some of our ideas with you. pic.twitter.com/utEWSxoqnK
— Yuhki Yamashita (@yuhkiyam) October 26, 2023
Плагины
- Variables Translator: Хранит переводы интерфейсного текста через переменные.
Статьи
Пользовательские исследования и тестирование
How Figma’s data science and user research teams weave together insights that count
Отличный пример тесной связки аналитиков и исследователей в Figma. Они хотели переработать уведомления и вместе искали потенциальные проблемы и точки боли.
Building a Triple Threat — Data Analysis, Organization-Wide Repository, and Education Library
Hannah Campbell, Jeff Sokolov и Rachel Searing рассказывают о своём опыте внедрения базы знаний и инсайтов из пользовательских исследований в iRhythm Technologies. Какие цели они ставили, как общались с будущими пользователями и выбирали пилот.
Are People Who Agree to Think Aloud Different?
Jeff Sauro и Jim Lewis разбираются, чем отличаются респонденты, которые соглашаются или отказываются на исследование с рассуждением вслух. В целом разницы нет, кроме возраста и страны.
An Actionable And Reliable Usability Questionnaire With Only 7 Items — Inuit
Maximilian Speicher и Johanna Jagow рассказывают о своём опроснике INUIT (Interface Usability Instrument), помогающем оценить качество интерфейса. В целом 7 вопросов не сильно далеко ушли от SUS при наличии супер-короткого UX-Lite, хотя задумка автоматизировать анализ интересная.
Analyzing Qualitative User Data at Enterprise Scale With AI — The GE Case Study
Erin Gray рассказала Jakob Nielsen о системе обработки обратной связи от пользователей в GE. Как они категоризуют обращения в поддержку в разных каналах и в целом упростили жизнь этой команде.
How Hard Is It to Rank Items in Surveys?
MeasuringU разбираются, насколько легко пользователи справляются с заданием отсортировать что-то в опросниках. Они Сравнивают зависимость от темы и количества элементов.
Визуальное программирование и дизайн в браузере
CSS text-wrap: pretty
Новое свойство CSS text-wrap: pretty позволяет бороться с висячими предлогами и другими неаккуратностями автопереноса.
Introduction to web sustainability
Советы Mozilla по оптимизации производительности сайтов для снижения энергопотребления.
A Roundup Of WCAG 2.2 Explainers
Geoff Graham собрал обзор обзоров нового стандарта accessibility WCAG 2.2.
Новые скрипты
Дизайн-менеджмент и DesignOps
For people going places. How we founded the Design Interns
Nikki Godley рассказывает о запуске программы стажировки в Wise. Как получили поддержку руководства, строили отбор и вели стажёров по процессу.
Как выстроить взаимодействие между исследующими ролями в компании
Юлиана Шевчук рассказывает об объединении исследователей в Контуре. Они составили памятку по поиску нужных экспертов в компании.
Командное взаимодействие
Shishir Mehrotra’s 10 rules for leading great team meetings
Shishir Mehrotra (со-основатель Coda) делится отличным списком командных ритуалов и методов, которые помогают решать задачи быстрее и в целом двигаться вперёд.
Common-Knowledge Effect — A Harmful Bias in Team Decision Making
Evan Sunwall из Nielsen/Norman Group пишет об эффекте «общеизвестного знания», который мешает продуктовым командам принимать качественные решения. На простом эксперименте он показывает, как включается групповое мышление.
Readymag Design Collaboration Report 2023
Readymag опросили 370 дизайнеров на тему особенностей командной работы.
Продуктовый менеджмент и аналитика
Problem Statement Impact and Assumptions
Scott Sehlhorst продолжает серию статей о правильной формулировке проблем, которые решает продуктовая команда. Как показать влияние на пользователей и потенциальную отдачу от решения.
Uselessly Wide Estimation Ranges
Scott Sehlhorst показывает, как описать неполное текущее понимание проблемы, чтобы понять, стоит ли вкладываться в улучшение.
Кейсы
How our biggest redesign yet came to be
Дизайнеры Slack рассказывают о недавнем крупном редизайне интерфейса. Результат неоднозначный, но интересно посмотреть на ход процесса. Отдельные статьи про мобильную версию и боковую панель.
Эволюция фичи за три года — кейс рассылки спецпредложений Авито
Лиза Роднова рассказывает о запуске функции рассылки спецпредложений в Авито. Как проектировали, пилотировали и масштабировали её.
Брендинг цифровых продуктов
Patreon
Ребрендинг сервиса Patreon для поддержки авторов контента от британского агентства Wolff Olins и внутренней команды.
Webflow
Ребрендинг платформы для сайтов Webflow, сделанный внутренними силами.
История
Internet Artifacts
Угарный музей интернет-реликвий, стилизованный под античный.
CARI Aesthetics
Институт Consumer Aesthetics Research Institute собирает каталог эстетик в дизайне, искусстве и культуре за последние десятилетия.
Тренды
Space OS
Дикий концепт операционной системы Space OS. Немецкая команда энтузиастов Deta предложила свежий заход с веб-сервисами вместо приложений и канвой а-ля Miro и FigJam вместо обычного оконного интерфейса. Ну и, само собой, генерация всего и вся по текстовому запросу. Самое крутое, что это не просто видос — можно пощупать альфа-версию.
Алгоритмический дизайн
Adobe Sneaks 2023
На конференции Adobe MAX 2023 традиционно показали пачку экспериментов с Adobe Firefly (раньше он назывался Sensei). И прокачали саму платформу алгоритмического дизайна.
Во-первых, обновили базовую модель Firefly. Она научилась генерировать картинки в заданном стиле (нужно дать несколько примеров или выбрать из существующих рефов). Точнее генерирует людей и позволяет настраивать параметры «фотосъёмки». Помогает задавать правильные запросы (и предлагает подсказки). Ну и, само собой, даёт более лучшее качество.
Во-вторых, добавили векторную модель Firefly. Она помогает генерировать объекты, которые вписываются в стиль целевой иллюстрации, делает текстуры и градиенты, ну и правильно организует геометрию и слои.
В-третьих, сделали модель Firefly Design. Она генерирует цельные редактируемые шаблоны (пока для их инструмента Adobe Express), которые адаптируются для разных сред вроде соцсетей или печати. Предлагает варианты текста, графики и композиции.
Кстати, недавно Firefly стал доступен через API в платформе NVIDIA Omniverse.
#ProjectFastFill: Добавляет и удаляет объекты на видео таким же простым способом, то и Generative Fill.
#ProjectDraw&Delight: Превращает простейшие наброски рисунков в базовые контурные или полноцветные иллюстрации. Сюжет можно развивать и дополнять постепенно, менять позы персонажей, а также раскрашивать в духе недавнего запуска Illustrator Generative Recolor, ну и доделывать в самом Illustrator.
#ProjectNeo: Создаёт псевдо-трёхмерные иллюстрации с помощью простейших объектов. В примере делают архитектурный объект, который выглядит как векторная иллюстрация.
#ProjectSceneChange: Позволяет вставить персонажа из видео в любую другую сцену. Причём он докручивает оба видео, чтобы подходили друг к другу.
#ProjectPrimrose: Платье из простых текстур меняет цвет. Причём может делать анимацию из этого. Отдельное видео об этой технологии.
#ProjectGlyphEase: Создаёт шрифт на основе трёх знаков для примера, даже если это набросок на бумаге. И стилизует его в нужной технике, в том числе сверх-декоративной.
#ProjectPoseable: Генерирует наброски персонажей для сценарных раскадровок. Можно быстро настроить позу модели среди предложенных и описать нужный образ со сценой.
#ProjectResUp: Повышает разрешение видео маленького размера.
#ProjectDubDubDub: Генерирует дубляж видео или перевод аудио-записей на любой язык. Пытается вписаться в акустическое окружение сцены.
#ProjectStardust: Редактирует фото простым способом: переместить, добавить или убрать объекты, поменять одежду или дорисовать недостающую часть человека.
#ProjectSeeThrough: Убирает отражения и блики с фото, сделанных через стекло.
AI as a UX Assistant
Feifei Liu, Mingjin Zhang и Raluca Budiu из Nielsen/Norman Group перечисляют типичные задачи, для которых дизайнеры используют алгоритмические инструменты. Список составлен на основе опроса 800 специалистов.
TryOnDiffusion — A Tale of Two UNets
Экспериментальный инструмент от энтузиастов из Университета Вашингтона и Google Research позволяет «примерить» любую одежду на ваше фото.
The 4 Degrees of Anthropomorphism of Generative AI
Sarah Gibbons, Tarun Mugunthan и Jakob Nielsen разбираются, почему пользователи присваивают человеческие качества генеративным чат-помощникам и общаются с ними соответствующе.
How to Spot AI-Generated Images
Александр Селедчик описывает чеклист, который поможет определить фотографию, сгенерированную алгоритмами.
Testing ChatGPT-4 for ‘UX Audits’ Shows an 80% Error Rate & 14–26% Discoverability Rate
Christian Holst (Baymard Institute) попробовал ChatGPT для экспертной оценки интерфейса по скриншоту и настоящей ссылке. Результаты мусорные ― находит крайне мало реальных проблем и выдумывает много несуществующих. Jakob Nielsen дополняет эти выводы.
Vizcom ― Render your drawings in seconds
Инструмент превращает наброски от руки в полноценные 3D-рендеры.
YandexART — Картиночная нейросеть Яндекса
Обновлённый генератор графики по текстовому описанию, который развивает прошлое поколение Шедеврум.
AireGAN — Make It Do a Thing
Экспериментальный генератор кроссовок с помощью алгоритмического дизайна.
Suno AI
Генератор песен с вашими словами в разных жанрах по текстовому запросу.
Kaiber
Алгоритмический инструмент генерирует видео-клипы на основе текстового запроса, других видео, фото и аудио.
Luma AI
Инструмент генерирует 3D-модели и сцены по текстовому запросу.
Android 14
Можно генерировать фоны для телефона по текстовому запросу.
Google Search Generative Experience
Экспериментальный генератор графики по текстовому запросу.
Яндекс Маркет
Яндекс Маркет добавил функцию массовой генерации описаний товаров с YandexGPT.
Яндекс Практикум
Яндекс Практикум через YandexGPT поможет пересказать урок или объяснить сложный термин.
AI Visualizing AI ― Beyond the Robot Stereotype
Jakob Nielsen разбирается, какие метафоры кроме клишированного робота предлагают инструменты алгоритмического дизайна для показа самого искусственного интеллекта.
Angry Pumpkins
Javi Lopez сделал мини-игру Angry Pumpkins с помощью DALL-E и Midjourney (графика) и GPT-4 (код). Анонс от автора.
Для общего и профессионального развития
UX Vocabulary Inflation
Jakob Nielsen критикует профессиональный маразм дизайнеров — инфляцию «терминологии». Одни и те же вещи раз в несколько лет получают другое название — только потому, что туда добавили немного нового смысла (ну или консультантам нужно забрендироваться). В итоге вместо решения сложных задач мы ходим по кругу и жалуемся, что не хватает методов и инструментов. Хотя реальная проблема в том, что значительная часть из них давно есть, просто толком не используется.
Бонус: Блог Якоба Нильсена на Substack.
The Design Mindset ― What does it mean to be a designer?
Stephen P. Anderson описывает своё понимание того, каким должно быть отношение к делу у дизайнера. Это 11 принципов, которые он полирует много лет.
UX in Africa
Jakob Nielsen поговорил с двумя специалистами по UX из Африки о том, как устроена профессия на континенте.
Navigating Growth Design — Frameworks, Challenges, and Success Stories
Обзорная статья Марии Борисовой из PandaDoc об особенностях работы дизайнера в команде роста.
The Best Worst Design ― The Power of Absurd Ideas in the design process
Дизайнеры IBM провели воркшоп, где участники делали самый нелепый дизайн взаимодействия с пользователем.
Подпишитесь на дайджест в Телеграме ― там свежие ссылки появляются каждую неделю, а также в RSS, ВКонтакте или на vc.ru. Отдельный благодарчик команде Сетки за редактор. А ещё — командам Funky Branding за новую айдентику и Бюробукв за шрифт (они пока в бета-версии и будут докручиваться в течение года). Сто тыщ респектов Александру Орлову за прошлые два визуальных стиля.
