UX/UI-дизайн для эпохи ИИ
Исследования, интерфейсы, дизайн-системы и доступность. Разборы, по которым команды принимают решения о продукте.
| Экран | Проблема | Важность |
|---|---|---|
| Данные карты | Цель касания 36 px | Высокая |
| Данные карты | Контраст подписи 3,1:1 | Высокая |
| Профиль | Нет состояния ошибки | Средняя |
Сверил 14 экранов с WCAG 2.2
Замерил цели касания
Посчитал контраст текста
Сопоставил с воронкой
Пример интерфейса: данные условные, методика из статьи «UX-аудит за 30 минут»
Разбираем процессы и инструменты, с которыми работают продуктовые команды
Figma
Framer
Webflow
Sketch
Miro
Notion
Storybook
Rive
LottieFiles
Maze
Hotjar
LinearFigmaFramerWebflowSketchMiroNotionStorybookRiveLottieFilesMazeHotjarLinear«Меньше, но лучше».
Как это работает в дизайн-системе →
«Совершенство достигается не тогда, когда нечего добавить, а когда нечего убрать».
Читать о состояниях компонента →
Разборы для дизайнеров, продактов и разработчиков
Исследования
Исследования, которым можно доверять
Сколько респондентов нужно, какие метрики брать и как не принять шум за инсайт. Каждый вывод в статьях опирается на методику, которую можно повторить.
Читать об исследованияхПять человек находят около 85% проблем одного сценария. Подвиньте ползунок: доля найденных проблем растёт всё медленнее, поэтому выгоднее несколько коротких раундов.
Метрики
Видеть проблему раньше пользователей
SUS, HEART и успешность задач показывают, где интерфейс начал проседать. Разбираем, как настроить метрики, чтобы они подсказывали причину, а не только факт.
Читать о UX-метрикахЗавершение онбординга упало на 18% после релиза 4.2
Падение сосредоточено на iOS: новый шаг с разрешениями пропускают чаще. Android и веб без изменений.
Дизайн-системы
Дизайн-система внутри продукта
Токены задают радиусы, цвета и отступы один раз. Поменяйте значения и посмотрите, как компонент перестраивается вслед за ними.
Подписка на журнал
Раз в неделю: один разбор и один чек-лист.
Подписатьсяпочта@пример.рф
ИИ в дизайне
Ваш интерфейс или ваши агенты
Figma, Cursor и Claude уже работают в одной связке. Показываем, какие задачи можно отдать агенту, а какие решения дизайнер должен оставить за собой.
Читать об ИИ в работе«Пользователи проводят большую часть времени на других сайтах».
Читать о тестировании →
«Не заставляйте меня думать».
Читать о формах →
Весь цикл дизайна в одном журнале
Типографика
Шкала, которая держит интерфейс
Один коэффициент задаёт все размеры: от подписи до заголовка. Подвигайте ползунок и сравните, как меняется характер текста.
Читать о шкалах
Моушн
Движение, которое объясняет
Анимация показывает, откуда пришёл элемент и что изменилось. Выберите кривую и сравните: одно и то же движение ощущается по-разному.
Читать о моушне
Доступность
Доступность по умолчанию
Контраст, фокус и размер целей проверяются за минуту. Выберите цвета текста и фона: проверка по WCAG 2.2 пересчитается сразу.
Читать о WCAG 2.2
Каждый интерфейс проверен по чек-листу
Восемь проверок, которые мы проходим в каждом разборе. Полная версия с критериями лежит в PDF.
Первый экран
Понятно ли за 5 секунд, что это и что делать дальше.
Контраст
Текст не ниже 4,5:1, крупный и иконки не ниже 3:1.
Цели касания
Не меньше 24×24 px, для основных действий 44 px.
Состояния
Hover, focus, disabled, loading, error и пустое состояние.
Клавиатура
Логичный порядок Tab и видимый фокус на каждом элементе.
Типографика
Одна шкала, длина строки 60–75 знаков, без висячих предлогов.
Моушн
200–400 мс, осмысленные кривые и prefers-reduced-motion.
Ошибки
Сообщение рядом с полем: что не так и как исправить.
Свежие разборы
Все статьи
Формы, которые заполняют: поля, ошибки, маски, автозаполнение
Форма — место, где интерес пользователя превращается в действие: регистрацию, заказ, заявку. И именно здесь чаще всего теряются люди. Разберём, как…
Тёмная тема без боли: поверхности, контраст, акценты
Тёмная тема кажется простой задачей: поменять фон на тёмный, текст — на светлый. На деле она требует пересобрать систему поверхностей, акцентов и…
WCAG 2.2 на практике: контраст, фокус и размер целей
WCAG 2.2 стала рекомендацией W3C в октябре 2023 года и добавила критерии, которые напрямую касаются повседневной работы дизайнера: фокус, размер…
ИИ в работе дизайнера: где ускоряет, а где мешает
Генеративные модели уже встроены в графические редакторы, инструменты прототипирования и среды разработки. Вопрос больше не в том, пользоваться ли…
Состояния компонента: hover, focus, disabled, loading, error, empty
Компонент в дизайн-системе — это не одна картинка, а набор состояний, через которые он проходит в реальной работе. Пропущенное состояние почти всегда…
UX-метрики: SUS, HEART, task success — что и как измерять
Фраза «стало удобнее» не убеждает ни продакта, ни бизнес, пока за ней нет цифр. Но и цифры без методики легко превращаются в шум. Разберём три самых…
Дизайн-токены: от палитры до продакшена
Дизайн-токены превращают решения о цвете, отступах и типографике в данные, которые одинаково читают Figma, веб и мобильные приложения. Разберём, как…
Моушн в интерфейсе: длительность, кривые, prefers-reduced-motion
Анимация в интерфейсе нужна не для красоты, а чтобы объяснять, что произошло: откуда появился элемент, куда он ушёл, что изменилось после действия.…
Начните с аудита за 30 минут
Возьмите чек-лист и пройдите по одному сценарию своего продукта. Первые находки будут уже сегодня.
