1. Общие сведения о проекте
Заказчик: семейный парк развлечений в Германии (полное название и домен раскрываются исполнителю после старта проекта)
Тип проекта: полная редизайн и пересборка сайта с нуля
Текущий сайт: WordPress/Elementor, устарел, требует полной замены
Целевая аудитория: семьи с детьми 2 до 12 лет, регион Германии с несколькими крупными городами поблизости (15 до 20 минут на машине)
Язык сайта: основной немецкий (DE), дополнительно английский (EN), отдельная языковая версия
CMS: на усмотрение разработчика, WordPress с кастомной темой, Webflow, или headless CMS. Elementor не использовать.
Домен: существующий, переносится без замены
Срок сдачи: по согласованию с заказчиком
2. Цели и ключевые KPI
Новый сайт должен выполнять три стратегические функции:
- Передавать атмосферу парка как иммерсивного приключения, не список услуг, а погружение в тематический мир.
- Максимизировать конверсию: посетитель сайта должен совершить бронирование менее чем в 3 клика от любой страницы.
- Обеспечить безупречный мобильный UX, более 60% трафика ожидается с мобильных устройств.
KPI #1: время до первого клика "Забронировать" не более 10 секунд с момента загрузки главной страницы
KPI #2: Page Speed Score (Google PageSpeed Insights) не менее 85 на мобильных, не менее 90 на десктопе
KPI #3: показатель отказов (Bounce Rate) менее 45%
KPI #4: корректное отображение во всех современных браузерах (Chrome, Firefox, Safari, Edge) и на iOS/Android
3. Состав работ
3.1 Страницы и разделы
Минимальный набор страниц:
- Главная: Hero секция, анонс живого шоу по выходным, топ 5 аттракционов, отзывы Google, CTA блок
- Каталог аттракций с фильтром по возрасту (0 до 3 / 3 до 6 / 6 до 12 лет), карточки с фото и видео
- Пакеты дня рождения, описание плюс конфигуратор
- Текущие акции и сезонные события, каждое со своей визуальной карточкой
- Цены, таблица плюс виджет онлайн бронирования (интеграция с внешней системой бронирования)
- Ресторан, меню и атмосфера
- Фотогалерея плюс встроенный Instagram фид
- О парке, правила, FAQ (без дублирования правил)
- Контакты, карта Google Maps, контактная форма, часы работы, кликабельные телефон и email
- Зеркало всех страниц на английском языке
3.2 Что необходимо удалить с текущего сайта
- Все тексты об ограничениях COVID 19 (2021 до 2022), включая футер
- FAQ с вопросами о стоимости разработки веб сайтов (посторонний контент)
- Устаревший copyright год, заменить на актуальный
- Нерабочие Elementor popup кнопки
- Устаревшие уведомления об открытии после ограничений
- Дублирование правил парка в разделе FAQ
4. Функциональные требования
P1 = критично для запуска, P2 = желательно в v1.0, P3 = возможные доработки позже
4.1 Hero секция (главная страница)
P1, Fullscreen Video Hero: autoplay видео без звука (muted, loop), 100vw на 100vh. При клике включение звука. Поверх видео короткий слоган и кнопка CTA.
P1, текстовый слой над видео: H1 заголовок, подзаголовок плюс кнопки "Забронировать" и "Узнать больше". Шрифт читаем на любом фоне.
P1, Sticky Navigation: навигационная панель фиксируется вверху при скролле, фон меняется с прозрачного на тёмный при прокрутке.
P1, Sticky CTA Button: кнопка "Забронировать" всегда видна, на десктопе в хедере, на мобильном фиксированная полоса внизу экрана.
P2, Scroll анимации: элементы появляются с CSS анимацией (fade in плюс slide up) при прокрутке. Библиотека Intersection Observer или AOS.js. Без тяжёлых 3D библиотек.
4.2 Аттракции
P1, карточки аттракций: фото/видео, название, краткое описание, значок возрастного ограничения, кнопка "Подробнее"
P1, фильтр по возрасту: клиентский фильтр без перезагрузки страницы, реализация CSS классы плюс vanilla JS или Vue/React компонент
P1, детальная страница аттракции: собственный URL, крупное фото/видео, полное описание, ограничения по росту/возрасту, кнопка бронирования
P2, short form видео: 15 до 30 секунд ролик для каждой аттракции, autoplay при наведении на десктопе или tap на мобильном
4.3 Система бронирования
P1, интеграция с внешней системой бронирования: виджет встроен inline (iframe или JS embed) на страницы цен и дня рождения, без открытия в новой вкладке
P1, multi step booking flow: пошаговый мастер, тип визита, дата/время, количество гостей, подтверждение, обязателен progress bar
P1, объяснение тайм слотов: инфо блок рядом с выбором времени
P2, live доступность слотов: API запрос к системе бронирования, отображение занятых/свободных слотов в реальном времени
4.4 Конфигуратор дня рождения
P1, multi step конфигуратор: возраст именинника, количество детей, выбор пакета, дополнительные опции, выбор даты, форма запроса или прямое бронирование
P1, динамический расчёт цены: обновляется в реальном времени при изменении параметров, без перезагрузки
P2, итоговое резюме: сводная карточка выбора на финальном шаге с кнопками "Запросить" и "Забронировать напрямую"
4.5 Доверие и социальное подтверждение
P1, виджет Google Reviews: минимум 5 отзывов, средний рейтинг, звёзды, размещение на главной странице над CTA блоком бронирования
P1, Instagram фид: встроенная лента последних 9 до 12 постов через официальный API или виджет, ссылка на аккаунт
P2, счётчик посетителей: анимированный счётчик
4.6 Дополнительные функциональные блоки
P1, live статус "сейчас открыто/закрыто": автоматическая отметка на основе часов работы
P1, кликабельные контакты: телефон и email как активные ссылки, обязательно в хедере и на странице контактов
P2, интерактивная карта парка: SVG или image map с кликабельными зонами аттракций
P2, трекер загруженности: визуальный индикатор ожидаемой загруженности парка
P2, обратный отсчёт до события: виджет countdown до ближайшего сезонного события
P3, отдельный раздел вечерних мероприятий: страница или секция с собственным визуальным стилем и кнопкой бронирования
5. Нефункциональные требования
5.1 Производительность
- LCP не более 2,5 сек на мобильном (3G fast)
- CLS менее 0,1
- FID/INP менее 100 мс
- Google PageSpeed Score не менее 85 mobile, не менее 90 desktop
- Изображения: формат WebP плюс fallback JPEG, lazy loading, srcset
- Видео: стриминг через CDN или YouTube/Vimeo embed, не хранить тяжёлые MP4 на хостинге
5.2 SEO
- Schema.org: LocalBusiness плюс OpeningHoursSpecification плюс Event
- Meta теги: уникальные title (не более 60 символов) и description (не более 155 символов) на каждой странице
- Hreflang для языкового переключателя
- Canonical URL на каждой странице
- Sitemap.xml автоматически генерируемый
- Настроенный robots.txt
5.3 Доступность
- WCAG 2.1, уровень AA как минимальный стандарт
- Alt атрибуты обязательны для всех изображений
- Контраст текст/фон не менее 4,5 к 1
- Полная навигация с клавиатуры
- ARIA атрибуты на всех интерактивных элементах
5.4 Безопасность
- HTTPS обязателен, redirect с HTTP
- DSGVO/GDPR: cookie баннер (Consent Management), актуальная политика конфиденциальности
- CSRF защита, honeypot или reCAPTCHA v3 на всех формах
- Все зависимости актуальных версий, без известных уязвимостей
5.5 CMS и редактируемость
- Тексты, цены, часы работы, фотографии редактируемы через CMS без привлечения разработчика
- Создание/архивирование акций и событий через интерфейс CMS
- Обновление Instagram фида автоматическое через API
- Видеоинструкция (10 до 15 минут) по работе с CMS, обязательный deliverable
6. Дизайн система
6.1 Цветовая палитра: основной глубокий зелёный, вторичный средний лесной зелёный, акцентный красный для CTA, светло зелёный для фонов карточек, бежевый для текстурных акцентов, тёмный для основного текста, белый
6.2 Типографика: выразительный display шрифт для заголовков (в духе приключения), читаемый нейтральный sans serif для основного текста, минимальный размер 16px body, 14px caption, line height 1,5 до 1,7
6.3 Изображения и медиа: только реальные фотографии, стоковые фото не использовать, формат WebP, минимум 1920px для hero, 800px для карточек, видео hero не длиннее 30 до 60 секунд в loop версии, все изображения с правом публикации
6.4 Анимации: hover эффекты плавные (scale 1.03 на карточках), scroll анимации fade in плюс translateY, только transform и opacity для GPU ускорения
7. Ожидаемые результаты
- Дизайн макеты в Figma: десктоп плюс мобильный вид всех страниц (десктоп 1440px, мобильный 375px)
- Адаптивная вёрстка: брейкпоинты 375 / 768 / 1024 / 1440px, mobile first подход
- Готовый сайт на staging домене для приёмки, после одобрения деплой на боевой домен
- Настройка CMS: все редактируемые зоны настроены, тестово заполнены
- Видеоинструкция (10 до 15 минут) по управлению контентом
- Базовая настройка SEO: meta теги, Schema, Sitemap, подключение Google Search Console
- Установка Google Analytics 4 плюс Google Tag Manager, настройка событий (click CTA, form submit, page_view)
- Кросс браузерное и кросс девайсное тестирование, отчёт PageSpeed Insights до сдачи
- Передача исходного кода (Git репозиторий) заказчику после финальной оплаты
8. Критерии приёмки
- Все P1 требования реализованы и протестированы
- PageSpeed Score не менее 85 mobile, подтверждено скриншотом
- Корректное отображение на iPhone (Safari), Android (Chrome), iPad, MacBook, Windows (Chrome, Edge, Firefox)
- Форма бронирования успешно отправляет запрос и присылает подтверждение
- Google Reviews загружаются корректно
- Instagram фид обновляется автоматически
- Все ссылки работают, нет 404 ошибок
- Cookie баннер соответствует DSGVO, GDPR
- Контент в CMS редактируется без привлечения разработчика