Product / UX-UI Designer

Кто это и зачем нужен

Product / UX-UI дизайнер отвечает за то, чтобы продукт был понятным, удобным и красивым — чтобы пользователь достигал цели без трения и раздражения. UX — про логику и путь («как это работает и почему так»), UI — про визуальный язык и эмоцию («как это выглядит и ощущается»). В небольших командах это один человек.

Боль, которую он закрывает: пользователи не понимают интерфейс, бросают на полпути, заваливают поддержку вопросами «а как тут…». Дизайнер убирает трение до того, как оно станет потерянной конверсией.

Что ломается без него: интерфейс «как у разработчика получилось» — нелогичные флоу, перегруженные экраны, несогласованные кнопки, недоступность для людей с особенностями. Каждый экран изобретается заново → визуальный хаос и рост стоимости поддержки.

День из жизни

Утро. Разбирает задачу с PO: какую проблему пользователя решаем, какие сценарии. Набрасывает user flow и пару wireframe-вариантов — проверяет логику до пикселей. День. Собирает интерактивный прототип в Figma, прогоняет его на коллеге/пользователе («где затык?»), правит. Параллельно поддерживает дизайн-систему: новый компонент должен встать в общий UI-кит, а не появиться «сбоку». Вечер. Готовит хендофф для разработки: токены, состояния (hover/disabled/loading/empty/error), отступы, поведение на разных экранах. Проверяет доступность (контраст AA, размеры тач-таргетов, фокус). UX-копирайт — формулировки кнопок, ошибок, пустых состояний.

Ключевые навыки

Hard: Figma (auto-layout, компоненты, variants, прототип), информационная архитектура, типографика и сетки, дизайн-системы и токены, доступность WCAG AA, UX-копирайт, основы взаимодействия (паттерны навигации, состояния). Soft: эмпатия к пользователю, умение защищать решения данными и логикой (а не «мне так нравится»), принятие критики, коммуникация с разработкой и продуктом, насмотренность и вкус.

Артефакты, которые пишет

• Wireframes — скелет экрана без визуала, про логику.
• Прототипы — кликабельные, для проверки флоу.
• Дизайн-система / UI-кит — компоненты, токены, правила.
• Спецификация хендоффа — всё, что нужно разработчику.
• UX-копирайт — микротексты интерфейса. Связанные артефакты базы: критерии приёмки берёт из User Story; дизайн-готовность истории — часть Definition of Ready. Системность — через дизайн-систему.

Как ИИ/вайб-кодинг усиливает роль

1. Варианты экранов из текста. Промт: «Ты UX-UI дизайнер. Опиши 3 разных подхода к экрану <онбординг для контент-мейкера>: структура, ключевые элементы, на что делаем акцент, плюсы/минусы каждого.»
2. Аудит доступности. Промт: «Проверь экран на доступность WCAG AA: контраст текста к фону <цвета>, размеры тач-таргетов, состояния фокуса, альтернативы цвету как единственному сигналу. Что исправить?»
3. UX-копирайт. Промт: «Напиши микротексты для пустого состояния, ошибки загрузки и кнопки CTA на экране <…>. Тон — дружелюбный, без канцелярита, ≤ 6 слов на кнопку.»
4. Скетч → разметка. Вайб-кодинг: «Вот фото скетча интерфейса. Сгенерируй HTML+Tailwind разметку этого экрана с состояниями hover/disabled, семантическими тегами и aria-атрибутами.»
5. Проверка консистентности. Промт: «Вот список из 12 кнопок и их стилей <…>. Найди расхождения (цвет, радиус, размер, регистр) и предложи привести к 2–3 каноническим вариантам.»

Путь развития: Junior → Middle → Senior → Lead

• Junior: делает экраны по готовому флоу и системе; владеет Figma, повторяет паттерны, оформляет хендофф.
• Middle: проектирует флоу целиком, проводит юзабилити-проверки, расширяет дизайн-систему, аргументирует решения.
• Senior: отвечает за UX крупной области и его метрики, задаёт визуальный язык, ведёт исследования, наставляет.
• Lead / Head of Design: строит дизайн-процесс и систему на всю команду, нанимает, связывает дизайн со стратегией продукта.

Частые ошибки и как избежать

• Красиво, но непонятно (UI впереди UX). → Сначала флоу и логика на wireframe, потом визуал.
• Каждый экран — заново. → Дизайн-система и переиспользуемые компоненты, а не разовые решения.
• Дизайн «на вкус», без проверки. → Прогоняй прототип на живых людях, опирайся на данные.
• Игнор доступности. → Контраст AA, размеры таргетов, фокус, не только цвет как сигнал — закладывай сразу.
• Хендофф «догадайтесь сами». → Состояния, токены, отступы, поведение на разных экранах — явно.

Что освоить (мини-программа)

• Концепции: законы UX (Фиттс, Хик, Якоб), эвристики Нильсена, IA, визуальная иерархия, WCAG AA, design tokens, atomic design.
• Инструменты: Figma, FigJam/Miro, плагины (Contrast, Stark), Storybook (как живёт система в коде).
• Почитать/посмотреть: «Don’t Make Me Think» С. Круг; «The Design of Everyday Things» Д. Норман; Refactoring UI; гайдлайны Material/HIG; web-design-guidelines.

Зарплатные ориентиры (RU)

• Junior дизайнер: ~70–130 тыс ₽/мес.
• Middle дизайнер: ~130–230 тыс ₽/мес.
• Senior дизайнер: ~230–380 тыс ₽/мес.

  Зависит от грейда, города, типа продукта и года — проверяй актуальное.

Маппинг на агента Laskoff

Прямой mapsTo: designer. В Quest агент designer проектирует флоу и UI, держит дизайн-систему, делает хендофф и аудит доступности. Работает в связке со скиллами дома: frontend-design, web-design-guidelines, brand-guidelines, theme-factory. Важное правило дома: эстетика этого сервиса обязана отличаться от других проектов (правило «не сходиться»).

🤖 Промт-персона

Ты — сильный Product / UX-UI дизайнер с насмотренностью и системным мышлением. Помогаешь мне проектировать понятные и красивые интерфейсы. Всегда сначала уточняй задачу пользователя и сценарий, потом предлагай флоу, и только потом — визуал. Думай состояниями (hover/disabled/loading/empty/error), закладывай доступность (контраст AA, тач-таргеты, фокус) и системность (переиспользуемые компоненты, токены). Пиши лаконичный UX-копирайт без канцелярита. Решения аргументируй логикой и законами UX, а не вкусом. Когда прошу — давай готовую разметку (HTML+Tailwind) с семантикой и aria.