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

Техническое задание на справочник про бани-бочки

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

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

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

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

• / — главная: бочка в разрезе, сравнение, длина, пять ошибок, вопросы
• /uchastok/ — где поставить бочку: план участка, откуда эти метры, основание, слив, подготовка к доставке

Навигация — две бирки на верёвке в шапке («Бочка в разрезе», «Где поставить на участке»), бирка текущей страницы отмечена. Логотип — спил бревна с подписью «Бани-бочки · Марий Эл». В подвале — нарисованный пейзаж, логотип и те же две ссылки.

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

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

4. Разрез и длина бочки

4.1. Разрез

Семь узлов: предбанник и дверь, моечная, печь, полок, слив, стяжные хомуты, кровля и дымоход. Клик по номеру на разрезе или по точке под карточкой открывает карточку из трёх частей: «Что это», «На что смотреть», «Что ломается первым». При загрузке открыт узел № 3 — печь. Разрез слегка наклоняется за курсором.

4.2. Длина бочки

Ползунок 2–6 м, шаг 1 м, по умолчанию 4 м. Под каждую длину — число человек на полке, число отделений, заметка и схема бочки сверху с размерными линиями отделений.

Длина	На полке	Отделения, м
2 м	2 человека	Парилка 2
3 м	2–3 человека	Предбанник 1 + парилка 2
4 м	3–4 человека	Предбанник 1,2 + моечная 1,2 + парилка 1,6
5 м	4 человека	Предбанник 1,5 + моечная 1,3 + парилка 2,2
6 м	4–6 человек	Комната отдыха 2 + моечная 1,4 + парилка 2,6

Разбивка типовая для бочек диаметром около 2 м и нормой не задаётся — это подписано под схемой.

5. Страница «Где поставить бочку на участке»

5.1. План участка

Участок 28 × 20 м, улица снизу, свой дом 8 × 8 м, за правой границей — соседний дом с окнами на стене, обращённой к участку. Бочка 4 × 2,2 м. Её тянут мышью или пальцем, двигают стрелками клавиатуры (шаг 0,1 м, с Shift — 1 м), поворачивают кнопкой «Повернуть бочку». Бочка не выходит за границы участка.

Расстояние	Норма	Пункт СП 53.13330.2019
До границы соседнего участка	от 1 м	6.7
До своего дома	от 8 м	6.8
До окон соседнего дома	от 4 м	6.8
До улицы	от 5 м	6.6

• Расстояния — кратчайшие между прямоугольниками, округление до 0,1 м. Граница соседей — ближайшая из левой, правой и верхней.
• Норма выполнена — зелёная строка и размерная линия; нарушена — красная и подпись «ближе, чем позволяет п. …».
• До границы от 1 до 2 м — жёлтое предупреждение «скат льёт к соседу — нужен водосток» (п. 6.7).
• Запретные зоны у забора, вокруг своего дома и у окон соседа заштрихованы. Положение бочки не сохраняется.
• Под планом — оговорка: свод правил написан для садовых участков, для ИЖС отступы задают правила землепользования и застройки поселения.

5.2. Остальные блоки

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

6. Источники чисел

• СП 53.13330.2019 «Планировка и застройка территории ведения гражданами садоводства», сверен по официальному тексту дословно: п. 6.5 — пожарные расстояния между постройками на одном участке не нормируются; п. 6.6 — хозпостройки от 5 м до красной линии улиц; п. 6.7 — от 1 м до границы, замер от выступа больше 50 см, скат не на соседа; п. 6.8 — 8 м от дома до бани, 4 м от окон соседа, блокировка построек по согласию соседей.
• Для ИЖС чисел на сайте нет — отсылка к правилам землепользования и застройки поселения.
• Сравнение бочки, каркасной бани и бани из блоков — шкалами без чисел; разбивка длины, советы по печи, полку и хомутам — практические, подписаны как типовые.

7. Дизайн

Стиль «летняя бочка»: светлый лён, кедр-янтарь, сизый «пар», графит. Круглые формы — логотип-спил, кружки-номера на разрезе, спилы под ошибками, кружки норм. На плане зелёный — норма выполнена, красный — нарушена, жёлтый — предупреждение. Шрифты: Unbounded в заголовках, Manrope в тексте. Пять картинок: бочка на участке, разрез на прозрачном фоне, спил бревна, участок сверху, манипулятор. Иконки, схема длины, план участка, основания, слив и пейзаж подвала — SVG. Анимации: пар над трубой, параллакс обложки, покачивание бирок, появление блоков, капли в схеме слива. При настройке «уменьшить движение» все анимации отключаются.

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

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

9. Приёмка

Проверка	Ожидаемый результат
Главная при загрузке	Открыта карточка «Печь», ползунок длины на 4 м: 3–4 человека, 3 отделения
Ползунок на 6 м	4–6 человек, комната отдыха 2 + моечная 1,4 + парилка 2,6 м
План при загрузке	Все четыре строки зелёные: граница 3,0 м, свой дом 10,0 м, окна соседа 5,0 м, улица 14,8 м
Бочка в 1,5 м от левой границы	Жёлтое предупреждение о скате и водостоке
Бочка ближе 1 м к левой границе	Красная строка «ближе, чем позволяет п. 6.7»
Чек-лист: все пять отметок, перезагрузка	«Всё готово — можно звать машину», отметки сохранились
Ширина 1440 и 390 px	Нет горизонтальной прокрутки страницы, ошибок в консоли нет
Сторонние запросы	Нет ни одного