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

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

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

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

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


Скорость и надёжность
96 по скорости на сайте, который анимирован
Lighthouse замеряет десктопную версию на 96 по скорости: главная картинка на экране за 1,4 секунды, время блокировки нулевое, сдвига вёрстки нет.
Сто баллов за доступность и практики
На десктопе Lighthouse ставит странице 100 за доступность и 100 за лучшие практики.
Проверено на живом адресе
Обе версии пройдены на живом адресе, на десктопе и на телефоне: ошибок JavaScript нет, упавших запросов нет, незагрузившихся картинок нет.


Стек и переход
Статика, написанная руками
Ни фреймворка, ни сборки: HTML, CSS и JavaScript написаны руками, плюс две небольшие библиотеки для текста и таймлайнов.
Один файл перехода, пять углов
Заливка между секциями — один файл анимации, повёрнутый под свой угол для каждой страницы: девять копий стоили бы 285 КБ на ровном месте.


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

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


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

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


