MERSI — парижская архитектурная студия с изысканным, точным и глубоким визуальным подходом к пространству. Когда они обратились к нам, перед ними стояла задача не только изменить дизайн веб-сайта, но и восстановить цифровое присутствие, которое наконец-то стало соответствовать качеству их работы.
Проект стал полной трансформацией: новое визуальное направление, адаптированный интерфейс Webflow и интерактивный слой с индивидуальным кодом, призванный сделать проекты более редакционными, более захватывающими и более отличительными.
По своей сути веб-сайт был построен вокруг простой идеи: создать цифровой опыт, который находится где-то между архитектурной книгой и интерактивным объектом.
Начиная с общей системы
Когда MERSI обратилась к нам, их существующий веб-сайт стал скорее ограничением, чем инструментом.
Он был основан на универсальном шаблоне Webflow, привязанном к модели ежемесячной подписки и привязанном к долгосрочным обязательствам. Помимо технических и финансовых ограничений, самая большая проблема была более фундаментальной: веб-сайт никогда не ощущался по-настоящему похожим на их.
Визуальная система не отражала чувствительность студии, и аналогичные шаблоны использовались для других студий в их области. Для архитектурной практики, где важны изображение, точность и позиционирование, это создало настоящий разрыв.
В результате веб-сайт так и не был полностью реализован внутри компании. Он не использовался ни как мощный бизнес-инструмент, ни как надлежащее представление работы студии. Он существовал, но не носил бренда.
Нашей первой целью было помочь MERSI восстановить контроль над своим цифровым присутствием.
Сохраняя веб-поток, перестраивая все
Одно важное решение было принято заранее: мы сохраним Webflow. MERSI уже освоилась с этой платформой и хотела сохранить привычную среду редактирования. Целью было не отказаться от Webflow, а отойти от общей системы, которую им предоставили.
Мы рассматривали Webflow как основу CMS и публикации, перестраивая весь процесс с нуля. Структура, макеты, визуальное направление, взаимодействие и уровень пользовательского кода были переработаны, чтобы создать что-то полностью адаптированное для студии.
Для нас это было важным отличием. Webflow не был ограничением. Шаблон был.
Сохранив инструмент, но удалив общую структуру, мы могли бы предложить MERSI как автономию, так и гораздо более сильный творческий опыт.
Переопределение бренда вокруг существующего логотипа
Редизайн веб-сайта также стал частью более широкого обновления бренда. У MERSI уже были логотип и монограмма, созданные Морганом Тубианой, и заменять их не было идеей. Вместо этого мы перестроили мир вокруг них.
Предыдущий визуальный стиль показался студии слишком громким. Он в значительной степени опирался на фиолетовые тона и визуальный язык, который казался слишком агрессивным, слишком декоративным и не соответствовал спокойной элегантности их архитектурных работ.
MERSI хотела двигаться в сторону чего-то более изысканного. Направление, близкое к спокойной роскоши: тонкое, точное, тактильное и уверенное, но без демонстративности.
Мы работали над новой визуальной атмосферой, основанной на сдержанности, контрасте, материальности и редакционном ритме. Целью было не заставить бренд исчезнуть в минимализме, а создать более спокойную среду, в которой проекты могли бы взять на себя инициативу.
Айдентика должна была быть премиальной, но не холодной. Минимальный, но не пустой. Цифровой, но с сильным ощущением материального присутствия.
Между печатью и цифрой
С самого начала мы хотели, чтобы веб-сайт находился где-то между книгой по архитектуре и интерактивным цифровым опытом.
Архитектура часто представлена через книги, портфолио, печатные документы и тщательно составленные визуальные системы. В этих объектах есть особый ритм: способ размещения изображений, роль белого пространства, соотношение типографики и фотографии, напряжение между тишиной и деталями.
Мы хотели привнести часть этой чувствительности в браузер.
Макеты были разработаны под сильным редакционным влиянием. Страницы создаются, а не просто заполняются. Изображения рассматриваются не как блоки контента, а как материал. Типографика выступает в качестве структурного элемента. Формы, метки и переходы создают ощущение обрамления и движения.
В то же время опыт должен был оставаться однозначно цифровым. Сайт не пытается имитировать печать. Он использует взаимодействие, движение и переходы, чтобы превратить редакционную логику в нечто более живое.
Результатом является визуальная система, которая кажется спокойной, точной и захватывающей, но при этом предлагает моменты неожиданности.
Проектирование для сублимации проектов
Основная цель сайта была проста: сублимировать проекты MERSI.
Но доступный визуальный материал представлял собой настоящую проблему для дизайна. Многие изображения проекта были портретно-ориентированными, что может быть сложно обрабатывать в Интернете, особенно при попытке создать иммерсивные макеты без слишком агрессивной обрезки или повторения одной и той же композиции снова и снова.
Вместо того, чтобы загонять каждый проект в традиционную сетку, мы разработали более гибкую визуальную систему. Макеты позволяют портретным изображениям стать преимуществом, а не ограничением. Они создают вертикальный ритм, напряжение и ощущение галереи.
Это также помогло нам избежать типичной структуры портфолио архитектуры, где каждый проект сводится к предсказуемой последовательности полноразмерных изображений.
Мы хотели, чтобы каждый проект чувствовал себя куратором. Интерфейс должен был создать пространство вокруг работы, придать каждому изображению правильное присутствие и направлять пользователя через контент, не перегружая его.
Задача заключалась не в том, чтобы добавить больше дизайна. Это было сделано для того, чтобы создать правильные условия для того, чтобы работа стала более мощной.
Фирменный слайдер с разделенным экраном
Одним из ключевых компонентов веб-сайта является слайдер с разделенным экраном.
Он построен на основе двух больших визуальных зон и центральной системы этикеток. Композиция создает сильное ощущение напряжения между изображениями, а метка действует как якорь посередине экрана.
Этот компонент стал одним из отличительных моментов сайта, поскольку он отражает общее направление проекта: редакционное, минимальное, но сильно интерактивное.
Взаимодействие простое для понимания, но визуально запоминающееся. Это дает пользователю возможность перемещаться по проектам, не полагаясь на стандартный шаблон карусели. Структура разделенного экрана также усиливает идею сравнения, ритма и пространственной композиции.
Для архитектурной студии это было очень естественно. Это почти похоже на перемещение по визуальному развороту, но с цифровым уровнем контроля и движения.
Ввод тематического исследования
Мы также хотели, чтобы переход к тематическому исследованию ощущался как обдуманный момент.
Вместо использования стандартной загрузки страницы мы разработали переход, при котором обложка проекта переворачивается и ведет пользователя к изучению конкретного примера. Это движение создает непрерывность между списком проекта и страницей проекта, делая навигацию более физической.
Обложка — это не просто миниатюра. Он становится переходным объектом.
Эта деталь была важна, поскольку сайт построен на идее существенности. Мы хотели, чтобы взаимодействие было связано с визуальным языком сайта, а не добавлялось в качестве декоративных эффектов.
Переход дает пользователю ощущение входа в проект, почти как открытие книги, переворачивание карты или открытие новой поверхности.
Оказавшись внутри, опыт тематического исследования переходит в горизонтальную структуру прокрутки, создавая более кинематографичный и редакционный способ навигации по проекту.
Изменение положения проектов при прокрутке
Еще одно важное взаимодействие происходит на странице проектов.
По мере прокрутки пользователя проекты постепенно перемещаются в более структурированную сетку. Макет начинается с динамической композиции и постепенно переходит в порядок.
Это движение отражает одну из идей, которые мы исследовали на протяжении всего проекта: взаимосвязь между свободой и структурой.
Архитектура часто стремится к этому балансу. Проект может казаться подвижным, эмоциональным или атмосферным, но он всегда поддерживается строгой базовой системой. Мы постарались передать то же напряжение в интерфейсе.
Анимация призвана не только впечатлять. Это помогает создать ощущение прогресса и придает индексу проекта более сильное повествовательное качество.
Вместо того, чтобы представлять все проекты в виде статичных карточек, страница становится пространственной композицией, которая реорганизуется по мере перемещения пользователя по ней.
Создание индивидуального веб-процесса
Хотя веб-сайт был создан на основе Webflow, он был спроектирован и разработан как индивидуальный цифровой продукт.
Webflow предоставил структуру CMS и среду редактирования, что позволило команде MERSI контролировать свой контент. На основе этой основы Томас Карре разработал специальный слой взаимодействия, который придает веб-сайту уникальное поведение.
Такой гибридный подход позволил нам объединить две важные потребности: автономность клиента и высокий уровень творческого исполнения.
Для нас проект никогда не был целью доказать, что Webflow может или не может что-то сделать. Речь шла об использовании правильных частей инструмента, а затем его расширении там, где опыт требовал большей точности.
В результате получается веб-сайт, который остается управляемым для клиента, хотя и далек от стандартной сборки Webflow.
Технический подход
Структура сайта построена на основе Webflow и CMS, с полностью настраиваемым слоем JavaScript, включенным в Vite и развернутым на Netlify. Стек анимации:
- GSAP (с ScrollTrigger, SplitText и Flip) для всех анимаций.
- Ленис для плавной прокрутки
- Taxi.js (не Barba) для переходов страниц
- Слайд для слайдера новостей
Все остальное — это собственный ванильный JS, никаких UI-фреймворков.
Как осуществляется переход от обложки к тематическим исследованиям?
В Taxi.js зарегистрировано два различных типа перехода: DefaultTransition (очистка штор) и FlipTransition для ссылок проекта, помеченных тегом [flip-transition] атрибут.
В режиме отпуска FlipTransition захватывает видимое в данный момент изображение слайда, используя getBoundingClientRect() и клонирует его в наложение с фиксированным положением на , completely detached from the DOM flow. A single right-side curtain then wipes up to cover the old page.
On enter, GSAP Flip.fit() анимирует этот плавающий клон непосредственно в целевой контейнер на новой странице (.img-project-flip), одновременно изменяя положение, размер и соотношение сторон за 1,2 секунды с легкостью expo.inOut. После завершения анимации клон повторно вставляется в целевой контейнер в качестве постоянной замены собственного элемента изображения.
На мобильных устройствах механика переворачивания изображения полностью пропускается, вместо этого обе шторы анимируются с использованием clip-path (верхняя половина вниз, нижняя половина вверх).
Как работает горизонтальная прокрутка тематических исследований?
Это подход, основанный на GSAP ScrollTrigger: .horizontal_track элемент закреплен, пока gsap.to() tween переводит его по оси X, преобразуя расстояние вертикальной прокрутки в горизонтальное перемещение.
- Общее расстояние X рассчитывается как
track.scrollWidth - window.innerWidthпересчитывается при обновлении через validateOnRefresh: true - Конец ScrollTrigger динамически устанавливается на +=${distance}, чтобы точно соответствовать
- Ленис запускает событие прокрутки, которое вызывает
ScrollTrigger.update()в каждом кадре, чтобы оставаться синхронизированным - Все ждет
document.fonts.readyперед расчетом размеров, избегая скачков макета из-за поздней загрузки шрифтов - Отмененный флаг предотвращает асинхронность
.then()обратный вызов от запуска, если между навигацией была вызвана очистка
Как работает анимация изменения положения сетки проекта?
Это, пожалуй, самая сложная система на сайте. Страница проектов имеет два состояния DOM: grid__state__1 (исходная компактная сетка с несколькими видимыми изображениями) и grid__state_2 (полный развернутый макет).
Когда пользователь прокручивает раздел проектов, GSAP Flip обрабатывает переход:
Flip.getState()фиксирует текущую позицию и размер каждого изображения в сетке 1- Изображения физически перемещаются в DOM в свои целевые слоты в сетке 2.
Flip.from()оживляет их с захваченных позиций на новые за 2 секунды,expo.inOutс отклонением 0,05 с.
Изображения за пределами MAX_VISIBLE_IN_GRID1 пороговые значения изначально скрыты и исчезают во время переворота. Виджет фильтра также участвует в Flip. Он захватывается, перемещается к новому родительскому элементу и одновременно анимируется в новую позицию.
Прокрутка назад меняет всю анимацию: изображения возвращаются к сетке 1 с более короткими 1,2 секунды. power4.inOut легкость и обратное шатание. Любые изображения, которые были скрыты во время первоначального переворота, на обратном пути отображаются отдельно.
На мобильных устройствах переворот сетки отключен, и остается активной только система фильтров.
Как устроен слайдер разделенного экрана с центральной меткой?
И домашний слайдер, и...