Промпт: тЗ на дизайн сайта или лендинга

Техническое задание на разработку дизайна сайта студии йоги «Прана»

1. Цели и метрики сайта

Цели:

• Повышение конверсии пользователей в записи на занятия.
• Увеличение продаж абонементов.
• Привлечение новых клиентов через оформление заявок и записей.

Метрики эффективности:

• Количество зарегистрированных посетителей.
• Конверсия в заявки на пробные занятия.
• Продажи абонементов онлайн.
• Уровень отказов.
• Среднее время пребывания на сайте.
• Глубина просмотра страницы.

---

2. Структура страниц и блоков

---

3. Адаптивность и требования к мобильному интерфейсу

Основные брейкпоинты адаптивности:

• Широкий экран: от 1200px — основная версия макетов для настольных компьютеров.
• Средний экран: от 768 до 1199px — планшеты и большие мобильные устройства.
• Мобильный экран: менее 768px — смартфоны и компактные экраны.

Изменения на мобильной версии:

• Меню становится выпадающим («гамбургер»).
• Формы занимают всю ширину экрана.
• Баннеры уменьшаются по высоте.
• Шрифты адаптируются под размер экрана.
• Элементы типа списка группируются по смысловым разделам.

---

4. Компоненты UI-кита

Интерфейсные элементы:

• Кнопки: первичные, вторичные, активные, неактивные состояния.
• Формы: поля ввода текста, чекбоксы, радиобаттоны, кнопки отправки.
• Селекторы: даты, выбор опций.
• Модальные окна: уведомления, подтверждения действий.
• Таблицы: расписания, прайс-листы.
• Изображения: иллюстрации, фотографии студий и инструкторов.
• Заглушки: пустой результат поиска, отсутствие элементов в списке.

Графические элементы:

• Цветовая палитра.
• Иконографика (стандартные и кастомные значки).
• Типография (шрифты, размеры шрифтов, межстрочные интервалы).

---

5. Правила работы с формами

• Все формы требуют согласия пользователя на обработку персональных данных согласно Федеральному закону РФ №152-ФЗ.
• Во всех формах должна присутствовать активная ссылка на Политику обработки персональных данных.
• Валидация полей осуществляется клиентской стороной.
• После успешной отправки данных пользователю показывается уведомление об успешности операции.

---

6. Передача материалов разработчикам

Передаем разработчику следующие материалы:

• Figma-файлы со всеми слоями и элементами дизайна.
• PNG-изображения логотипа и другой графики.
• SVG-векторную графику для использования на разных разрешениях.
• CSS-стили в виде комментариев в файлах макетов.
• Aнимированные прототипы взаимодействия (если есть).

---

7. Этапы работ, сроки и критерии приемки

Этапы разработки:

1. Анализ требований (1 неделя):

Определение целевой аудитории, уточнение деталей проекта, сбор материала.

1. Разработка концепции (1 неделя):

Создание скетчей и концептуальных решений главной страницы и ключевых экранов.

1. Создание детального макета (2 недели):

Детальная проработка всех страниц и компонентов.

1. Протестирование макетов (1 неделя):

Проверка макетов, внесение правок и финализация документации.

Критерии приемки:

• Макеты соответствуют техническому заданию.
• Файлы предоставлены в согласованном формате и удобны для последующей интеграции.
• Дизайн учитывает правила адаптивной верстки и корректно отображается на различных устройствах.
• Все интерактивные элементы работают согласно описанному сценарию поведения.

---

Примечание:

Все формулировки и детали наполнения макетов подлежат дальнейшему обсуждению и доработкам после получения дополнительной информации от заказчика.

---

После завершения каждого этапа необходима обратная связь и утверждение выполненной части работы заказчиком. Если вы хотите дополнить или уточнить какую-либо часть задания, пожалуйста, укажите это здесь: [заполнить].

Спасибо!

Техническое задание на дизайн сайта студии йоги «Прана»

0. Общая информация о проекте

Проект: сайт студии йоги «Прана»
Город: Новосибирск
Цель сайта: запись на пробное занятие и продажа абонементов онлайн
Платформа: Tilda
Онлайн-оплата: ЮKassa
Расписание: виджет CRM
Срок реализации дизайна и подготовки к передаче: 4 недели

---

1. Цели и метрики сайта

1.1. Бизнес-цели

---

1.2. Целевые действия

---

1.3. Основные метрики эффективности

---

1.4. Аналитика

На сайте необходимо предусмотреть установку:

• Яндекс.Метрики;
• Google Analytics при необходимости — [заполнить];
• пикселей рекламных систем — [заполнить];
• целей на отправку форм;
• целей на клики по кнопкам:
• «Записаться на пробное занятие»;
• «Купить абонемент»;
• «Посмотреть расписание»;
• «Позвонить»;
• «Написать в WhatsApp»;
• «Написать в Telegram»;
• целей на успешную оплату через ЮKassa;
• отслеживания UTM-меток.

---

2. Структура страниц и блоков

2.1. Общие блоки для всех страниц

---

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

---

2.3. Страница «Расписание»

---

2.4. Страница «Преподаватели»

---

2.5. Страница «Цены и абонементы»

---

2.6. Страница «Контакты»

---

2.7. Страница «Блог»

---

2.8. Страница статьи блога

Если статьи реализуются отдельными страницами на Tilda, необходимо предусмотреть шаблон статьи.

---

3. Требования к адаптиву

3.1. Брейкпоинты

Дизайн необходимо подготовить для следующих разрешений:

Основные макеты подготовить для:

• 1440 px;
• 1200 px;
• 768 px;
• 360 px.

---

3.2. Общие требования к адаптиву

---

3.3. Что меняется на мобильных

На мобильных устройствах необходимо:

1. Сократить высоту первого экрана, чтобы CTA был виден без лишнего скролла.
2. Использовать фиксированную нижнюю панель при необходимости:
3. «Записаться»;
4. «Позвонить»;
5. «WhatsApp/Telegram».
6. Увеличить кликабельные зоны до минимум 44×44 px.
7. Убрать декоративные элементы, ухудшающие читаемость.
8. Скрывать второстепенные изображения, если они мешают скорости загрузки.
9. Сделать формы максимально короткими.
10. Разместить согласие на обработку данных под формой в читаемом размере.
11. Проверить отображение CRM-виджета расписания на ширине 360 px.
12. Проверить сценарий покупки абонемента через ЮKassa на мобильном.
13. Обеспечить читаемость текста без масштабирования.

---

4. UI-кит

4.1. Общий визуальный стиль

Ассоциации бренда: спокойствие, доверие, мягкость, забота, телесность, осознанность.
Желаемое настроение: современная уютная студия без эзотерической перегруженности.

Заполнить/уточнить:

• логотип: [заполнить];
• фирменные цвета: [заполнить];
• фирменные шрифты: [заполнить];
• фотостиль: [заполнить];
• референсы сайтов: [заполнить];
• нежелательные решения: [заполнить].

---

4.2. Цвета

Предварительная цветовая логика:

---

4.3. Типографика

Требования:

• использовать не более 2 шрифтовых семейств;
• обеспечить читаемость на мобильных;
• соблюдать контрастность текста и фона.

---

4.4. Компоненты UI-кита

---

4.5. Ошибки и пустые состояния

Необходимо подготовить тексты и внешний вид для следующих ситуаций:

---

5. Требования к формам

5.1. Формы на сайте

---

5.2. Обязательные поля

---

5.3. Согласие на обработку персональных данных

Под каждой формой должен быть чекбокс согласия:

Текст согласия:

«Я согласен(на) на обработку персональных данных в соответствии с Политикой конфиденциальности и даю согласие на получение информационных сообщений от студии “Прана”.»

Слова «Политикой конфиденциальности» должны быть ссылкой на страницу политики:
[заполнить ссылку]

Если рассылка/маркетинговые сообщения требуют отдельного согласия, добавить второй чекбокс:

«Я согласен(на) получать информационные и рекламные сообщения от студии “Прана”.»

---

5.4. Требования по 152-ФЗ

На сайте необходимо предусмотреть:

1. Отдельную страницу «Политика конфиденциальности».
2. Ссылку на политику:
3. под каждой формой;
4. в футере;
5. в cookie-уведомлении.
6. Чекбокс согласия не должен быть отмечен заранее.
7. Форма не должна отправляться без согласия.
8. Пользователь должен понимать, какие данные он передаёт и зачем.
9. Для онлайн-оплаты необходим email для отправки электронного чека.
10. В футере разместить юридические данные оператора персональных данных:
11. ИП/ООО: [заполнить];
12. ИНН: [заполнить];
13. ОГРН/ОГРНИП: [заполнить];
14. юридический адрес: [заполнить];
15. email для обращений по персональным данным: [заполнить].

---

5.5. Валидация форм

---

5.6. После отправки формы

После успешной отправки пользователь должен видеть:

• сообщение об успехе;
• информацию о следующем шаге;
• возможность перейти в мессенджер;
• если это покупка — переход к оплате через ЮKassa или подтверждение оплаты.

Пример текста:

«Спасибо! Мы получили заявку. Администратор студии “Прана” свяжется с вами для подтверждения записи.»

---

6. Что передаём разработчику

Так как сайт реализуется на Tilda, дизайн должен быть подготовлен с учётом возможностей стандартных блоков и Zero Block.

6.1. Файлы и материалы

---

6.2. Стили для передачи

Передать разработчику:

• цветовую палитру с HEX-кодами;
• типографику:
• шрифты;
• размеры;
• line-height;
• начертания;
• межбуквенные интервалы;
• сетку:
• максимальная ширина контейнера;
• количество колонок;
• отступы;
• gutter;
• стили кнопок;
• стили форм;
• стили карточек;
• стили модальных окон;
• стили состояний hover/focus/error/success;
• стили ссылок;
• стили футера и шапки;
• правила адаптива;
• правила обрезки изображений;
• стили бейджей и меток.

---

6.3. Иконки

Требования к иконкам:

• формат SVG;
• единая толщина линий;
• единый стиль: outline или filled;
• размеры:
• 16×16;
• 20×20;
• 24×24;
• 32×32;
• отдельные иконки для:
• телефон;
• email;
• адрес;
• время работы;
• WhatsApp;
• Telegram;
• VK/Instagram*/другие соцсети [заполнить];
• календарь;
• направление йоги;
• оплата;
• чек/успех;
• ошибка;
• меню-бургер;
• закрытие.

\*Если используется Instagram, необходимо учитывать ограничения и юридические формулировки в РФ.

---

6.4. Анимации

Анимации должны быть лёгкими и не мешать загрузке сайта.

Не использовать:

• тяжёлые видео без оптимизации;
• слишком много параллакса;
• резкие анимации;
• мигающие элементы.

---

6.5. Интеграции

Разработчику необходимо предусмотреть:

---

7. Этапы, сроки, критерии приёмки

Общий срок: 4 недели

7.1. План работ

Итого: 30 календарных дней / 4 недели.

---

7.2. Контрольные точки

---

7.3. Критерии приёмки дизайна

Дизайн считается принятым, если:

1. Подготовлены макеты всех страниц:
2. главная;
3. расписание;
4. преподаватели;
5. цены и абонементы;
6. контакты;
7. блог;
8. шаблон статьи блога при необходимости.
9. На ключевых страницах есть явные CTA:
10. «Записаться на пробное занятие»;
11. «Купить абонемент»;
12. «Посмотреть расписание».
13. Дизайн учитывает реализацию на Tilda.
14. Подготовлены адаптивные версии для основных разрешений.
15. Все формы содержат согласие на обработку персональных данных.
16. Предусмотрены ссылки на:
17. политику конфиденциальности;
18. договор оферты;
19. согласие на обработку персональных данных при необходимости.
20. UI-кит содержит основные компоненты и состояния.
21. Подготовлены состояния ошибок, успешной отправки и пустых данных.
22. Учтена онлайн-оплата через ЮKassa.
23. Учтено встраивание CRM-виджета расписания.
24. Все изображения и иконки подготовлены к передаче.
25. В Figma соблюдена структура файлов, слоёв и компонентов.
26. Макеты согласованы заказчиком.
27. Нет критичных расхождений между утверждённой структурой и финальным дизайном.

---

7.4. Критерии приёмки после вёрстки на Tilda

После реализации на Tilda необходимо проверить:

---

8. Материалы, которые нужно предоставить заказчику / заполнить

Для старта работы необходимо заполнить:

1. Логотип и фирменный стиль: [заполнить]
2. Адрес студии: [заполнить]
3. Телефон: [заполнить]
4. Email: [заполнить]
5. Мессенджеры и соцсети: [заполнить]
6. Режим работы: [заполнить]
7. Список направлений йоги: [заполнить]
8. Список преподавателей с фото и описаниями: [заполнить]
9. Тарифы и условия абонементов: [заполнить]
10. Условия пробного занятия: [заполнить]
11. Правила отмены и переноса занятий: [заполнить]
12. Условия заморозки абонемента: [заполнить]
13. Юридические данные ИП/ООО: [заполнить]
14. Политика конфиденциальности: [заполнить]
15. Договор оферты: [заполнить]
16. Доступы/данные для ЮKassa: [заполнить]
17. Код или ссылка на CRM-виджет расписания: [заполнить]
18. Фото студии: [заполнить]
19. Отзывы клиентов: [заполнить]
20. Референсы по дизайну: [заполнить]

Техническое задание на дизайн сайта студии йоги «Прана»

Версия документа: 1.0
Дата: [заполнить]
Автор: [заполнить]
Заказчик: Студия йоги «Прана», Новосибирск

---

1. Цели и метрики сайта

1.1 Бизнес-цели

• Запись на пробное занятие (основная конверсия)
• Продажа абонементов через онлайн-оплату (ЮKassa)
• Формирование доверия к студии (команда, атмосфера, отзывы)
• Снижение нагрузки на администратора за счёт самостоятельной записи клиентов

1.2 Метрики успеха (KPI)

1.3 Целевая аудитория

[заполнить — краткие портреты: напр. «Женщины 25–45 лет, офисные работники, интересуются ЗОЖ», «Новички без опыта», «Опытные практики, ищущие конкретного преподавателя» и т.д.]

---

2. Структура страниц и блоков

---

3. Требования к адаптиву

3.1 Брейкпоинты (стандарт Tilda)

3.2 Изменения на мобильных версиях

• Меню — сворачивается в гамбургер, боковая/нижняя выезжающая панель
• Hero-блок — уменьшение шрифтов заголовков, вертикальная компоновка текст+CTA+изображение
• Карточки преподавателей/направлений — грид 3-4 колонки → 1 колонка (вертикальный скролл или свайп-карусель)
• Расписание — таблица трансформируется в вертикальный список/аккордеон по дням, т.к. горизонтальные таблицы плохо читаются на узких экранах
• Тарифная сетка — карточки тарифов в столбик, с возможностью горизонтального свайпа
• Форма записи — поля на всю ширину, крупные тач-зоны для кнопок (мин. 44×44px)
• Футер — меню сворачивается в аккордеон
• Фиксированная кнопка CTA «Записаться» — закреплена снизу экрана на мобильных (sticky button)
• Изображения — адаптивная подгрузка (избегать тяжёлых фото на мобильном трафике)

---

4. UI-кит: компоненты и состояния

4.1 Цветовая палитра и типографика

• Основной, акцентный, нейтральные цвета: [заполнить — брендбук студии, если есть]
• Шрифты (заголовки/текст): [заполнить]
• Логотип: [заполнить — файлы в SVG/PNG]

4.2 Компоненты

4.3 Иконки

Единый стиль иконок (outline/filled — [заполнить]), набор: телефон, email, геолокация, часы работы, соцсети, направления йоги, чекбокс, стрелки.

---

5. Требования к формам (152-ФЗ)

Каждая форма на сайте (запись на пробное, обратная связь, подписка на блог, оплата) должна содержать:

1. Чекбокс согласия на обработку персональных данных — не предзаполнен, обязателен для отправки
2. Текст рядом с чекбоксом:

> «Нажимая кнопку «[Записаться / Отправить / Оплатить]», вы соглашаетесь с [Политикой обработки персональных данных] и даёте согласие на обработку ваших персональных данных»

1. Слово «Политикой обработки персональных данных» — гиперссылка, открывается в новой вкладке на страницу/документ: [заполнить ссылку]
2. При попытке отправки без отмеченного чекбокса — визуальная ошибка (подсветка красным + текст «Необходимо согласие на обработку данных»)
3. На странице оплаты дополнительно отображается ссылка на публичную оферту: [заполнить ссылку]
4. Реквизиты оператора персональных данных в футере сайта: [заполнить — название юрлица/ИП, ОГРН/ИНН]

---

6. Что передаём разработчику

---

7. Этапы, сроки, критерии приёмки

Общий срок: 4 недели

Чек-лист финальной приёмки

• [ ] Все страницы свёрстаны согласно макетам (desktop/tablet/mobile)
• [ ] Расписание из CRM-виджета отображается корректно на всех устройствах
• [ ] Оплата через ЮKassa проходит тестовый платёж успешно
• [ ] Формы отправляют данные в [CRM/почту — заполнить], приходят уведомления
• [ ] Чекбокс согласия на ПД работает, ссылка на политику открывается
• [ ] Сайт проходит проверку на мобильную адаптивность (Google Mobile-Friendly Test)
• [ ] Скорость загрузки: PageSpeed Insights не менее [заполнить, напр. 70] баллов mobile
• [ ] Все иконки, шрифты и цвета соответствуют UI-киту
• [ ] Заказчик обучен редактированию базового контента в Tilda (если требуется): [заполнить]

---

Открытые вопросы к заказчику

• [заполнить: есть ли готовый брендбук/логотип?]
• [заполнить: какая CRM используется и какой у неё виджет для встраивания расписания?]
• [заполнить: кто предоставляет тексты и фотографии — заказчик или дизайнер/копирайтер?]
• [заполнить: нужна ли многоязычность сайта?]
• [заполнить: юридическое лицо для указания в политике конфиденциальности и реквизитах?]