1. Главная
2. Кейсы
3. Ковка 12
4. Техническое задание

Техническое задание на справочник по художественной ковке

Пример ТЗ по кейсу «Ковка 12»: справочник описан таким, каким он работает на kovka12.ru. Так выглядит документ, который мы составляем до начала работ: что на каждой странице, как считает конструктор, что проверяем при приёмке.

1. Общие сведения

Назначение	Справочник по художественной ковке для Йошкар-Олы и Марий Эл: элементы ковки и их названия, конструктор секции забора, горячая и холодная ковка, уход и покраска.
Аудитория	Человек, который заказывает кованый забор, ворота или перила и хочет понимать эскиз и цифры до разговора с кузнецом.
Главная задача	Узнать элементы по названиям, прикинуть секцию забора и расход прутка, понять, как ухаживать за готовым изделием.
Чем не является	Мастерской и магазином: цен, телефонов, форм заявки и каталога работ нет. В подвале: «Справочник, изделия не изготавливаем».
Язык	Русский.

2. Структура сайта

• / — главная: элементы ковки, конструктор секции, горячая или холодная, уход кратко, вопросы
• /uhod/ — уход за кованым изделием и покраска

Навигация — пять вкладок с линейными иконками инструментов в шапке: Элементы, Конструктор, Горячая или холодная, Уход, Вопросы. При прокрутке шапка темнеет, подсвечивается вкладка текущего блока. На /uhod/ — крошки «Ковка 12 → Уход».

3. Главная страница

1. Первый экран: фото кузнеца у наковальни и ворот с фонарём, заголовок «Из чего собирают кованый забор, ворота и перила», один абзац. Из горна летят искры.
2. Элементы ковки: полка из десяти элементов — пика, завиток (волюта), S-завиток, кольцо, корзинка, лист, торсион, балясина, корона, гусиная лапка. Клик раскрывает под полкой карточку «Где ставят», «Как называют мастера», «На что смотреть при приёмке»; повторный клик или «Свернуть» закрывает её.
3. Конструктор секции забора (раздел 4).
4. Горячая или холодная ковка: два столбца по пять признаков на фото-контрасте. Наведение на столбец приглушает второй; круглая кнопка «Как отличить на готовом изделии» раскрывает примечание.
5. Уход за коваными изделиями: короткий абзац и кнопка на /uhod/.
6. Частые вопросы: пять раскрывающихся ответов, рядом фото фонаря.

4. Конструктор секции забора

4.1. Поля

Поле	Диапазон	По умолчанию
Ширина секции W	1000–3000 мм, шаг 50	2000
Высота секции H	1000–2200 мм, шаг 50	1500
Шаг прутков S	100–200 мм, шаг 5	120
Верх	пики / дуга / прямой	пики
Кольца, завитки, корзинки	галочки	кольца и завитки включены

Ползунок и числовое поле связаны; значение округляется к шагу и приводится к границам диапазона.

4.2. Расчёт

• Число вертикальных прутков n = round(W / S) − 1, не меньше 1; фактический шаг = W / (n + 1).
• Нижний пояс — 110 мм от низа. Длина прутка: при пиках — H − 40 − 110 мм, при прямом верхе — H − 110 мм, при дуге — до кривой дуги; подъём дуги = min(260 мм, 0,12 · W), форма — парабола.
• Пояса: нижний и верхний (при дуге — длина по кривой), плюс пояс под кольцами, если они включены.
• Масса — по вертикальным пруткам: квадрат 12 мм — 1,1304 кг/м, 14 мм — 1,5386 кг/м (сторона² × 7,85 г/см³).
• Пики — по одной на пруток; кольца — в каждом втором промежутке; S-завитки — в каждом третьем промежутке у нижнего пояса; корзинки — на каждом четвёртом прутке (2-й, 6-й, 10-й…).

4.3. Вывод

Блок «Примерный расчёт», девять строк: вертикальных прутков, их длина, горизонтальные пояса, масса для квадрата 12 и 14 мм, пик, колец, завитков, корзинок. Подпись: в расчёт не входят столбы, сварка, грунт и краска. SVG-секция со столбами перерисовывается на каждое изменение поверх фото цоколя; изменившиеся цифры «подпрыгивают».

5. Страница «Уход за кованым изделием»

1. Обложка: фото старой секции со ржавчиной, крошки, заголовок, абзац.
2. «Где начинается ржавчина»: шесть точек на фото секции — сварные швы, верх пик, низ стоек, касание с кирпичом, завитки, петли ворот. Клик по точке или стрелки ‹ › открывают карточку с текстом и увеличенным фрагментом того же фото вокруг точки. Точки пульсируют.
3. «Осмотр по сезонам»: четыре карточки — зима, весна, лето, осень, по три пункта. Карточка текущего сезона отмечается по месяцу из даты на устройстве.
4. «Подбор порядка работ»: четыре состояния — новое без покрытия, краска облезла местами (по умолчанию), рыжая ржавчина, старая краска в несколько слоёв. Для каждого пять шагов — очистка, преобразователь, грунт, покраска, патина — получают свой текст. Для нового изделия преобразователь гаснет с подписью «Не нужен»; патина везде помечена как необязательная.
5. «Чем покрывают»: пять покрытий — молотковая эмаль, алкидная эмаль, порошковая краска, патина, кузнечный лак — с образцами-дисками и тремя признаками каждого.
6. «Ошибки при покраске»: плохая очистка, без грунта, по рыхлой ржавчине, один толстый слой, пропущены швы и торцы.
7. Частые вопросы: пять раскрывающихся ответов.

6. Расчётная база

Нормы и законы сайт не цитирует. Единственная расчётная опора — плотность стали 7,85 г/см³, от неё масса погонного метра квадрата 12 мм (1,1304 кг) и 14 мм (1,5386 кг). Советы по покраске — общая практика: преобразователь ржавчины — по инструкции на флаконе, краска — несколько тонких слоёв, а не один толстый.

7. Дизайн

Стиль «кузница»: угольный фон, раскалённый оранжевый как акцент, светлые «бумажные» полосы с шумовой фактурой для конструктора и части блоков ухода. Шрифты: Playfair Display в заголовках, Golos Text в тексте. Восемь фото: кузнец у наковальни, лист из десяти элементов (нарезан на отдельные картинки с прозрачным фоном), участок без забора для конструктора, контраст горячей и холодной ковки, уход, фонарь, обложка и схема ржавчины для /uhod/. Иконки вкладок, секция забора, иконки сезонов и шагов — SVG, диски покрытий — CSS-градиенты. Анимации: искры из горна на canvas (останавливаются вне экрана), параллакс фона за мышью, мерцание горна и фонаря, линия под заголовком, появление блоков, пульс точек. При настройке «уменьшить движение» всё отключается, искры скрываются.

8. Технические требования

• Статические страницы: HTML, CSS, JavaScript без библиотек; расчёт и секция — в браузере, без сервера. Ничего не сохраняется.
• Шрифты и все файлы — на своём сервере, сторонних запросов нет.
• Адаптивность: до 900 px вкладки уходят в нижнюю закреплённую панель из пяти иконок, полка элементов прокручивается вбок, в конструкторе вместо фото участка — фон «небо и цоколь», столбцы горячей и холодной ковки — друг под другом, сезоны и состояния — в две колонки.
• SEO: свой title и description у каждой страницы, canonical, schema.org (WebSite на главной, BreadcrumbList на /uhod/), картинки для соцсетей 1200 × 630, sitemap.xml, robots.txt.
• Доступность: один H1 на странице, у ползунков — связанные числовые поля, вопросы-ответы на нативных раскрывающихся блоках.

9. Приёмка

Проверка	Ожидаемый результат
Конструктор по умолчанию: 2000 × 1500, шаг 120, пики	16 прутков, 21,6 м прутка, пояса 6,0 м, масса 24,4 кг (12 мм) и 33,2 кг (14 мм)
То же: элементы	16 пик, 9 колец, 5 завитков, 0 корзинок
Включить «Корзинки»	Корзинки на 2-м, 6-м, 10-м и 14-м прутке — 4 шт.
Ввод за пределами диапазона	Значение приводится к границе, секция не ломается
/uhod/: состояние «Новое без покрытия»	Шаг «Преобразователь» погашен, подпись «Не нужен»
Ширина 1440 и 390 px	Нет горизонтальной прокрутки страницы, ошибок в консоли нет
Сторонние запросы	Нет ни одного