Технічне завдання: Дизайн сайту на конструкторі WebliumПроект:Розробка дизайну та верстка брендового сайту-хабу (до 10 сторінок) для експерта у сфері навчання, б'юті та масажу.Веб-версія документа: Google Doc.Також прикріпляю версію документа в форматі PDF. 1. ЗАГАЛЬНА ІНФОРМАЦІЯ ПРО ПРОЕКТСуть проекту:Створення єдиної платформи (сайту-хабу) для презентації експерта, продажу освітніх продуктів (онлайн та офлайн) та запису на індивідуальні послуги.Платформа розробки: Виключно Weblium. 2. ЗОНА ВІДПОВІДАЛЬНОСТІ2.1. Входить до обов'язків Підрядника:Створення та узгодження UI/UX дизайну всіх сторінок згідно зі структурою.Верстка затвердженого макету на конструкторі Weblium.Забезпечення повної адаптивності (Mobile, Tablet, Desktop) з пріоритетом на Mobile-first.Проектування візуальних UI-контейнерів та станів елементів для подальшої інтеграції сторонніх віджетів.2.2. Поза зоною відповідальності Підрядника:Інтеграція та налаштування платіжних шлюзів та сторонніх систем.Налаштування доменів, хостингу, SEO-оптимізація та підключення систем веб-аналітики. Примітка: Підрядник лише розробляє та верстає візуальні блоки (кнопки, форми, секції), куди Замовник згодом самостійно інтегрує відповідні скрипти/віджети. 3. ГЛОБАЛЬНІ ВИМОГИ ДО ДИЗАЙНУСтилістика: Чистий, професійний, "повітряний", преміальний та лаконічний дизайн. Багато "білого простору". Використання тонких ліній та мінімалістичних іконок (Виключно royalty-free іконки або безкоштовні бібліотеки для комерційного використання).Mobile-first: Дизайн проектується першочергово під мобільні пристрої. Розмір кнопок та інтерактивних елементів повинен бути оптимізований для натискання пальцем. Відсутність важкої анімації, що уповільнює рендеринг. Таблиці/розклади мають бути оптимізовані для вертикального скролу.Обмеження (Анти-референси): Категорично заборонено використання кричущих кольорів, агресивних маркетингових банерів, надмірного "золота" та складних градієнтів.Типографіка: Основний шрифт для заголовків та тексту — Montserrat.Палітра кольорів:Brand primary: #BFA78AAccent 1: #FEF9F3Accent 2 (тільки для акцентів, не для фону): #93182BDark background: #40341ELight background: #F0F1F2Body background: #FEFEFEDark text: #40341E 4. СТРУКТУРА ТА ВИМОГИ ДО КОНТЕНТУ4.1. Головна сторінкаБлок 1 (Hero Section): Головний екран. Заголовок, текстовий опис, Primary CTA кнопка, фотографія експерта за роботою.Блок 2 (Meet your Expert):Текстова презентація експерта та методології + велике портретне фото.Блок 3 (Problem/Solution): Заголовок, маркований список переваг/вирішень, тематичне фото (процес роботи/руки).Блок 4 (Services): "Навігаційний" блок у вигляді 3-х карток (Офлайн-курс, Онлайн-курс, Індивідуальні послуги). Кожна картка: локація, короткий опис, CTA-кнопка для переходу, зображення.Блок 5 (Social Proof): Блок відгуків. Комбінація текстових відгуків та графічного контенту "до/після".Блок 6 (Trust Panel): Інформація про сертифікацію. Верстка блоку для розміщення логотипу акредитаційного органу.Блок 7 (Final CTA): Заключний екран. Кнопки вибору навчання, кнопки соціальних мереж, фото експерта. 4.2. Сторінка офлайн-курсуБлок 1 (Hero Section): Заголовок, текст, CTA-кнопка, тематичне фото.Блок 2 (Why Offline): Текст + фотографія експерта під час занять.Блок 3 (Course Program): Розклад трьох днів по годинах. Попередньо, без фотографій.Блок 4 (Booking - UI Контейнери): Контейнер під віджет форми розкладу та введення даних.Блок 5 (FAQ):Акордеон із запитаннями про підготовку.Блок 6 (Final CTA): Заклик до дії (бронювання + перехід на соцмережі), фото експерта. 4.3. "Інтеграція" платформи онлайн-навчанняУвага:Розробка окремої сторінки для онлайн-курсувиключенаіз зони відповідальності Підрядника, оскільки продукт розміщується на сторонній LMS-платформі.Зовнішні лінки: Усі відповідні кнопки "Онлайн-курс" (на Головній сторінці, у футері та в інших блоках) повинні бути візуально стилізовані та налаштовані як переходи на зовнішнє посилання.Навігаційне меню (Header):В обов'язковому порядку передбачити наявність окремої кнопки або пункту меню "Онлайн-курс" у головній навігації сайту із налаштуванням переходу на зовнішній ресурс. 4.4. Сторінка Services (Індивідуальні послуги)Блок 1 (Hero & Results):Текстовий опис підходу + галерея результатів "до/після".Блок 2 (Booking & Pricing): UI-контейнер для віджета запису. Без фотографій. 4.5. Службові сторінкиFAQ: Загальна сторінка з акордеоном питань.Privacy Policy: Суто текстова сторінка (заголовки, абзаци, списки).Terms of Service:Суто текстова сторінка (аналогічна до Privacy Policy).404: Службова сторінка для поламаних чи некоректних посилань. 5. ПРОЦЕС РОБОТИ ТА УМОВИ СПІВПРАЦІНаступні правила є критичними для дотримання графіка проекту та процедури прийомки робіт:Контроль виконання:Підрядник зобов'язаний надавати короткий статус-репорт та/або скріншоти/посилання на проміжні результати за запитом замовника. Це забезпечує прозорість процесу.Ітеративність: До вартості робіт має бути включено до 2-х ітерацій комплексних правок для кожної сторінки після презентації першого драфту. Ітерація – це єдиний зведений список (фідбек) від Замовника.Лайв-Правки: Замовник залишає за собою право вносити мінорні зміни (порядок розташування елементів, текстове наповнення, підбір кольорів тощо) безпосередньо під час рев'ю проміжних результатів. Такі мінорні зміни не вважається ітерацією або виходом за рамки даного ТЗ і виконуються Підрядником в робочому порядку та бюджеті.Передача матеріалів та контент: Усі проектні матеріали, необхідні для роботи (тексти, референси та медіафайли високої роздільної здатності), будуть надані Замовником після затвердження Підрядника та загальної дизайн-концепції. 6. КРИТЕРІЇ ГОТОВНОСТІ РОБІТПроект вважається успішно завершеним та підлягає повній оплаті за умови виконання наступних технічних критеріїв:Кросбраузерність та Адаптивність: Сайт відображається коректно, без зсувів контенту та горизонтального скролу на мобільних пристроях, планшетах та десктопах в останніх версіях браузерів Google Chrome, Apple Safari, Mozilla Firefox.Технічна оптимізація медіа:Всі завантажені зображення оптимізовані (стиснуті без видимої втрати якості, пріоритетний формат — WebP), щоб уникнути перевантаження сторінок та забезпечити швидке завантаження.Готовність UI/UX:Реалізований повний обсяг сторінок згідно ТЗ, тексту та референсів.Наявні та налаштовані глобальні елементи сайту: Header (з навігацією та зовнішнім лінком на онлайн-курс), Footer (з необхідними юридичними посиланнями), Базова сторінка помилки 404.Усі інтерактивні елементи (кнопки, посилання, акордеони FAQ) мають налаштовані стани (Hover/Active states).Готовність контейнерів:Блоки, призначені для інтеграції віджетів (бронювання, оплата), зверстані згідно з ТЗ і готові для вставки коду Замовником (мають відповідні відступи та правильну адаптивну поведінку).