nimatica
Обсудить проект
2026

cairn

Сайт архитектурного бюро

Сайт архитектурного бюро на двоих, собранный не длинной страницей, а восемью полными экранами. Экран сменяет экран одной анимацией, и всё это работает на английском и португальском.

Задача

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

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

Что сделали

Восемь экранов, которые перелистываются, вместо одной длинной страницы

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

Внутри секции экран не закрывается вовсе. Колесо ведёт по содержимому и только на его краю уводит дальше. Граница между блоками прогибается к курсору и возвращается, когда он уходит.

Главная страница: слева макет дома на песочном поле, справа два цветных блока — про подход бюро и про людей.

Процесс как восемь шагов, по одному на экран

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

Это как раз то, что клиент читает перед выбором студии, потому что здесь сказано, кто спорит с согласующими и кто отвечает на стройке. Список прочитали бы как формальность, а по одному шагу на экран — читают.

Первый шаг процесса на терракотовом экране: заголовок «Участок», три строки текста и дом на своём участке с прочерченным ходом солнца.

Шесть зданий, каждое забирает экран в свой цвет

Проект здесь не плитка в сетке. Ему отдан весь экран: слева здание на поле своего цвета, справа белая карточка с названием, типом, четырьмя строками про решение, которое его определило, и с местом, годом и стадией.

Переход к следующему проекту меняет цвет всей секции, а вместе с ним шапка переключается со светлой на тёмную, поэтому тёмный проект не съедает меню.

Экран проекта: одноэтажный дом вокруг закрытого двора на шалфейно-зелёном поле, справа белая карточка с названием и описанием.

Люди и один способ написать

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

Экран контактов — полоса цвета с упругими границами по бокам, одна строка текста и одна кнопка, которая открывает WhatsApp. Ни формы, ни адреса, который надо переписывать: адрес бюро и подпись студии стоят в подвале, и с кнопкой ничто не спорит.

Экран студии: заголовок «Двое, одна комната, сорок зданий», рядом буквы A и M, вскрытые, с мастерской внутри каждой.

Техническая часть

Здесь всё написано руками и проверено замером, а не на глаз. Вот что показали цифры про скорость, переход, второй язык и телефон.

Скорость и надёжность

  • 96 по скорости на сайте, который анимирован

    Lighthouse замеряет десктопную версию на 96 по скорости: главная картинка на экране за 1,4 секунды, время блокировки нулевое, сдвига вёрстки нет.

  • Сто баллов за доступность и практики

    На десктопе Lighthouse ставит странице 100 за доступность и 100 за лучшие практики.

  • Проверено на живом адресе

    Обе версии пройдены на живом адресе, на десктопе и на телефоне: ошибок JavaScript нет, упавших запросов нет, незагрузившихся картинок нет.

Стек и переход

  • Статика, написанная руками

    Ни фреймворка, ни сборки: HTML, CSS и JavaScript написаны руками, плюс две небольшие библиотеки для текста и таймлайнов.

  • Один файл перехода, пять углов

    Заливка между секциями — один файл анимации, повёрнутый под свой угол для каждой страницы: девять копий стоили бы 285 КБ на ровном месте.

Второй язык

  • Второй язык весит 27 КБ

    Португальская версия — своя страница, которая берёт у английской все стили, скрипты, картинки и анимацию, поэтому вся вторая версия весит 27 КБ. Открыть португальскую версию

Мобильная версия

  • У телефона своя раскладка

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

Своя графика

  • Восемнадцать своих картинок, разрезанных на слои

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

Мобильная версия

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

Что получилось

  • Всё бюро помещается в восемь экранов, и каждый переход между ними — одна анимация.
  • Восемь шагов процесса читают по одному, а не пробегают глазами как список.
  • Один и тот же сайт работает на двух языках, и посетителю с португальским открывается португальская версия сама.
  • Lighthouse замеряет десктопную версию на 96 по скорости, сдвигов вёрстки нет вовсе.

Сайт работает так, как продаёт себя такое бюро: показывает здания, объясняет, кто что делает между участком и ключами, называет двоих, которые будут отвечать, и заканчивается одной кнопкой. Тот, кто прошёл восемь экранов, уже понимает устройство практики до первого сообщения.

Нужен похожий проект?

Напишите, что должен делать ваш. Ответим в тот же день с оценкой и сроками.

Вопросы по проекту

  • Этот — да: Lighthouse ставит десктопной версии 96 по скорости, главная картинка появляется за 1,4 секунды, блокировок нет, вёрстка не прыгает. Это написанная руками статика с двумя небольшими библиотеками и без фреймворка, поэтому до первого экрана ждать нечего.

  • Все восемнадцать изображений здесь сгенерированы в одном стиле, а потом разрезаны на слои, чтобы предметы двигались по отдельности. Это выход, когда здания ещё не достроены, фотографии чужие или съёмка стоит дороже сайта.

  • Вторая версия живёт по своему адресу и берёт у первой все стили, скрипты и картинки, поэтому весит 27 КБ целиком. На первом заходе версию выбирает язык браузера, а ручной выбор запоминается и дальше старше браузера.

  • Такие сайты считаются от тарифа «Сайт компании», актуальная цифра стоит на странице цен. На неё влияют количество экранов, объём сгенерированной графики и число языков.

Похожие проекты