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

Техническое задание на справочник по напольным покрытиям

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

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

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

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

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

Меню в шапке нет. Навигация — «веер» из восьми плашек у правого края: «Испытания», «Раскладка» и шесть образцов покрытий; на телефоне — лента внизу экрана. Шапка — логотип «domus42» и подпись «Напольные покрытия для Новокузнецка и Кузбасса».

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

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

4. Стенд испытаний

Четыре вкладки — «Пролить воду» (открыта по умолчанию), «Уронить каблук», «Пустить кота», «Включить тёплый пол» — и шесть образцов. У каждого образца оценка из трёх («Выдержит», «С оговорками», «Боится»), шкала из трёх делений (зелёный, жёлтый, красный) и фраза-пояснение. Поверх фото образца рисуется эффект испытания: капли и пятно впитывания, вмятины, царапины или волны тепла; чем хуже оценка, тем сильнее эффект.

Покрытие	Вода	Каблук	Кот	Тёплый пол
Ламинат	Боится	Выдержит	С оговорками	С оговорками
Кварцвинил	Выдержит	Выдержит	Выдержит	Выдержит
Линолеум	С оговорками	Боится	С оговорками	С оговорками
Паркетная доска	Боится	С оговорками	Боится	С оговорками
Керамогранит	Выдержит	Выдержит	Выдержит	Выдержит
Пробка	С оговорками	Боится	С оговорками	Боится

Подсветка: клик по плашке веера или карточке комнаты выделяет подходящие образцы, остальные гаснут; двойной клик по стенду снимает выделение. С другой страницы подсветка открывается по адресу вида /#ob-laminat.

5. Страница «Раскладка»

5.1. Поля калькулятора

Поле	Диапазон	По умолчанию
Комната вдоль окна A	1–12 м	4,2
Комната от окна до двери B	1–12 м	3,1
Длина доски	300–2500 мм	1380
Ширина доски	60–400 мм	193
Досок в пачке	1–40	8
Зазор у стен	0–30 мм	10
Направление	вдоль света / поперёк	вдоль света
Сдвиг рядов	на ⅓ / на ½ / обрезком	на ⅓
Подрезать первый и последний ряд поровну	галочка	включена
Пачка в запас	галочка	включена

5.2. Правила раскладки

• Укладываемое поле — размеры комнаты минус два зазора. Число рядов = ⌈ширина поля / ширина доски⌉.
• Если последний ряд уже половины доски и включено выравнивание, крайние ряды = (поле − (n − 2) · ширина доски) / 2.
• Минимальный кусок = min(300 мм, длина доски / 3). Обрезки не короче минимального идут в начало следующих рядов; берётся самый короткий подходящий.
• Если у дальней стены остаётся кусок короче минимального, начало ряда сдвигается — если это не ломает разбежку.
• При сдвиге «обрезком» торцы соседних рядов разводятся не меньше чем на минимальный кусок, иначе ряд сдвигается на треть доски.

5.3. Итоги

• Досок — целых, из которых собирается пол. Пачек = ⌈досок / в пачке⌉, плюс одна при галочке запаса.
• Площадь пола = A × B. Доля в обрезки = (площадь купленных досок − площадь поля) / площадь купленных досок, без запасной пачки.
• Под планом — число рядов, ширина крайних рядов, предупреждения об узком последнем ряде и коротких кусках. Оговорка: расчёт — геометрия, не норма; ниши, выступы и короба план не видит. Ввод не сохраняется.

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

1. «Куда направить доски»: три карточки со схемами — вдоль света из окна, вдоль длинной стены, через дверной проём.
2. «Сдвиг рядов»: три живых образца — на ⅓, на ½, обрезком прошлого ряда — строятся той же функцией раскладки.
3. «Порог и разрыв покрытия»: разрез дверного проёма с тремя метками и легендой.
4. «Перед покупкой»: шесть пунктов — замерить стены в двух местах, учесть ниши и проёмы, решить направление, проверить совместимость с тёплым полом, брать одну партию, оставить пачку на брак. Счётчик «N из 6», отметки сохраняются в браузере.

6. Источники и оговорки

• Оценки стенда — общая практика и типовые инструкции производителей; классов и температур на стенде нет.
• Класс ламината (21–23 бытовые, 31–34 коммерческие, EN 13329 и ГОСТ 32304-2013) говорит об износе поверхности, а не о стойкости к воде — отсюда мысль «не верьте классу на упаковке».
• Зазор у стены — по инструкции производителя, обычно около сантиметра; жёсткого числа нет.
• Запас — отдельной пачкой по выбору, а не «норма 7–10 %».

7. Дизайн

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

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

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

9. Приёмка

Проверка	Ожидаемый результат
Стенд при загрузке	Вкладка «Пролить воду»: ламинат и паркетная доска — «Боится», кварцвинил и керамогранит — «Выдержит»
Карточка «Детская»	Подсвечены пробка и ламинат, остальные образцы погашены
Калькулятор по умолчанию	52 доски, 8 пачек, площадь 13,0 м², в обрезки 7 %, 22 ряда
Снять галочку «Пачка в запас»	7 пачек, остальное без изменений
Ввод за пределами диапазона	Значение приводится к границе, план не ломается
Чек-лист: три отметки, перезагрузка	«3 из 6», отметки сохранились
Ширина 1440 и 390 px	Нет горизонтальной прокрутки страницы, ошибок в консоли нет
Сторонние запросы	Нет ни одного