разработка сайта

Техническое задание для разработчика сайта (Webflow)
Проект: Интерактивная платформа с элементами геймифицированного обучения
Формат: Сайт из 4 страниц
Цель: Создание яркой, адаптивной и дорабатываемой пользователем платформы на Webflow
Срок: до 14 дней
Оплата: поэтапная (50/50), с получением доступа к копии проекта после первой части

1. Общая идея и требования
Цель: создать веб-платформу на Webflow для обучения в интерактивной, полугеймифицированной форме.

Визуальный стиль — яркий, эмоциональный, ориентированный на широкую аудиторию (взрослые, молодежь, домохозяйки, начинающие предприниматели).

Без «детской» мультипликации, но с элементами мягкой мультяшности и анимациями, которые добавляют вовлечённость и ощущение лёгкости.

Цветовая гамма — насыщенные, живые: неоновые фиолетовый, жёлтый, оранжевый, теплые переходы, нежные фоны.

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

Все элементы должны быть редактируемыми через Webflow Editor: названия кнопок, описания, структура блоков.

Анимации и взаимодействие: использовать стандартные возможности Webflow (без кода), чтобы обеспечить их самостоятельную модификацию.

Шрифты: крупные, выразительные, частично в bubble- или комикс-стиле.

2. Страница 1 — Главная
Главная страница — точка входа на платформу.

Дизайн подаётся как "интерактивный мир", возможно, в виде карты или панели, откуда открываются «комнаты».

Основные элементы — 6 круглых интерактивных объектов ("шаров"), каждый — как будто капсула, комнатка или обучающий модуль.

Все 6 шаров — кликабельны, но пока ведут на одну и ту же страницу (в дальнейшем заказчик будет клонировать и наполнять их).

Один из шаров — активный (первый), остальные — с визуальным эффектом «ожидания» (например, подсвечены, но без перехода).

Шары — анимированы: при наведении — вибрация, тень, вращение, свечение.

Ниже — панель авторизации (вход в личный кабинет), простой блок логин/пароль.

Дополнительно — элементы «индикатора пути» и псевдо-кошелёк, в который будут «капать бонусы» (например, в виде апельсинок).

3. Страница 2 — Личный кабинет
После авторизации пользователь попадает в виртуальное пространство — оформленное как игровая панель или комнатка управления.

Интерфейс — не офисный, а визуально подаёт ощущение участия в процессе (например, как контрольная панель, планшет или цифровой кошелёк).

В центре — 6 шаров, визуально таких же, как на главной, но здесь они отображаются как разделы ЛК.

Один шар открыт, остальные — «в ожидании».

Открытый шар ведёт на первую «обучающую подстраницу».

Визуальные метки:

Индикатор прогресса

Количество бонусов (иконка с апельсинками)

Никнейм/аватар

Все надписи — условные (возможно, сокращённые или неполные), чтобы можно было подписать позже вручную.

Необходим UI с эффектами появления элементов, псевдодоска или плавающие блоки с данными.

4. Страница 3 — Первая обучающая страница (уровень)
Это первый уровень обучения, открытый из шара в ЛК.

Страница оформлена в стиле учительской доски, классной панели или погодной капсулы.

Дизайн:

Центральный блок — полотно с кнопками (до 4), расположенными свободно

Кнопки — неполные названия («Погру…», «Практи…» и т.д.)

При клике на одну из кнопок — имитация перехода, можно настроить Scroll или якорь

Также на странице должен быть интерактивный блок в формате ChatZoom — как будто педагог ведёт чат-доску или зум-урок.

Этот элемент оформляется в виде слайдера, переключателя блоков или всплывающей панели.

Элементы визуальной игры:

Свечение кнопок

Плавная смена фонов

Ракурс как будто "погружаешься внутрь"

Внизу — кнопка «Вернуться», закреплена.

5. Страница 4 — Внутренность любого шара
Это копируемая шаблонная страница для будущих разделов.

Оформлена как интерактивная капсула — визуально отличающаяся от других страниц, но в том же стиле.

Внутри:

Задание/блок информации

Место для ответа/формы

Бонус — «апельсинка» падает в кошелёк

Один элемент — подсказка от "педагога" (например, всплывающее окно с речью)

Возможна анимация заднего фона (световые эффекты, мерцание, “воздух” в капсуле).

Шар представляет собой комнату с заданием, и должен легко дублироваться для новых тем.

6. Важные условия
После завершения первого этапа (главная + личный кабинет) заказчик получает:

Копию проекта на Webflow (либо clonable link, либо доступ с возможностью дублирования)

Возможность самостоятельно дописывать, менять текст, структуру, названия

После второго этапа (уровень + шар) — то же самое.

Вся работа делится на 2 части, каждая оплачивается по завершению блока.

Если потребуется доработка — возможна повторная заявка.