Здравствуйте, разрабатываем яркий и красочный игровой проект.

По дизайнерской задумке сайт не скроллится целиком (высота документа равна высоте экрана устройства), а весь контент упаковывается в прокручиваемые по вертикали контейнеры. При этом контента много, текста много, слоёв тоже много, так что задача достаточно сложна.

Мы находимся на заключительном этапе разработки, так что вносить что-то своё и отходить от изначального дизайна нельзя. Иначе это будет "сайт из двух разных половинок".

Брейкпоинты
------------------
Дизайнер отвалился примерно на середине работы, так что исходный дизайн предоставлен для двух брейкпоинтов: 1680x900 (десктоп) и 375х667 (мобильная версия). Нужны дополнительные версии. Так, полностью отсутствует выделенный лейаут для планшетов, в результате там сейчас отображается либо моб версия (в портрете), либо десктоп (в лэндскейпе). Десктоп версия совершенно не ориентирована под тач, а моб версия с одноколоночным лейаутом явно слишком растянута. Скорее всего, нужно разместить две колонки.

Далее я привожу полные разрешения экрана.Не смотря на это, нужно учесть недоступное нам пространство, занятое UI ОС и браузера. Нужно учесть основные браузеры (chrome, firefox, edge, safari) на windows, macos, ios и android.

Адаптация под hdpi-дисплеи выполняется на уровне css, все картинки должны быть векторные (.svg), а отдельные макеты под hdpi не нужны.

1280 х 720 (планшет, тач, лэндскейп, 16:9)
720 х 1280 (планшет, тач, портретный, 9:16)

1024 x 768 (планшет, тач, лэндскейп, ipad mini, 4:3)
768 х 1024 (планшет, тач, портретный, ipad mini, 3:4)

1366x1024 (планшет, тач, лендскейп, ipad pro, 4:3)

1024x1366 (планшет, тач, портретный, ipad pro, 3:4)

1280х720 (ноутбук, 16:9)

1366х768 (ноутбук, 16:9)

1440х900 (ноутбук, 16:10 - это, в т.ч., retina-дисплеи, 16:10)

1920х1080 (настольный компьютер, 16:9)

2560x1440 (настольный компьютер, 16:9 (но это не точно =)))

Также понадобится один макет для описания поведения лейаута, когда страница открыта на большом экране ПК, но не на весь экран - так мы получаем необычное соотношение сторон - например, на 1920х1080 страница, открытая на половину экрана по горизонтали получает разрешение 960x1080.


Анимации и красота
----------------------------
Сейчас наша фигма полностью статична, соответственно, все анимации и т.д. приходится додумывать верстальщику. Это нужно исправить. Анимации вам нужно будет предоставить либо через внутренние механизмы Figma (вроде SmartAnimate), либо в виде .html+.css+.js
Так же в проекте не хватает мелких фишечек - кастомных иконок, прозрачностей кое-где. Это - направление дальнейшей работы.

Фиксы UX
--------------
В полную версию ТЗ включено описание нескольких уже известных UX-проблем, которые следует решить.

Формальности
--------------
Формат работы: авральный
Сроки: обсуждаемы
Бюджет: указанный взят с потолка, можем обсудить в обе стороны
Просьба к откликающимся: обязательны либо примеры работ, либо долгий и нудный созвон перед предоставлением полного ТЗ и макетов.