Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-март 2024.
Паттерны и лучшие практики
3 Types of Online Calculator and Quiz Tools
Tanner Kohler из Nielsen/Norman Group описывает принципы работы трёх видов калькуляторов: конвертеры, предположения и рекомендации. Во второй статье он даёт советы по дизайну таких интерфейсов.
The Perfect University Course Page — Design Guidance
Агентство Creative Navy изучило интерфейсы описания университетских курсов. Они прошлись по 280 вузам и провели 45 интервью.
Packaging & Filling Systems GUI — UX Design Guidance
Агентство Creative Navy изучило профессиональные интерфейсы для производственных линий по упаковке и наполнению товаров.
UX and NPS Benchmarks of Banking Websites (2024)
MeasuringU опубликовали новое сравнительное исследование сайтов американских банков. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
F-Shape Pattern And How Users Read
Краткий обзор паттернов сканирования информации на экране от Виталия Фридмана.
Making Product Value Obvious
Самая ценная вещь, которую дизайнеры могут дать продукту — лучше показать пользователю ценность этого продукта, напоминает Luke Wroblewski.
B2B Electronics: Use “Product Tables” to Display Product Listings on Desktop
Iva Olah из Baymard Institute советует использовать табличные списки на B2B-сайтах по продаже электроники на компьютере и обычные списки на телефоне.
B2B Electronics: Always Allow Users to Search Long Lists of Filter Options
Iva Olah из Baymard Institute разбирает сложные фильтры на B2B-сайтах по продаже электроники и даёт советы по организации поиска в них.
Дизайн-системы и гайдлайны
The Anatomy of a Component Sprint
Brian Alfar рассказывает о компонентном спринте при работе над дизайн-системой Washington Post. Дизайнер и разработчик в паре про прорабатывают все вопросы в течение 10 дней.
Maintaining a design system in Figma
Платиновая памятка по организации работы над дизайн-системой в Figma от Lukas Oppermann. Как вести версионирование, обновление компонентов, историю изменений — дотошно и основательно.
The Art of Design System Recipes
Brad Frost пишет о концепции «рецептов» в дизайн-системах. Это специфичные компоненты, которые нужны конкретному продукту в частной ситуации и добавлять их в общий каталог нет смысла. Хотя они должны строиться по тем же принципам.
Proposal: CSS Variable Groups
Lea Verou предлагает отличную идею групп для переменных в CSS. Они могли бы упростить описание шрифтовых наборов, цветовых градаций и других связанных токенов.
Subframe — The best way to build UI, fast
Инструмент позволяет собирать интерфейс из компонентов в коде, а потом докручивать его под себя.
Meet Ritmo, Musixmatch’s cross-platform design system
Andrea Zilibotti рассказывает о создании дизайн-системы Ritmo для музыкального сервиса Musixmatch.
Don’t Put Crap in the Design System
Brad Frost пишет, что мусор в дизайн-системе неизбежен из-за природы продуктовой работы. Но его можно минимизировать.
State of Design Tokens 2024 Report
Supernova провела опрос около 200 дизайнеров и разработчиков о том, как они используют токены в своих дизайн-системах.
Новые инструменты дизайна интерфейсов
Figma
Запустили много фешенебельных новых функций: шрифтовые и градиентные токены, аналитика использования библиотек. И, самое главное — родная связка с реальным кодом компонентов через Code Connect, благодаря которой разработчики могут получить его прямо из макета (причём это не мусорная автогенерация). Они также отметили 1 апреля стилизованными курсорами под старые визуальные тренды и операционные системы.
Плагины
- Обзор плагинов для связки кода и дизайна в Dev Mode.
- Locofy Lightning: Экспортирует макеты в код на React, HTML/CSS, Next.js, Gatsby или Vue.
- Figma to Replit: Экспортирует макеты в код на React.
- Builder.io: Экспортирует макеты в код на React, Svelte и просто HTML.
Статьи
- Snapp Automotive: Автомобильный интерфейс может иметь разные темы оформления для разных автопроизводителей. Casper Kessels рассказывает об архитектуре токенов и компонентов в Figma для этого.
Пользовательские исследования и тестирование
Conducting Accessibility Research In An Inaccessible Ecosystem
Годная памятка Michele Williams по проведению пользовательских исследований для улучшения accessibility. Инструменты и методы сильно ограничены, но она предлагает альтернативы.
A Decision Framework for UX Resourcing
Dawn Ta описывает свой метод для подбора пользовательских исследователей на конкретный проект. Он заточен под ситуации, когда ресурсов не хватает и нужно делать компромиссный выбор.
Surveys and the “True Score” Mistake
Chris Chapman пишет о том, что точной итоговой оценки у опросников зачастую не существует. Попытка получить её — самообман, поэтому нужно воспринимать их как поддержку принятия решений.
Just like magic — Dovetail’s newest features are here
Сервис для ведения базы знаний и инсайтов Dovetail анонсировал прорву новых возможностей по автоматизированной обработке результатов исследований, выделению тем, обработке видео и т.п.
Supercharge your research impact — 10 secrets to success you won’t learn in school
Советы Rebecca Knowe из IBM по подготовке, проведению и использованию результатов пользовательских исследований, с учётом ожиданий ключевых участников проекта.
Визуальное программирование и дизайн в браузере
Новые скрипты
Дизайн-менеджмент и DesignOps
Tinkoff Design career paths
Иван Звягин описал карьерные пути и карту компетенций для дизайнеров Тинькофф. Документ от Юлии Кондратьевой.
Setting Up Your UX Mentorship Program For Success
Kathryn Brookshier построила менторскую программу в Indeed и даёт советы для тех, кто хочет запустить её у себя.
How Research Ops can make or break critical partnerships
Melissa Hack умеет хорошо вовлекать в процесс пользовательских исследований коллег, принимающих решения по проектам. Она описывает свой подход к системной работе с такими людьми.
Кейсы
A design reset
Karri Saarinen рассказывает о редизайне сервиса управления задач Linear. В первой части говорит о том, как продавать такие изменения. Во второй — как шёл сам процесс.
Брендинг цифровых продуктов
The essential guide to matching icons with typefaces
Лучшая статья в мире про связь шрифта и пиктограмм в интерфейсах. Супер-детальный и дотошный метод поиска визуальной рифмы с топчанскими примерами для типовых ситуаций.
Hubbl
Айдентика видео-сервиса Hubbl, сделанная внутренней креативной студией Fox Creative.
Betterfly
Айдентика страхового сервиса Betterfly от британского агентства Design Studio.
Klarna
Обновление айдентики финтеха Klarna, сделанное внутренними силами.
Trust
Айдентика финтех-сервиса Trust от австралийского агентства Lovework.
Docusign
Ребрендинг сервиса цифрового документооборота Docusign, сделанный внутренними силами.
Uber
Обновление айдентики Uber от американского агентства Jones Knowles Ritchie.
Sendwave
Ребрендинг сервиса денежных переводов Sendwave от британского агентства Design Studio.
Customer.io
Ребрендинг сервиса рассылок Customer.io, сделанный внутренними силами.
Epidemic Sound
Ребрендинг каталога профессиональной музыки и звуковых эффектов Epidemic Sound от шведского агентства Bold.
ShareFile
Ребрендинг сервиса цифрового документооборота ShareFile от американского агентства Athletics.
Sports.ru
Ребрендинг спортивного издания Sports.ru от отечественного агентства Супрематика.
CafePay
Айдентика зарплатного проекта CafePay от американского агентства Clay.
The hidden power of typography
Rob McKaughan из Microsoft собрал пачку исследований о том, как шрифт влияет на скорость чтения в целом и восприятие конкретных сообщений в частности.
Тренды
Futurescape — Trajectories for Tomorrow
Прогноз трендов 2024 года от Frog design.
2024 Craft Beer Branding Trends Review
Тренды в пивном дизайне 2024 года.
Post-Neubrutalism — foreshadowing Figma’s next aesthetic ethos
Darren Yeo отметил термин «solarpunk» для обозначения тренда в дизайне из выступления Dylan Field и пытается понять, значит ли он что-то.
Seven visual trends and how they’ll unfold in 2024
Прогноз трендов 2024 года от It’s Nice That.
AIC Trends
AIC собрали сайт-коллекцию обзоров трендов в разных областях.
Алгоритмический дизайн
User Research with Humans vs. AI
Jakob Nielsen здорово проанализировал все гипотетические варианты использования ИИ в пользовательских исследованиях. И трезво оценил, какие потенциально могут автоматизироваться, а какие — никогда.
AI for UX: User Research Prompt Best Practices and Framework
Kuldeep Kelkar предлагает пользовательским исследованиям интересный подход REFINE (Role, Expectations, Format, Iterate, Nuance, Example) для формулирования полезных запросов к алгоритмическим чат-ботам. В теории это поможет в подготовке исследований.
Relume — Websites designed & built faster with AI. AI website builder
Грамотная концепция конструктора сайтов на базе алгоритмического дизайна. Он помогает составить карту сайта, сделать wireframes и собрать стиль на основе мудбордов. Всё это можно экспортировать в Webflow или Figma (они сделали тонну компонентов для типовых ситуаций).
Google Vids — Online Video Creator and Editor
Генератор видео для Google Workspace на базе презентаций Google Slides. Можно выбрать стиль и записать себя.
Video Interpolation With Diffusion Models
Экспериментальный инструмент Google дорисовывает промежуточные кадры видео по первому и последнему.
New Adobe Photoshop with Advanced Generative Fill and Generate Image Brings New Superpowers to All
Adobe развивают алгоритмические инструменты в Photoshop. Можно стилизовать часть изображения на основе другого стилистического изображения-примера, менять части изображения на похожие по духу объекты, вырезать и сгенерировать фон.
AI Video Editing in Adobe Premiere Pro
Adobe добавит алгоритмические функции в видео-редактор Premiere Pro. Можно генерировать видео по текстовому запросу, добавлять или удалять объекты, расширять кадр. Будет возможность подключить сторонние модели вроде OpenAI Sora, Pika Labs или Runway.
Spline AI 3D Generation — The power of AI for the 3rd dimension
Spline добавили генератор 3D-объектов по текстовому запросу.
Flair — The AI design tool for product photography. Drag and drop to create stunning photoshoots in seconds
Сервис алгоритмически генерирует эффектную сцену подачи вашего продукта (например, упаковка или одежда).
Using ChatGPT in Tree Testing — Experimental Results
Jeff Sauro, Will Schiavone и Jim Lewis разбираются, можно ли использовать ChatGPT для тестирования дерева в информационной архитектуре. Успешность выполнения задач сильно завышена, а вот простоту решения задачи предполагает неплохо.
Key Trends and Forecasts Influencing the GenAI Market in 2024
Команда Everypixel разбирается, что происходит с авторскими правами на контент, который используют для обучения больших языковых моделей. Кто с кем судится, есть ли легальные варианты для компаний.
VASA-1
Инструмент для генерации человекоподобных аватаров от Microsoft.
Meta AI
Алгоритмический чат-бот от Meta. Работает как отдельный инструмент и внутри продуктов типа Facebook.
The GenAI Compass — a UX framework to design generative AI experiences
Vincent Koc описывает свой фреймворк «компас генеративного ИИ». Он помогает проектировать интерфейсы таких продуктов.
UX Pilot — Your AI-UX Assistant
Многофункциональный инструмент алгоритмического дизайна. Умеет генерировать макеты, wireframes, цветовые палитры, тексты, планы рабочих сессий. Также может сделать оценку дизайна.
Models All The Way Down
Christo Buschek & Jer Thorp из Knowing Machines решила раскопать, откуда берут данные для обучения алгоритмов популярные генераторы фото и иллюстраций. Они пользуются базой LAION-5B, для которой сделали несколько курированных людьми выборок. Исходя из особенностей этих выборок становится понятно, почему многие картинки от Midjourney или Stable Diffusion выглядят однообразно.
Blaze — The AI Tool for Teams of One
Алгоритмический генератор текстов для блогов, социальных сетей и рекламы.
Leonardo AI — AI Art Generator. Create Art, Images & More
Генератор фото и иллюстраций по текстовому описанию.
«Яндекс» добавил в «Почту» фильтр на основе YandexGPT
Яндекс Почта научилась пересказывать важные письма за последнюю неделю с помощью YandexGPT.
SoundID VoiceAI — The first AI voice transformer plugin
Плагин для DAW превращает запись вашего голоса в любой другой и делает его звучание более профессиональным.
AI and the Beauty of Human Flaws
Интервью с Oliver Reichenstein (основателем iA) на тему стоковости результатов работы инструментов алгоритмического дизайна. И то, как может измениться подход дизайнеров, которые хотят этого избежать.
Apple’s Risky Bet on CarPlay
Casper Kessels рассуждает о разнице в брендировании автомобильных интерфейсов, которую Apple и Google дают производителям. И почему у Apple более слабая позиция.
Для общего и профессионального развития
Commodification and Pancaking of UX — Accept Reality and Plan New Career Paths
Jakob Nielsen рассуждает о коммодизации профессии дизайна интерфейсов по мере роста рынка. Чем это хорошо и плохо, как строить карьеру в такой реальности.
Duelity — Design duels
Занятный концепт дизайн-дуэлей. Два дизайнера решают одинаковую задачу, сообщество выбирает победителя.
Люди и компании в отрасли
What does a head of typography do?
Tim Brown, глава типографики в Adobe, рассказывает в чём состоит его роль и обязанности.
Материалы конференций
Designing with AI
Rosenfeld Media запускают новую конференцию с фокусом на дизайн с ИИ. Она пройдёт 4-5 июня в онлайне.
Подпишитесь на дайджест в Телеграме ― там свежие ссылки появляются каждую неделю, а также в RSS, ВКонтакте или на vc.ru. Отдельный благодарчик команде Сетки за редактор. А ещё — командам Funky Branding за новую айдентику и Бюробукв за шрифт. Сто тыщ респектов Александру Орлову за прошлые два визуальных стиля.