Методология

Как я работаю над проектом

Пошаговая система от первого интервью до передачи. Это не советы, а правила, нарушение которых уже стоило времени на прошлых проектах. Всё выведено из реального опыта: MedLog, karaokeshop, WhatDaDev.

Принципы во все фазы

Гейты между фазами

Нельзя переходить к следующей фазе без письменного OK команды. Устное «вроде ок» гейтом не считается.

Урок: Все проекты

Решения до кода (ADR)

Каждое нетривиальное решение фиксируется письменно: контекст → варианты → выбор → аргумент.

Урок: karaokeshop

Аналитика в первый коммит

Счётчик ставится сразу, не «потом». Иначе нечем мерить, что переписывать.

Урок: WhatDaDev

Деплой в первый день

Рабочая заготовка деплоится в день 1. Прод существует с начала, а не в конце.

Урок: Все проекты

Один источник правды

Цвет в одном файле, контент в одном файле. Дубль это тихий рассинхрон.

Урок: karaokeshop

Тестируй на устройстве, не в Figma

Мокап это не реальный рендер. Проверка на реальном телефоне, а не в дизайне.

Урок: MedLog

Максимум 2 раунда правок

Дальше это уже вне scope, отдельная задача. Защищает и сроки, и отношения в команде.

Урок: Все проекты

Доки в том же коммите

CHANGELOG и HANDOFF обновляются вместе с кодом, не отдельным заходом.

Урок: MedLog

Текст без AI-теллов

Длинное тире и пустой маркетинг-слоп выдают машинный текст. Переписывать фразу, не стирать символ, варьируя замену.

Урок: WhatDaDev + karaokeshop

Семь фаз

У каждой фазы явная цель, шаги, артефакты, гейт перехода и типичная ловушка.

Интервью и брифинг

Понять бизнес и ограничения раньше, чем открыт редактор.

Шаги

1. Бизнес: что продаёт, кому, чем зарабатывает, кто конкуренты, в чём отличие.
2. Сайт: зачем нужен (продажи / лиды / бренд / SEO), что есть, что болит.
3. Контент: что уже есть, что создать, кто даёт материалы.
4. Ограничения: бюджет, резидентность данных, домены, интеграции, кто ведёт после.

Артефакты

Заметки интервьюСписок ограниченийЧто ждём от команды

Гейт: Стейкхолдеры подтвердили, что цели и ограничения зафиксированы верно.

Ловушка: Не начинать дизайн без ответа на «зачем сайт» и «кто ведёт после». Иначе переписываешь вслепую.

Структура и воронки (IA)

Карта страниц от пользовательских сценариев, не от «хочу красиво».

Шаги

1. Выделить воронки: разные потребности дают разные пути (B2C и B2B).
2. Из воронок собрать карту страниц (sitemap).
3. Расставить приоритеты: что в MVP, что фаза 2.
4. Для SEO: семантическое ядро, а URL-карта уже от него.

Артефакты

Sitemap / IAURL-картаПриоритизация

Гейт: Структура и слаги согласованы с командой.

Ловушка: Группировать по техническим сущностям («Записи», «Данные»): пользователь так не думает. Группировать по сценариям («Сегодня», «Визиты», «Лекарства»).

Решения до кода (ADR)

Зафиксировать ключевые архитектурные решения письменно, прежде чем писать код.

Шаги

1. Контекст: что решаем и почему сейчас.
2. Варианты: реально рассмотренные, с плюсами и минусами.
3. Выбор и аргумент: почему именно так.
4. Что выбор разблокирует и какие последствия.

Артефакты

docs/adr/*Сводный Decision Log

Гейт: Блокирующие решения (резидентность, CMS, домен) отправлены стейкхолдерам одним листом, ответы получены.

Ловушка: «Решим по ходу». Решение в коде без фиксации через месяц никто не вспомнит, а дубль источников разойдётся.

Визуализация и стиль

Согласовать визуальный язык без вёрстки: дешевле менять токены, чем HTML.

Шаги

1. Дизайн-токены: палитра с WCAG-контрастом, типографика, радиусы, отступы, один источник.
2. Референсы и направление тона.
3. Согласование на токенах и референсах, не на готовых страницах.

Артефакты

Файл токеновБорд референсовМини-гайд стиля

Гейт: Команда утвердила визуальное направление.

Ловушка: Показывать полу-свёрстанные страницы: правки полетят в код, дорого. И не дублировать цвет в двух местах.

Первый коммит и деплой (день 1)

Рабочая заготовка в проде в первый день.

Шаги

1. Скелет по утверждённым решениям: стек из фазы 2, токены из фазы 3.
2. Аналитика в этот же коммит.
3. Настроить авто-деплой: push в основную ветку даёт прод.
4. Прислать команде живой URL.

Артефакты

Живой прод-URLРепозиторийCI / деплой

Гейт: Заготовка открывается на проде, аналитика шлёт события.

Ловушка: Копить локально неделю до «показа». Прод с первого дня это ранняя обратная связь и нет сюрпризов на сдаче.

Итерации (рабочий цикл)

Предсказуемый цикл на каждое изменение.

Шаги

1. Задача → обсуждение → ADR (если нетривиально) → реализация.
2. Проверка перед «готово»: сборка зелёная и визуал на реальном устройстве.
3. Доки (CHANGELOG, HANDOFF) в том же коммите.
4. Максимум 2 раунда правок по дизайну на блок, дальше отдельная задача.

Артефакты

Осмысленные коммитыОбновлённый CHANGELOG / HANDOFF

Гейт: Проверено и задеплоено, команда видит результат на проде.

Ловушка: «Причешу потом» превращается в whack-a-mole. Чинить корень (архитектуру), а не симптом.

Проверка и передача

Сайт можно отдать другому разработчику или владельцу без тебя.

Шаги

1. Техника: сборка и тесты зелёные, нет битых ссылок, 404 работает, мобайл проверен.
2. SEO: уникальные title/description, один H1, canonical, sitemap, OG.
3. Контент: реальные тексты и фото, контакты верные.
4. Инфра: домен подключён, аналитика активна, секреты на месте.

Артефакты

README / CLAUDE.mdARCHITECTURE.mdHANDOFF.mdИнструкция владельцу

Гейт: Новый человек по докам поднимает проект и делает первый PR без тебя.

Ловушка: Доки «потом». Передавать нужно так, будто ты завтра исчезаешь.

Восемь правил, которые экономят время на следующем проекте

1 Гейт это письменный OK. Нет письма, нет перехода к следующей фазе.

2 Decision Log с первого дня. Решение без аргумента это будущий спор.

3 Аналитика в первый коммит. Без данных редизайн это гадание.

4 Деплой в день 1. Прод существует с начала.

5 Один источник правды на тип данных. Цвет и контент в одном месте.

6 Тестируй на устройстве, не в Figma.

7 Доки в том же коммите, что и код.

8 2 раунда правок это потолок. Дальше новый scope.

Так я веду задачи и внутри продуктовой команды. Как это выглядит на практике: в кейсах.

Обсудить задачу Смотреть кейсы