У каждого проекта свой мир
«о.да» — квартал в Головинском районе Москвы, который сам себя называет кварталом оптимистов. У него есть брендбук, и он довольно упрямый: тёмно-синий с персиковым, овал как единственная форма, антиква Maregraphe рядом с гротеском TT Norms, «пластилиновые» 3D-объекты — ракета, динозавр, лейка.
Такой бренд не ложится на типовой шаблон сайта застройщика. Овал должен остаться овалом, а знак ударения над «а» — выходить за край макета, как написано в гайде. Значит, сайт собирается заново под бренд.
Вторая часть задачи — время. Чем раньше есть первый экран, тем раньше проект можно показывать людям.
Сначала разобрали три сайта, которые уже работают
До первой строки кода мы разложили на части три сайта проектов застройщика: one-mr.ru, jois.moscow и мыс.рф. Смотрели на устройство: на чём собран фронт, откуда приезжают данные квартир, чем анимируют прокрутку.
Картина вышла такая. Два сайта из трёх собраны на Next.js, третий целиком живёт на Bitrix. Данные квартир во всех трёх приходят с бэкенда Bitrix. Прокрутку в двух случаях из трёх ведут GSAP и Lenis — те же библиотеки, с которыми работаем мы.
Это и был ответ на вопрос «сможем ли». Внутри нет ничего закрытого — есть знакомый стек и много ручной работы.
Сайт ведёт себя так, как написано в брендбуке
Первый экран — рендер квартала, который проматывается вместе со страницей: вы крутите колесо, кадр идёт вперёд. Дальше фотографии попадают в овальные маски — ту самую фигуру из логотипа. Лобби листается вертикальным слайдером, благоустройство показывает видео, привязанное к прокрутке.
Заканчивается всё мастер-планом квартала: объёмная модель в фирменных цветах поворачивается, пока страница едет вниз. Это сцена на Three.js.
Собрано на Next.js 16 и React 19. Плавную прокрутку держит Lenis, тайминги — GSAP. Шрифты бренда подключены локально, поэтому текст не прыгает при загрузке.
Прокрутка работает как сценарий
На таком сайте прокрутка работает как пульт: запускает видео, раскрывает текст, поворачивает модель, переключает слайды. Человек просто идёт вниз, а страница рассказывает.
Каждый такой блок мы собирали один раз. Дальше он переезжает на следующий проект — меняются кадры, цвета и шрифты, механика остаётся.
Чего в этой версии нет: каталога квартир, фильтров и связи с CRM — они стоят следующими фазами в плане, до них дело не дошло. Сайт также размещён на нашем сервере — на домен застройщика его пока не перенесли.
Два концепта и брендбук — за неделю
У JOIS и ONE Tower сайты уже есть. Мы собрали к ним альтернативные концепты, чтобы показать, за сколько такая страница вообще собирается.
У ONE Tower главный ход — подъём по башне: прокрутка ведёт от лобби к саду на высоте, номер этажа меняется вместе с кадром. У JOIS — овальные маски, четыре башни с именами и горизонтальная лента с бытом квартала.
Тем же заходом к ONE Tower собрался брендбук: логотип, цвета, типографика. Три страницы, одна неделя.
Тот же стек, только страница здесь продаёт
Четвёртый сайт — не про жильё. Практикум «ВАЙБ»: шестнадцать экранов, форма записи, тарифы, оплата, оферта и политика. Всё, что нужно, чтобы человек дошёл до кнопки и заплатил.
Заявка уходит в Telegram-бот, оплата принимается через Т-Банк, есть оплата частями. Сайт работает на agiage.ru — это действующая касса, которая уже принимает платежи.
Инструмент тот же, что и у сайтов кварталов. Меняется то, чем заканчивается страница.
Сколько это заняло на самом деле
Ниже — наши собственные замеры. Первая строка: неделя на два концепта и брендбук. Вторая: две недели от брифа до собранного сайта квартала.
Третья строка — план. Столько по нашей же разбивке на фазы занимает полный сайт с каталогом квартир, фильтрами и интеграциями. Мы до него не дошли.
Сроки студийной разработки таких сайтов мы не измеряли — поэтому и не сравниваем с ними. Две недели по «о.да» — это от брифа 27 марта до последнего собранного блока 7 апреля.
Меняется бренд — сборка остаётся
От проекта к проекту переезжает устройство: набор блоков прокрутки, структура проекта, сборка и выкладка на сервер. Дизайн каждый раз свой. Новое в каждом проекте — шрифты, цвета, формы и кадры.
Поэтому второй сайт всегда дешевле первого, а четвёртый — дешевле второго.
Соберём сайт вашего проекта на том же стеке
Начинаем с первого экрана и одного раздела: вы сразу видите работающую страницу. Дальше добавляем каталог, формы и интеграции. Сроки и стоимость считаем до старта.