Технічна специфікація

Один документ, з якого зроблено цей сайт. Усі пункти — бізнес-вимоги звичайними словами: ви описуєте, що потрібно й як це має виглядати, технічну частину беремо на себе.

1. Призначення

Маркетинговий сайт компанії, що розробляє сайти для малого бізнесу за допомогою спеціалізованого ШІ-агента під наглядом розробника. Сайт має: (1) отримувати заявки, (2) пояснювати процес роботи, (3) створювати довіру до підходу й команди.

2. Аудиторія

• Головна — власник малого бізнесу без технічного бекграунду (масажист, стоматолог, тренер, локальний спеціаліст). Читає швидко, з телефону, не любить складних слів.
• Вторинна — технічний відвідувач: розробник або дослідник, якому цікаво, як влаштований процес.

3. Структура

• Головна — послідовність секцій: перший екран → кому це треба (проблема) → як ми це вирішуємо → процес по кроках → демо онлайн-запису → «це наш продукт» → ціни → поширені питання → форма заявки.
• Дослідження, Технології, Команда — окремі сторінки, доступні з верхнього меню.
• Меню закріплене вгорі, зменшується під час прокрутки. На телефоні — повноекранне меню за кнопкою-«гамбургером».

4. Як сайт має виглядати

• Настрій — преміально й технологічно, ближче до сайту інженерної компанії, ніж до реклами агенції. Спокійно, без тиску, без емодзі в заголовках.
• Тема — темна: майже чорне тло, світлий текст, один стриманий акцентний колір (теплий, «золотистий») для кнопок і важливих деталей. Ніяких різнокольорових блоків.
• Перший екран — великий заголовок з головною обіцянкою, коротке пояснення під ним, одна головна кнопка «Замовити консультацію» і другорядне текстове посилання «Як це працює». На тлі — тиха рухлива абстрактна графіка (легкий рух/спотворення), яка не відволікає від тексту і зникає на слабких пристроях.
• Типографіка — один сучасний гротеск для всього; технічні дрібниці (номери кроків, підписи, цифри цін) — моноширинним шрифтом, щоб підкреслити «інженерність».
• Ритм — багато повітря між секціями, широкі поля, контент по сітці, максимальна ширина тексту обмежена для читабельності.
• Форми та картки — мʼякі великі заокруглення, тонкі майже прозорі рамки замість тіней, без яскравих смуг і градієнтів.
• Рух — елементи легко зʼявляються під час прокрутки, плавне «інерційне» гортання. Усе це вимикається, якщо в системі увімкнено «зменшити рух».
• Ілюстрації — жодних стокових фото з усмішками. Замість них — схематичні макети, демонстрації інтерфейсу, абстрактна графіка.
• Швидкість — сайт має відкриватися майже миттєво навіть на мобільному інтернеті.

5. Секції головної — що в кожній

• Проблема — короткий список болів власника: дорого, довго, «зробили й покинули», немає онлайн-запису.
• Рішення — як наш підхід закриває кожен із цих пунктів.
• Процес — 6 кроків від розмови до запуску, пронумеровані, з коротким описом кожного. Поруч — інтерактивне демо «інтерфейсу правок»: клієнт натискає елемент на макеті сторінки — і коментар одразу стає рядком у списку правок; вибір працює у два боки (клік по списку підсвічує точку на макеті).
• Демо онлайн-запису — візуальний макет форми запису (послуга, дата, час) без реального бекенду; показує, що ми вміємо додавати клієнтам.
• Це наш продукт — блок про те, що сам цей сайт зроблено тим самим процесом, з кнопкою, що відкриває цю специфікацію, і великою цифрою «~30 хв».
• Ціни — одна проста модель без порівняння тарифів.
• Поширені питання — розкривні блоки, лише реальні питання клієнтів.
• Форма заявки — велика секція на світлому тлі перед футером.

6. Функціональні вимоги

• Форма заявки «Замовити консультацію»: імʼя, спосіб звʼязку, тип бізнесу, коментар. Заявка приходить нам у месенджер окремим повідомленням. Без бази даних і без адмін-панелі.
• Поруч із кнопкою відправки — рівнозначна за розміром кнопка-контур «Обговорити сайт з розробником онлайн», що веде на зовнішнє посилання для призначення розмови.
• Демо онлайн-запису та демо правок — лише візуальні макети, без збереження даних.
• Захист форми від спаму без видимих капч (прихована пастка + перевірка часу заповнення).

7. Нефункціональні вимоги

• Мова — лише українська.
• Доступність за стандартами: навігація з клавіатури, видимий фокус, коректні контрасти, підтримка «зменшити рух».
• Статичний сайт: швидке завантаження, коректні мета-теги й карта сайту.

8. Обовʼязково згадати

• 10+ років досвіду веброзробки, перетворені на власного ШІ-агента.
• Процес: розмова → вимоги → генерація → перевірка розробником.
• Ціни: розробка безкоштовна за акцією, хостинг 600 грн/міс, домен окремо.

9. Поза обсягом

• Багатомовність, блог/CMS, приймання оплат на сайті.
• Реальна система бронювання для самої компанії — це те, що ми продаємо клієнтам.
• Вигадані відгуки, клієнти, нагороди чи метрики.

10. Критерії готовності

• Пропозиція зрозуміла за перші 10 секунд.
• Видно, що за продуктом стоять живі розробники, а не лише автоматика.
• Форма заявки реально надсилає повідомлення.
• Сайт проходить перевірки продуктивності та доступності.

Додано пізніше — окремими запитами

Не все зʼявилось у першій версії документа. Нижче зібрані уточнення, які замовник надсилав окремими повідомленнями вже під час роботи:

• Назва бренду — Factory; використати всюди (меню, вкладка браузера, підпис компанії).
• Прибрати з головної секцію з прикладами робіт (портфоліо) — до окремого рішення.
• Прибрати з головної секцію «Від досліджень до production» — клієнту це не потрібно в пріоритеті; повна інформація лишається на сторінці «Дослідження».
• Замінити формулювання головної кнопки на всьому сайті: спершу з «Отримати сайт» на «Обговорити проєкт», згодом — на «Замовити консультацію».
• Другорядне посилання «Обговорити сайт з розробником онлайн» зробити повноцінною кнопкою-контуром поруч із кнопкою відправки, а не дрібним текстом.
• У демо правок додати вибір у два боки: клік по рядку списку теж підсвічує відповідну точку на макеті.
• Специфікацію в блоці «Це наш продукт» скоротити до цього короткого документа з бізнес-вимог — без коду й технічних деталей.
• Розгорнути опис того, як саме сайт має виглядати (розділ 4), і зазначити, що частина вимог додавалась окремими запитами (цей розділ).

Цей сайт зроблено з цього документа приблизно за 30 хвилин; уточнення вище — ще кілька коротких ітерацій.