Northline: сайт архитектурного бюро, где можно редактировать внешний вид дома

Northline представляет нашу концепцию сайта архитектурного бюро, которое проектирует загородные дома. В Shvetsov Studio мы поставили задачу передать характер архитектуры через визуальную подачу и дать посетителю возможность самостоятельно изучить дом.

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

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

Архитектура задаёт характер сайта

Основой визуальной концепции стал загородный дом среди сосен. Тёмное дерево, тёплый свет окон и лесное окружение определили настроение первого экрана. Крупное название Northline и фраза «В своём ритме. На своей земле» дополняют изображение.

Сдержанная типографика и светлая навигация оставляют внимание на архитектуре. Изображения позволяют рассмотреть материалы, пропорции дома и его связь с ландшафтом.

Последовательное знакомство с проектами

Выстроили страницу как путь от общего впечатления к деталям. После знакомства с бюро посетитель видит три проекта: «Лесной дом», «Тихий двор» и «Внутренний свет».

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

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

Шесть вариантов одного дома

Центральным интерактивным элементом стал конфигуратор Northline 160. Посетитель может выбрать один из трёх материалов фасада: тёмный ясень, термососну или серебристый кедр. Затем определить внешний вид террасы: оставить её открытой или добавить перголу.

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

От фасада к планировке

Выбранный облик дома сохраняется в следующем разделе. При прокрутке архитектурное изображение сменяется планом, связывая внешний вид здания с его внутренним устройством.

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

Разработка и мобильная версия

Разработали интерфейс на React, Next.js и TypeScript. Для анимации использовали GSAP, для плавной прокрутки Lenis. Работающее демо разместили в портфолио Shvetsov Studio.

На телефоне доступны просмотр проектов, выбор фасада и террасы, открытие планировки. Проверили страницу в браузере на ширинах 390, 1024, 1440 и 2560 пикселей, а также работу конфигуратора и окна с планом.

Разработали и опубликовали интерактивный сайт Northline. В одной странице объединили презентацию архитектурного бюро, знакомство с проектами и возможность выбрать внешний вид дома.

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

В проекте реализованы:

• Три презентации проектов: два загородных дома и интерьер.

• Шесть сочетаний материалов фасада и устройства террасы.

• Переход от изображения выбранного дома к архитектурному плану.

• Отдельное окно для подробного просмотра планировки.

• Мобильная версия с сохранением основных интерактивных возможностей.
  
  Проверили сайт в браузере на четырёх ширинах экрана: 390, 1024, 1440 и 2560 пикселей. Проверены переключение конфигурации, открытие и закрытие планировки, работа прокрутки.
  
  Northline создан как собственная дизайн-концепция Shvetsov Studio. Результат можно оценить в работающем демо: пройти весь сценарий и попробовать интерфейс самостоятельно.