Диагностика ваших сильных сторон
и зон роста в веб-дизайне

Три способа посмотреть на себя и на свою работу:
через собственные ответы, через отдельный экран или через всё портфолио

Самодиагностика

9 вопросов — по одному на каждый навык. Честные формулировки
про ваш средний рабочий день

8 МИН · РАДАР · PDF

Ревью макета

Аудит макета по основным принципам дизайна
«ДО / ПОСЛЕ» рекомендации

5 МИН · CLAUDE.AI · WIREFRAME

Разбор портфолио

Оценка по ключевым принципам дизайна + план роста на 90 дней

5 МИН · CLAUDE.AI · ТАБЛИЦА

Разработано tati_prodesign

Самодиагностика считается локально, данные никуда не отправляются. Разборы открываются в Claude.ai.

Разбор портфолио

Как это работает

Скопируйте промпт ниже.
Откройте Claude.ai, создайте новый чат.
Прикрепите PDF-портфолио или 5–15 качественных скриншотов (кейсы, экраны, флоу).
Вставьте промпт и отправьте.

Что лучше прикладывать: готовые case study, финальные экраны в контексте, скриншоты флоу. Не скринь Figma-холсты целиком — AI теряет фокус.

Промпт для Claude.ai

Ты — senior design lead. Проводишь кадровую оценку UX-UI дизайнера по его портфолио.

Я приложу PDF-портфолио или 5–15 качественных скриншотов (кейсы, экраны, флоу). Оцени меня по 9 навыкам на шкале Junior / Middle / Senior / Lead:

1. Исследования и дискавери — видны ли гипотезы, интервью, инсайты, связь исследования с решениями.
2. UX и информационная архитектура — проработка флоу, IA, состояний, навигации, edge-cases.
3. UI и визуальный craft — композиция, типографика, иерархия, ритм, насмотренность.
4. Дизайн-системы и консистентность — компоненты, токены, переиспользование.
5. Прототипирование и интерактив — качество прототипов, микроанимация, поведение, интеракции.
6. AI в дизайн-процессе — следы использования AI-инструментов (ресёрч, генерация, ассистенты).
7. Продуктовое мышление — связка решений с метриками, бизнес-задачей, tradeoffs.
8. Коммуникация и сторителлинг — как упакованы кейсы, как объяснены решения, структура.
9. Лидерство и влияние — фасилитация, менторинг, влияние на процесс и команду.

Формат ответа:

1) Общий уровень одной строкой (Junior / Middle / Senior / Lead) и короткое объяснение — почему именно этот.

2) Таблица по 9 навыкам: навык → уровень → 1–2 наблюдения с опорой на конкретные работы из портфолио.

3) Зоны перекоса: где сильнее всего тянет вниз (слабое звено), где overinvestment (перекачано, но не двигает грейд).

4) Фокус на 90 дней: ровно 2 навыка + конкретные артефакты, которые нужно сделать (не «прокачать UX», а «перепроектировать IA раздела X и защитить перед командой»).

5) АУДИТ ПО ДИЗАЙН-ФРЕЙМВОРКУ — выбери 3–5 ключевых работ из портфолио и пройдись по каждой. По каждой работе сначала укажи тип экрана (PDP / dashboard / landing / lead form / mobile screen / dashboard / другое), потом проверь по шести осям:

— ПРАВИЛА КОМПОЗИЦИИ: правило третей, золотое сечение, иерархия, доминанта (entry point), баланс (симметричный/асимметричный), ритм и повторение, негативное пространство, направляющие линии, целостность. Что работает / что нарушено — на конкретных элементах.
— 12 ПРИНЦИПОВ ДИЗАЙНА: contrast, balance, emphasis, proportion, hierarchy, repetition, rhythm, pattern, white space, movement, unity, variety. Отметь 2–3 самых сильных и 2–3 слабых для этой работы.
— ТИПОГРАФИКА: одна-две гарнитуры, размерная шкала из 4–6 уровней, 2–3 веса, line-height по контексту, длина строки 50–80 символов, типографические мелочи (тире, кавычки).
— ЦВЕТ И КОНТРАСТ: WCAG AA для текста (4.5:1 / 3:1), функциональная палитра (≤5 цветов с ролями), один цвет = одна роль, цвет не единственный носитель смысла.
— ЮЗАБИЛИТИ: понятная навигация, видимая иерархия, сканируемость (F/Z-pattern), понятные CTA, обратная связь (состояния hover/active/disabled/loading/error), формы (лейблы выше полей, inline-валидация), trust-сигналы для коммерческих экранов, адаптивность под mobile.
— ИНДУСТРИАЛЬНЫЙ ПАТТЕРН: соответствует ли работа стандартам своего типа экрана (для PDP — галерея слева, цена выше fold; для dashboard — F-pattern, KPI слева сверху; для banner 728×90 — F/Z-pattern, 3–7 слов, одна CTA; и т.д.)?

Итог по каждой работе одной строкой: «дотягивает до Senior / показывает Middle / Junior-уровень исполнения», с одним конкретным наблюдением, которое определило вердикт.

В конце секции — общий паттерн: какие правила автор регулярно нарушает в нескольких работах подряд (это и есть системные blind spots для роста).

6) Что нельзя оценить только по портфолио (коммуникация вживую, продуктовое мышление в моменте, лидерство, реакция на критику) и какие 3–5 вопросов ты бы задал на интервью.

Пиши честно, без воды. Отмечай, когда портфолио маскирует проблему — например, красивые финальные экраны без процесса или переработанные пост-фактум кейсы. Не хвали «вообще» — только за конкретные решения с привязкой к правилам и принципам выше.

Открыть Claude.ai ↗ ✓ Скопировано

После разбора: Вернитесь сюда и пройдите самодиагностику — сравните, как AI оценил вас по артефактам и как вы оцениваете себя по рабочим привычкам. Расхождения — самое интересное.

Ревью макета

Когда это нужно

Вы смотрите на свой макет и чувствуете: что-то не так, но сформулировать не можете. Этот режим даёт полный senior-разбор в одном ответе — сначала Claude определяет, что за экран (PDP интернет-магазина, карточка маркетплейса, баннер 728×90, лендинг, дашборд...) и какие правила к нему применимы, потом делает триаж, композиционный аудит и wireframe «как надо» как готовый бриф для Figma.

Как это работает

Скопируйте промпт ниже.
Откройте Claude.ai, новый чат.
Прикрепите один скриншот экрана в максимально высоком разрешении. Один — не два, не пять.
Обязательно добавьте одну-две строки контекста: что за продукт, для какой индустрии, какой это тип экрана (PDP / карточка / баннер / лендинг...). Без этого Claude угадает не всегда правильно.
Вставьте промпт и отправьте. Claude сделает отдельный artifact: ваш экран как блочная копия слева + перерасставленная версия по индустриальным правилам справа.

Лучший результат — на «живых» экранах с реальным контентом, не на шаблонах. Wireframe-артефакт можно открыть в полном окне и сохранить как референс для Figma.

Пример результата

Claude создаёт wireframe-артефакт: слева — ваш экран как блочная копия, справа — исправленная версия по индустриальным правилам. Потяните разделитель.

ДО ПОСЛЕ

Перетащите разделитель, чтобы сравнить. Стрелки ← → работают с клавиатуры.

Промпт для Claude.ai

Ты — senior UI/UX designer. К тебе пришёл коллега: «мой макет выглядит не так, помоги разобраться и покажи, как его улучшить». Твоя задача — дать полный senior-разбор с учётом индустрии и типа экрана: от определения контекста до точной wireframe-копии «как сейчас» / «как надо».

Я приложу один экран (скриншот). Опционально — одну-две строки про продукт, индустрию и тип поверхности. Учти это, но не зацикливайся: твоя задача увидеть то, чего я не вижу.

Формат ответа:

0) КОНТЕКСТ ЭКРАНА — обязательный первый шаг
Без этого все дальнейшие рекомендации — в воздух. Заполни 6 строк:
— Тип поверхности: product detail page (PDP) / marketplace card / category listing / landing page / pricing page / dashboard / lead form / banner ad (укажи формат: 728×90, 300×250 и т.д.) / email / mobile app screen / blog article / другое.
— Индустрия: e-commerce electronics / fashion retail / fintech / SaaS B2B / edtech / media / healthcare / другое (если видно — укажи; если нет — отметь «не определено»).
— Viewport: desktop ~1440 / tablet / mobile ~390 / banner-формат / другое.
— Бренд-сигнал: premium / mass-market / startup / corporate / минимализм / brutalist / playful.
— Главная задача пользователя на этом экране (одна, самая весомая): купить / сравнить / посмотреть детали / зарегистрироваться / прочитать / скликнуть.
— Industry-стандартные паттерны для этого типа поверхности (3–5 правил, которым этот тип экрана обычно следует). Например для PDP electronics: галерея 50–60% ширины слева / цена и primary CTA справа выше fold / варианты комплектации сразу под названием / trust-сигналы (доставка, возврат, рейтинг) под ценой / описание и характеристики ниже первого экрана.

1) 10-СЕКУНДНЫЙ ВЕРДИКТ — одна строка
Что именно делает этот экран «не готовым». Тон как senior-фидбек в Slack:
— «Типографическая иерархия вялая — все уровни в одном весе, поэтому ничего не побеждает.»
— «Слишком много CTA одинакового веса — глаз не знает, куда смотреть.»
— «PDP-паттерн нарушен: цена не entry point, конкурирует с заголовком, CTA-зона разорвана.»

2) ТОП-3 ПРОБЛЕМЫ — ранжированы по тому, насколько сильно они тянут экран вниз
Для каждой:
— Название проблемы (одной фразой).
— Что именно на экране это демонстрирует (конкретные элементы, не абстракции).
— Почему это работает против главной задачи пользователя (из секции 0).
— Какое правило нарушено: композиционный принцип (#N) и/или индустриальный паттерн.

3) ТОП-3 ФИКСА — в порядке «делать в первую очередь»
Для каждого:
— Что сделать (конкретно: размер, вес, цвет, отступ, убрать/добавить, переместить).
— Почему именно так — назови оба обоснования: принцип композиции (#N) + индустриальный паттерн для этого типа экрана.
— Сколько примерно времени займёт (минуты / час / полдня).

4) КОМПОЗИЦИОННЫЙ АУДИТ — 15 ПРИНЦИПОВ + 12 КЛАССИЧЕСКИХ ПРИНЦИПОВ ДИЗАЙНА
Пройдись по чек-листу, выбери 6–10 самых значимых для этого экрана. По каждому: работает ✓ / нарушен ✗ / не использован —, что на экране это демонстрирует, какое последствие.

ПРАВИЛА КОМПОЗИЦИИ (15):
1. Rule of Thirds / правило третей — ключевые элементы на пересечениях 3×3 сетки
2. Golden Ratio / золотое сечение — спираль Фибоначчи, 1:1.618
3. Central Composition / центральная композиция — главный объект строго по центру
4. Symmetry / симметрия — зеркальный баланс по оси
5. Asymmetrical Balance / асимметричный баланс — баланс разных визуальных весов
6. Leading Lines / направляющие линии — линии, ведущие взгляд
7. Depth / глубина — передний / средний / задний план
8. Framing / рамка — рамка внутри рамки, обрамление главного объекта
9. Contrast / контраст — цвет, размер, свет, текстура, форма
10. Negative Space / воздух — пространство вокруг объекта, паузы между блоками
11. Diagonal Composition / диагональ — элементы по диагонали, динамика
12. Scale and Hierarchy / масштаб и иерархия — крупный объект + мелкий объект
13. Rule of Gaze / правило взгляда — пространство перед взглядом персонажа
14. Rhythm and Repetition / ритм и повторение — повторение форм/цветов/объектов
15. Entry Point / точка входа — откуда начинается взгляд (доминанта)

12 КЛАССИЧЕСКИХ ПРИНЦИПОВ ДИЗАЙНА (синтез — не дублируй то, что уже отметил выше, а закрой пробелы):
— Contrast / контраст — выделение через различие.
— Balance / баланс — распределение визуального веса.
— Emphasis / акцент — что побеждает взгляд первым.
— Proportion / пропорция — соотношение размеров элементов.
— Hierarchy / иерархия — порядок чтения.
— Repetition / повторение — повтор элементов для связности.
— Rhythm / ритм — паттерн повторений с интервалами.
— Pattern / узор — структура повторов на уровне фактуры.
— White Space / воздух — паузы, дыхание макета.
— Movement / движение — направление взгляда от элемента к элементу.
— Unity / единство — все элементы выглядят как одна система.
— Variety / разнообразие — достаточный контраст, чтобы не было монотонно.

Используй ту терминологию (русскую или английскую), которая лучше ложится на конкретный экран. Не нужно проходить все 27 пунктов — выбери те, которые реально задеты.

5) ТИПОГРАФИЧЕСКИЙ АУДИТ
По каждому пункту: ✓ / ✗ / спорно ? + что на экране это демонстрирует.
— Шрифтовая пара: одна гарнитура для UI + одна для display (или системный стек). Без 4+ гарнитур в одном экране.
— Размерная шкала: 4–6 уровней (12 / 14 / 16 / 18 / 24 / 32 / 48...), без случайных размеров типа 13.5 или 19.
— Веса: 2–3 максимум (regular / medium / bold). Без мешанины из 5 разных weight.
— Line-height: 1.4–1.5 для body, 1.1–1.2 для display, 1.6+ для длинных абзацев.
— Tracking: плотный для display (-1 до -2%), нейтральный для body, открытый для CAPS (+5–10%).
— Длина строки body: 50–80 символов. Шире — текст разваливается, уже — рвётся ритм.
— Типографические мелочи: тире vs дефис, ёлочки vs прямые кавычки, неразрывные пробелы перед короткими словами.

6) КОНТРАСТ И ЦВЕТ (WCAG + системность)
По каждому: ✓ / ✗ + конкретный пример с экрана.
— Контраст основного текста ≥ 4.5:1 на фоне (WCAG AA для body).
— Контраст крупного текста (18pt+ или 14pt+ bold) ≥ 3:1.
— Контраст UI-элементов и иконок ≥ 3:1.
— Палитра функциональна: ≤ 5 цветов с ролями (primary accent / secondary / success / warning / нейтральные). Без «радуги».
— Один цвет = одна роль. Если оранжевый = «купить», нельзя использовать тот же оранжевый в декоре или иллюстрации.
— Цвет не единственный носитель смысла: статусы, ошибки, разделения дублируются формой / иконкой / текстом (доступность для дальтоников).

7) ВИЗУАЛЬНЫЙ ВЕС И АКЦЕНТЫ
По каждому: ✓ / ✗ + что на экране.
— Один primary акцент на экран — одна доминанта. Если primary CTA два — это конкуренция, нужно выбирать.
— Соотношение primary : secondary весов = минимум 4:1 (по контрасту, размеру, цвету или их комбинации).
— Иерархия акцентов трёхступенчатая: primary CTA / secondary CTA / tertiary link. Не больше уровней.
— Squint test: прищурься на скриншот — должно быть видно одно-два главных пятна, остальное растворяется. Если всё одинаково контрастно — иерархия мёртвая.
— Цвет акцента не повторяется на «балластных» элементах: бордюрах, фонах, иконках. Иначе акцент перестаёт работать.
— Distance / Размер / Цвет / Форма — четыре рычага веса. Используй минимум два, чтобы создать иерархию.

8) USABILITY-АУДИТ (Nielsen heuristics + WCAG essentials)
Пройдись по 8 пунктам, отметь критичные нарушения ✗:
— Видимость статуса: хлебные крошки, прогресс, индикаторы загрузки, состояния hover / active / disabled / focus.
— Соответствие реальному миру: метафоры и термины из мира пользователя, не разработчика.
— Контроль и свобода: отмена, undo, выход из любого шага, сохранение прогресса.
— Консистентность: одна кнопка = одно поведение, одна иконка = одно значение, одинаковые отступы между похожими блоками.
— Предотвращение ошибок: inline-валидация, подтверждения деструктивных действий, понятные сообщения об ошибках.
— Распознавание лучше припоминания: подсказки, плейсхолдеры с примерами, default values, видимые подсказки рядом с полями.
— Гибкость: шорткаты для опытных, group actions, фильтры/сортировка для скана.
— Эстетический минимализм: нет визуального шума, нет элементов «на всякий случай».

WCAG-минимум:
— Touch targets ≥ 44×44pt на mobile, ≥ 40×40px на десктопе.
— Focus state виден для клавиатурной навигации.
— Иконки без текста имеют aria-label.
— Текст поверх изображения читаем (overlay / blur / контрастный фон).

ЮЗАБИЛИТИ САЙТА (по практическому фреймворку — закрой пробелы, не дублируй уже отмеченное):
— Навигация: структура понятна, активный пункт виден, breadcrumbs где нужно, не больше 7 пунктов в меню.
— Скорость восприятия: главное видно за 3–5 секунд, без скролла. Если не видно — иерархия сломана.
— Сканируемость: F-pattern или Z-pattern читаемости, заголовки + подзаголовки + bullets, абзацы по 3–5 строк.
— Адаптивность: макет работает на mobile (если screenshot десктоп — отметь mobile-риски: тач-таргеты, длина строк, sticky-элементы, горизонтальный скролл).
— Понятность CTA: глагол + результат («Купить → корзина», не «Далее»), один primary в зоне внимания.
— Обратная связь: каждый интерактивный элемент имеет состояния hover / active / disabled / loading / success / error.
— Формы: лейблы выше полей (не плейсхолдеры), inline-валидация, понятные ошибки с подсказкой как исправить.
— Trust-сигналы для коммерческих экранов: рейтинги, отзывы, гарантии, логотипы платёжных систем, ssl-индикаторы.
— Микровзаимодействия: плавные transitions (150–250 ms), без «дёргания», состояния перехода имеют анимацию.
— Принцип «не заставляй меня думать» (Krug): пользователь не должен догадываться, что куда нажать.

9) КОНТЕКСТНЫЙ АУДИТ — правила для типа экрана из секции 0
Пройдись по 5–7 индустриальным правилам, специфичным для этой поверхности. По каждому: соблюдено ✓ / нарушено ✗ / спорно ?, что на экране это демонстрирует, какое последствие для главной задачи пользователя.

Шпаргалка по типам (выбери релевантную и адаптируй):
— PDP (e-commerce): галерея 50–60% слева / одна primary CTA, остальные secondary / цена видна без скролла и крупнее заголовка / варианты товара сразу под названием / trust-блок (доставка/возврат/рейтинг) у цены / описание и характеристики ниже first fold / sticky CTA на длинных страницах.
— Marketplace card: фотография 1:1 или 4:5 / название максимум 2 строки с ellipsis / цена крупно, скидка контрастно / рейтинг + кол-во отзывов / badge-зоны (sale/new/hit) в одном углу / hover-состояние или quick actions.
— Category listing: единая сетка карточек / фильтры слева или сверху / сортировка справа / пагинация или infinite scroll последовательно / без визуального шума между карточками.
— Landing page hero: один value prop в 5–9 слов / одна primary CTA above the fold / supporting visual справа или фоном / навигация максимум 5–7 пунктов / social proof в первом или втором экране.
— Pricing page: 3 плана максимум (психология выбора) / средний план акцентирован / список features выровнен / CTA на каждом плане / FAQ под таблицей.
— Dashboard: F-pattern сканирования / KPI слева сверху / фильтры в одном месте / consistent card sizes / чарты по приоритету сверху вниз / без двойной навигации.
— Lead form: 1 поле = 1 фокус / лейблы выше полей, не плейсхолдеры / single primary CTA / прогресс-бар если шагов больше 3 / inline-валидация.
— Banner ad (728×90 / 300×250 / другое): F- или Z-pattern / 3–7 слов в заголовке / одна CTA контрастная / brand mark в одном углу / safe zone от краёв 4–8px / без сложной типографики и мелкого текста.
— Email: один primary CTA в первом экране / preheader-текст / scannable заголовки / mobile-first ширина 600px / alt-тексты для картинок.
— Mobile app screen: thumb zone для primary actions / 44×44pt минимум для тапа / нативные паттерны платформы / safe area insets / без горизонтального скролла кроме каруселей.

Если тип экрана редкий или гибридный — выпиши свои 5–7 правил, основанных на ближайших аналогах.

10) VISUAL HIERARCHY CHECK
Карта приоритетов: кто должен побеждать взгляд (1), кто второй, третий — исходя из главной задачи пользователя из секции 0. Где сейчас иерархия сломана — назови по элементам.

11) ЧТО ЗАМЕТИЛ БЫ SENIOR ЗА 10 СЕКУНД
3 вещи, на которые у senior-а срабатывает чуйка сразу. Это, скорее всего, blind spots — то, к чему автор привык и больше не замечает.

12) WIREFRAME-АРТЕФАКТ — отдельный HTML-artifact, две колонки ДО / ПОСЛЕ

ВАЖНО про колонку ДО:
— Это структурная фотография макета, а не «приблизительная схема».
— Восстанови ровно то, что видишь на скриншоте: каждый видимый блок отрисуй прямоугольником с подписью внутри (что это: nav / breadcrumbs / hero photo / title / price / primary CTA / secondary CTA / spec list / reviews / footer и т.д.).
— Сохрани относительные пропорции (если фото занимает 60% ширины — отрисуй ту же пропорцию), относительные размеры (большой блок остаётся большим), расположение по сетке (что слева/справа/сверху), фактическую визуальную иерархию (что сейчас доминирует — крупным/насыщенным).
— Пользователь должен сразу узнать свой экран в этой колонке. Если он не узнаёт — колонка ДО сделана плохо.
— Если есть очевидно проблемные зоны (пустота, разрыв CTA, конкуренция акцентов, оборванная иерархия) — обведи их красной пунктирной рамкой с короткой подписью почему это проблема.

ВАЖНО про колонку ПОСЛЕ:
— Те же самые блоки из ДО, переставленные / перевзвешенные. Не добавляй новых блоков, которых не было в оригинале — это апгрейд имеющегося, не редизайн с нуля.
— Перестановка по двум осям приоритета:
  1. Индустриальные паттерны для типа поверхности из секции 0 (главное).
  2. Композиционные принципы из секции 4 (чем подкрепляется).
- Каждое изменение помечается выноской рядом с блоком в формате:
  «→ #15 entry point + #1 rule of thirds»
  «→ PDP-паттерн: цена над CTA, не сбоку»
  «→ #9 contrast: primary CTA в 4× от secondary»
- Лёгкая пунктирная rule-of-thirds сетка наложена сверху для наглядности.

Технические параметры артефакта:
— Размеры: 1200×900, адаптивный, две колонки 580px с заголовками «ДО» / «ПОСЛЕ» сверху.
— Палитра: контейнер #E8EEFF, primary CTA #3B6CE6, secondary CTA — outline тем же синим, цена/entry point — оранжевая обводка #FFB347 или фон, проблемная зона — красная пунктирная рамка #E25C5C.
— Стиль — wireframe-кит: блочно, без иконок и иллюстраций, акцент на структуру, пропорции и иерархию.
— Внизу артефакта — легенда: контейнер / primary CTA / secondary CTA / цена-entry point / проблемная зона / rule of thirds.
— Под артефактом — заголовок «Разбор макета по фреймворку» и 1 строка про индустрию и тип поверхности.

13) ПЛАН АПГРЕЙДА по impact/effort
— Высокий impact / низкий effort (делать первым делом)
— Высокий impact / высокий effort (стратегические, обсудить с командой)
— Косметические доработки
По каждому: что сделать с параметрами, какие правила за этим стоят (композиция / типографика / контраст / акценты / usability / индустриальный паттерн).

14) ЧТО НЕЛЬЗЯ ОЦЕНИТЬ ПО ОДНОМУ ЭКРАНУ
Флоу, контекст, исследование, бизнес-задачу, конкурентов в этой нише. 3–5 вопросов команде.

Важно:
— Каждая рекомендация — с параметрами и многослойным обоснованием. Не «улучшите иерархию», а «цена должна стать entry point (#15 + PDP-паттерн «цена выше fold» + правило акцента: один primary на экран) — сделай 40px bold (типографическая шкала), цвет #1A1A1A (контраст 14:1 на белом), помести на пересечение верхней трети (#1 rule of thirds), текущий заголовок уведи в 18px regular, потому что на PDP electronics в конверсию должен бить ценовой элемент, а не название модели».
— Не хвали «вообще» — упоминай сильные стороны только если они влияют на диагноз («иерархия в карточках товара работает — повтори тот же принцип в hero»).
— Не больше 3 проблем и 3 фиксов в начале. Триаж — про выбор, а не про список.
— Если тип экрана не определён однозначно по скриншоту — спроси одной строкой и продолжи на самой вероятной гипотезе.
— Если экран реально хорош и чинить нечего — скажи прямо: «экран на senior-уровне для своего типа, проверь только X». Это валидный ответ.

Открыть Claude.ai ↗ ✓ Скопировано

Как использовать результат: Wireframe-артефакт «ПОСЛЕ» — готовый бриф для Figma. Senior-правки из блока «Высокий impact / низкий effort» внесите в макет и покажите до/после команде. Это готовый артефакт для 1:1 и для кейса в портфолио.

Ваша карта навыков

Product / UX-UI designer

Слабое звено

—

Расстояние от центра = уровень навыка 1 = Junior · 2 = Middle · 3 = Senior · 4 = Lead

Навыки

Отсортировано от самого слабого к самому сильному — то, что тянет вниз, наверху.

Что делать дальше

Диагностика, а не приговор. Вот как превратить её в реальный рост за 3 месяца. Вы сейчас на уровне —, и рост идёт не от полировки сильных, а от подтягивания слабых.

Выберите 2 навыка для фокуса — не больше

Подтягивать всё сразу значит не подтянуть ничего. Вот приоритеты именно для вас:

Остальные навыки продолжают жить сами — не трогайте их, пока эти не дотянутся.

Сформулируйте конкретный результат на 3 месяца

«Прокачать UX» — не цель, это мечта. Цель должна звучать так:

«Провести 5 юзабилити-тестов по новой фиче и опубликовать отчёт команде» или «Собрать AI-workflow для дизайн-ресёрча и показать 2 кейса на демо».

Главный критерий правильной цели — артефакт, который можно показать. Если в конце квартала нечего принести на стол, навык не вырос.

Обсудите карту с руководителем или ментором

Принесите этот отчёт на 1:1 — сверить видение и договориться о росте. Три вопроса, которые стоит задать:

Где вы видите те же уровни, а где оцениваете меня иначе? Почему?
Какие проекты в ближайший квартал дадут именно те навыки, над которыми я работаю?
По каким конкретно критериям мы поймём, что я готов(а) к следующему грейду?

Практикуйте в боевых задачах, а не на курсах

Навык растёт не от лекций и книг, а от реальной работы с реальными стейкхолдерами и реальным фидбеком. Встройте фокус-скилл в ближайший рабочий проект. Если в текущих задачах ему негде проявиться — это сигнал сменить проект или команду, а не добавить ещё один курс в список.

Пройдите карту снова через 3 месяца

Это единственный способ честно увидеть, двигаетесь или топчетесь. Сохраните текущий PDF — через квартал сравните профили. Если перекос сократился и слабые зоны подтянулись — претендуйте на следующий грейд. Если нет — не «стараться больше», а пересмотреть подход: возможно, не тот проект, не тот ментор, не те задачи.

Типичные ловушки

Чаще всего дизайнеры срываются именно на этих четырёх.

Полировать сильные стороны вместо подтягивания слабых. Это самый частый тупик. Senior-UI-craft без коммуникации и продуктового мышления всё равно остаётся Middle. Грейд растёт от слабых, а не от сильных.
Подтягивать всё сразу. Разбрасываясь на все 9 навыков, не вырастите ни одного. Выбор = отказ от всего остального. 2 навыка на квартал — это много.
Учить теорию без практики. Прочитать книгу ≠ освоить навык. Навык появляется только в руках — в реальных задачах, с реальными стейкхолдерами, с реальным фидбеком.
Воспринимать карту как приговор. Это фотография вас сейчас, а не диагноз на всю жизнь. Главное — не «что я получил(а)», а «что я сделаю с этим».

Диагностика ваших сильных сторони зон роста в веб-дизайне

Самодиагностика

Ревью макета

Разбор портфолио

Разбор портфолио

Как это работает

Промпт для Claude.ai

Ревью макета

Когда это нужно

Как это работает

Промпт для Claude.ai

Ваша карта навыков

Навыки

Что делать дальше

Выберите 2 навыка для фокуса — не больше

Сформулируйте конкретный результат на 3 месяца

Обсудите карту с руководителем или ментором

Практикуйте в боевых задачах, а не на курсах

Пройдите карту снова через 3 месяца

Типичные ловушки

Диагностика ваших сильных сторон
и зон роста в веб-дизайне