Роудмап / Дизайн и фиксированная вёрстка
Обновлено: 28 мая

Дизайн и фиксированная вёрстка

Тёмный агрессивный стиль. По ТЗ — фиксированный макет, при сужении окна горизонтальная прокрутка (как на ggdrop.black).

Статус: ⚠️ Расхождение с ТЗ. Тёмный стиль есть, но сайт сейчас сделан отзывчивым (Tailwind responsive), а не фиксированным с горизонтальной прокруткой. Это другой подход к вёрстке. Нужно решение заказчика — оставляем как есть или переделываем под фиксированную ширину.

Что сделано в коде на сегодня

Тёмная палитра: фоны #0a0a0a / #1a1a1a, акценты неоновые жёлтый и красный, контрастные карточки. По атмосфере — попадаем в «агрессивный» стиль из ТЗ.
Дизайн-система выстроена на Tailwind CSS — typography scale, spacing, цвета вынесены в tailwind.config.
Реализованы все основные экраны проекта: главная, маркет, карточка скина, кейсы, страница открытия кейса, апгрейд, /premium лендинг и кабинет, ЛК.
SPA-архитектура на Vue 3 — переходы между страницами без перезагрузки, общий лейаут.

Чего нет относительно ТЗ

Нет фиксированного макета. Сейчас при сужении окна блоки перестраиваются (responsive). ТЗ требует обратного: сохранять фиксированную ширину и появлять горизонтальную прокрутку как на ggdrop.black. Это два разных подхода, и переход с responsive на fixed — это переделка вёрстки большинства страниц.
Не определена базовая ширина. 1280 px? 1440? 1920? От этого зависит сколько колонок помещается в маркет, какого размера карточки кейсов, и где появится горизонтальный скролл.
Нет Figma-макетов. В ТЗ есть одна ссылка на Figma — только для окна подбора замены при выводе скина (§11.4). Главной, маркета, кейсов, апгрейда, /premium — макетов от заказчика нет, делалось «по референсу с ggdrop.black» и здравому смыслу.
Поломка на 1280 px на странице /upgrade. 25.05 заказчик прислал скрин — 3-колоночная раскладка наезжает при сужении до 1280. Заведено отдельным пунктом «Десктоп при сужении окна» в разделе 10.
Почему так получилось. Когда стартовали разработку, ТЗ ещё не было в окончательной форме, и было ощущение что фиксированная вёрстка с горизонтальной прокруткой — это устаревший подход (в 2025 году так почти никто не делает). Решили делать responsive на Tailwind, чтобы заодно закрыть и мобилу. Сейчас выясняется, что заказчик прицельно хочет «как на ggdrop.black», и это решение надо переподтвердить или переделать.

Открытые вопросы

🔴 Срочно

Фиксированная ширина или оставляем responsive?

📄 В ТЗ
§2.2: «Фиксированный макет (аналог ggdrop.black), при сужении — горизонтальная прокрутка». Ширина не указана.
💾 В коде
Сделан responsive на Tailwind. Все экраны построены под перестроение при сужении, а не под скролл.
❓ Нужно
Решение заказчика: 1) оставить responsive (отказаться от пункта ТЗ), 2) переделать на фиксированную — тогда какая базовая ширина и где Figma-макеты для основных страниц?

Назад к роудмапу