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, коротке відео: 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 обов'язковий, редирект з 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 редагується без залучення розробника