Дизайн

Начальный20-40 мин

Дизайн пустого состояния

Не «пусто», а возможность объяснить ценность и направить к первому действию.

uiempty-stateonboarding

Карта пользовательского пути

От триггера до достижения цели: шаги, эмоции, барьеры, возможности.

uxjourneyresearch

Декомпозиция фичи в user stories

Разбить фичу на маленькие истории формата «As a … I want … so that …» с acceptance criteria.

uxuser-storiesproduct

Дизайн-токены из референса

Извлечь систему цветов, типографики, теней, радиусов и spacing из примера и оформить как токены.

design-systemtokenscss

design-systemdocumentationcomponents

Документация компонента

Документация по компоненту: API, варианты, состояния, доступность, использование.

Гайд по тону голоса бренда

Определить голос бренда через атрибуты, антипримеры и шаблоны типичных коммуникаций.

brandingvoicetone

Исследование нейминга

Сгенерировать 20-30 кандидатов в разных категориях и оценить по критериям.

brandingnaming

Дизайн loading-состояний

Скелетоны, спиннеры, прогресс-бары: что когда применять и как не раздражать.

uiloadingskeleton

Информационная архитектура

Группировка контента в навигационное дерево, тестирование через card-sort, выбор IA-паттерна.

uxianavigation

Дизайн ошибок и edge-состояний

Все способы как может пойти не так: формы, сеть, авторизация, лимиты — и что показывать.

uxerrorsedge-cases

Иконочная система

Набор, вес, размеры, правила использования, accessibility — иконки как система, не разнобой.

design-systemicons

design-systemdark-modetheming

План внедрения тёмной темы

Не «инвертируй цвета», а отдельная палитра: токены, контраст, тени, иллюстрации.

brandingpositioningstrategy

Позиционирование продукта

Одна формула: для [кого] · которые [боль] · продукт — это [категория] · который [ценность] · в отличие от [альтернатив].

Слоганы и тэглайны

20-30 кандидатов в трёх режимах: функциональный, эмоциональный, провокационный.

brandingtaglineslogan

motionmicrointeractionsanimation

Микроанимации интерфейса

Hover, focus, активные состояния, toast'ы, переходы — мелкая моторика интерфейса.

motiontransitionsnavigation

Переходы между страницами

Когда нужны, какие выбрать, как не сделать сайт «торчащим».

Easing и тайминг анимаций

Кривые easing для разных случаев, длительности, ритм — почему «всё ease-in-out 300ms» это плохо.

motioneasingtiming

responsivebreakpointslayout

Продвинутый15-30 мин

Стратегия брейкпойнтов

Не «3 устройства», а содержательные точки. Где менять layout и зачем.

responsivemobile-firstrefactor

Mobile-first рефакторинг

Перевод desktop-first дизайна на mobile-first без полной переделки.

Touch vs hover паттерны

Что работает с пальцем, что с курсором — и как сделать чтобы работало везде.

responsivetouchhover

Подбор пары шрифтов

Headline + body шрифт которые работают вместе. Принципы, примеры, проверка.

typographyfontspairing

Вертикальный ритм типографики

Line-height, spacing, baseline grid — текст который дышит и читается.

typographyspacingrhythm

Типографика для кириллицы

Чем кириллица отличается от латиницы, какие шрифты с ней работают, что не работает.

typographycyrillici18n

Пустые состояния: три режима и иерархия CTA

Разведи first-run, no-results и error в три разных дизайна с правильной иерархией действий.

uiempty-statecta

Микро-взаимодействия в формах

Focus, валидация, успех, восстановление: тайминг и поведение полей шаг за шагом.

Построение цветовой системы

От raw-палитры к семантическим токенам, темам и контрасту — с проверкой на edge-кейсах.

design-systemcolortokens

design-systemspacingrhythm

Spacing scale и вертикальный ритм

Базис 4/8, шкала отступов, вертикальный ритм типографики и допустимые исключения.

Оркестрация loading-состояний

Skeleton vs spinner vs progressive: бюджет тайминга, выбор техники, переходы без скачков.

uiloadingperformance

Онбординг за 3-5 шагов до первого value

Карта первого ценного момента, friction map, drop-off recovery — без длинных туров.

uxonboardingactivation

Mobile-first rethink: переосмыслить desktop-макет

Не просто 'сжать' desktop — пересмотреть IA, навигацию и прогрессивно усложнить от мобильного к большому экрану.

responsivemobile-firstia

Featured

Аудит раскладки и группировки блоков

Прогон страницы через «старший дизайнер видит её впервые»: где раскладка проседает, что объединить, что разделить, что переставить — с конкретными ходами, а не «надо подумать».

layoutcompositionaudit

Modal vs Drawer vs Bottom-Sheet — что выбрать

Decision matrix для выбора overlay-паттерна по контексту, частоте, фокусу и mobile-поведению. Без шаблонного «modal для всего».

uimodaldrawer

Дизайн плотной таблицы данных

Спецификация для рабочей таблицы: sticky-заголовки, sort/filter, row actions, режимы плотности, поведение на mobile. Без «впихиваем спредшит».

uitabledata

Иерархия информации на дашборде

Что показать первым, что вторым, что вообще убрать. Hero-метрика, comparison, trends, actions — без «13 виджетов и пользователь сам разберётся».

uidashboardhierarchy

Выбор навигации: sidebar / tabs / breadcrumbs / mega-menu

Какой паттерн навигации работает для какой структуры. Когда комбинировать, когда конфликт, что унесёт пользователя в тупик.

uinavigationia

Cmd+K command bar — спецификация UX

Командная палитра, которая реально ускоряет работу: ranking, секции, shortcuts, recently used, empty state, fuzzy match. Без «поиск с симпатичной анимацией».

uicommand-barcmd-k

Система нотификаций и toast'ов

Таксономия по 6 типам, позиция, время жизни, dismiss, a11y, stacking. Без «спам зелёных тостов на каждый клик».

uinotificationstoast

Дизайн поискового поля и подсказок

Что в placeholder, как показывать recents, как обрабатывать no-results и did-you-mean, scope-chips. Поиск, который реально находит.

uisearchinput

Дизайн фильтров и сортировки

Chips vs facets vs sidebar — что выбрать. Multi-select UX, applied-state, reset, persist в URL. Без «гнусной collapsible-панели слева».

uifilterssort

Карточки: плотность и ритм сетки

Compact / comfortable / cozy режимы карточек. Ритм grid'а, иерархия внутри карточки, что вынести наружу. Без «padding на глаз».

uicardsdensity

Деконструкция hero-секции: promise, proof, action

Что юзер видит в первые 5 секунд. Promise / proof / action — три части, без которых hero не работает. Жёсткий разбор и план переделки.

uiherolanding

Выбор из N опций: дизайн UI решения

Спецификация интерфейса для выбора из 3+ вариантов: comparison table, recommendation, smart default. Без «вот тебе 7 кнопок, удачи».

uxdecisioncomparison

Многошаговая форма: дизайн UX

Прогресс, save-state, back-поведение, validation timing, recovery после ошибки. Без «5 шагов и потерянные данные на refresh».

uxformwizard

Autosave: спецификация UX

Когда сохранять (debounce / blur / interval), как индицировать (saved / saving / error), conflict resolution. Без «иногда теряется, мы исследуем».

uxautosavepersistence

Дизайн undo / redo: что отменяемо, как, до куда

Scope (per-action / per-session), timeline UI, keyboard, что НЕ должно быть undoable. Без «undo есть, но не для всего».

uxundoredo

Подтверждение destructive-действий

Типы (delete / leave / cancel / destroy), inline vs modal, type-to-confirm, undo как альтернатива. Без «Are you sure?» на каждый клик.

uxdestructiveconfirm

UX страницы результатов поиска

Ranking signals на UI, snippets, no-results, did-you-mean, refinement. Что делать, когда поиск нашёл 47 000 результатов, и юзер хочет один правильный.

uxsearchresults

uxpaginationinfinite-scroll

Infinite scroll vs pagination: что выбрать

Decision matrix по контексту контента, deep linking, accessibility, back-button, performance. Без «бесконечный скролл потому что современно».

Дизайн view для сравнения объектов

Таблица / cards / overlay — что выбрать. Sticky колонки, mobile collapse, highlight отличий. Без «открой 2 вкладки и переключайся».

uxcomparisoncompare

design-systemnamingconvention

Конвенция имён компонентов

Система имён: Button / IconButton / ButtonGroup, префиксы Base/With/As, namespacing, борьба с MyButton2 и дубликатами.

design-systemdeprecationmigration

Процесс депрекации компонента

Пометить deprecated (badge, console warn, types), дать миграцию (codemod, before/after), удалить. Версии, support window, коммуникация.

design-systemthemingtokens

Темизация дальше тёмной темы

Multi-theme: бренд-темы, density modes, accessibility modes. Стратегия токенов, переключение, что не масштабируется.

design-systemreviewchecklist

Чеклист ревью нового компонента

Что проверить перед мержем компонента в design system: API, a11y, RTL, тёмная тема, минимизация props, docs, story, тесты.

design-systemtokensmigration

План миграции дизайн-токенов

Рефактор существующих токенов без поломок прод-компонентов: codemod, opt-in flag, deprecation window, коммуникация.

Продвинутый2-4 часа

Стратегия prefers-reduced-motion

Что отключать полностью, что заменять на fade, как тестировать и какие элементы НИКОГДА не должны быть motion-зависимыми.

motionaccessibilitya11y

Stagger reveal списков: оркестровка

Тайминг 60-100ms между элементами, easing, max-batch 12, performance-бюджет и accessibility.

motionstaggerlists

motionscrollintersection-observer

Scroll-triggered анимации без боли

Когда триггерить (% viewport), Intersection Observer pattern, INP impact, что НЕ делать — parallax длинных страниц, locked scroll.

Performance-бюджет для motion

60 FPS на mid-range mobile, INP < 200ms, optimization checklist: transform-only, will-change по уму, GPU layers, composite.

motionperformancefps

responsivecontainer-queriescss

Container queries: где @container побеждает @media

Когда переходить с viewport-брейкпойнтов на контейнерные. Конвенции именования, fallback, реальные сценарии.

responsivetypographyclamp

Fluid typography через clamp(): формула и edge cases

Шрифты и spacing, которые сами масштабируются без брейкпойнтов. Как считать preferred, что НЕ клампить, accessibility.

Density modes: переключатель comfortable / cozy / compact

Как у Linear и Notion: переключатель плотности интерфейса. Token strategy, что НЕ масштабировать, сохранение preference.

responsivedensitytokens

typographytabular-numstables

Tabular nums для таблиц и данных

Где обязательны tabular-nums, как включить через font-feature-settings и font-variant-numeric, fallback-стек и как проверить выравнивание колонок.

Настройка шкалы заголовков (clamp, tracking, leading)

Типографическая шкала h1-h6 на clamp(), правильные tracking и leading на каждом размере, тест на длинных русских словах без переноса в неудобном месте.

typographyheadlinesclamp

Multilingual font stack: Cyrillic / CJK / Arabic

Fallback chain для проекта с несколькими письменностями: что грузить, что брать из системы, как тестировать отсутствие tofu (□).

typographyfontscyrillic

brandingbrand bookguidelines

Аудит и проектирование brand book

Что должно быть в живом brand book, что выкинуть, как держать его актуальным и как использовать в ревью.

orchestratordesign-systemtokens

Прогон текстов через tone-of-voice критерии

Пропустить 20 реальных текстов через критерии формальности, ритма, словаря, эмоции и табу. Получить отчёт с оценками и правками.

Дизайн-система от нуля до Storybook

Orchestrator: дизайн-система за один проход. 7 фаз: audit → tokens → primitives → components → docs → Storybook → governance. Готовый стартер на TypeScript + Tailwind.

Продвинутыйдень+ (план за 1 день, импл по фазам)

Featured

Оркестратор редизайна страницы (7 фаз)

Полный цикл редизайна одной страницы: от анализа текущей версии до плана измерения результата. 7 фаз с чёткими артефактами на каждой.

redesignuxprocess

accessibilitya11yinclusive design

Продвинутыйдень+

A11y-дизайн за пределами WCAG-чеклиста

Доступность как часть UX, а не как чеклист в конце. Когнитивная, моторная, низкое зрение, нейроразнообразие, инклюзивные дефолты.

illustrationbrandingvisual system

Продвинутыйдень+

Иллюстрационная система

Дизайн системы иллюстраций: палитра, геометрия, люди/без, соотношение к фото, правила масштабирования и консистентности.

photographyart directionbranding

Среднийдень+

Арт-дирекция фотосъёмки

Brief для фотосессии: subject, color grading, lighting, что НЕ снимать (клише), лицензирование, usage guidelines, brand consistency.

Среднийдень+

Empty state для dashboard в day-zero

Что показать в дашборде, когда у пользователя нет данных: sample data vs placeholder, onboarding integration, action vs explainer.

empty statedashboardui

positioningpremiumarchetype

Среднийдень+

Премиум-позиционирование: какой именно «премиум»?

Stripe-премиум vs Apple vs Hermès vs Linear vs Aesop — пять разных архетипов. Выбрать один и оттолкнуться от него во всех визуальных решениях.

Средний30-45 мин

Editorial-раскладка: журнальная сетка для премиум-сайта

Асимметричная сетка, крупные серифные заголовки, осознанные пустоты, pull quotes и drop caps. Как Stripe Press, Aesop, NYT Mag.

layouteditorialpremium

Средний45-60 мин

Аудит на сдержанность: что убрать, чтобы стало премиально

Премиум — это не «добавить полировку», это «убрать 30%». Проход по странице с целью subtraction: иконки, тени, бордеры, бейджи, CTA-дубли.

auditrestraintminimalism

Начальный20-30 мин

Полировка поверхностей: бордеры, тени, радиусы как у премиум-сайтов

Конкретные значения, которые отличают «сделано в Figma за час» от премиума. Subtle borders 1px, тени с низким blur, шкала радиусов 4/8/12, никаких неоновых градиентов.

surfacepolishshadow

Средний30-45 мин

Скролл-хореография: кинематографичный ритм страницы

Раскрытие секций при скролле, осознанный ритм, parallax с умом. Что и когда анимировать, чтобы ощущалось как кино, а не как 2014.

motionscrollchoreography

orchestratorpremiumend-to-end

Продвинутый60-90 мин

Featured

Премиум-сайт end-to-end: от archetype до запуска

Orchestrator: премиум-сайт за один проход. 8 фаз: archetype → type stack → colour & surfaces → editorial layout → hero → motion → restraint → governance. Готовый план на неделю работы с конкретными артефактами на каждой фазе.