Сайты бьюти-салонов почти все похожи друг на друга: много золота, много шрифтов с засечками, мало характера. MAISON LUMIÈRE — эксперимент от обратного: ателье в Старом городе Дюссельдорфа, оформленное как журнал, а не как отраслевой шаблон.

В основе макета — журнальная вёрстка на тёплой «бумаге» с тёмными блоками ателье. Услуги — не сетка карточек, а нумерованный индекс 01–06: при наведении строка заливается «чернилами», а за курсором тянется превью. Работы едут вбок закреплённой лентой, пока страница прокручивается вниз.

Остальное — ремесло: 106 МБ исходных изображений сжаты до 2,6 МБ, семь страниц, ни одного шаблона, запись на приём в три шага вместо одной длинной формы.

Арт-дирекшн и дизайн-система
Фронтенд-разработка (без фреймворка)
Моушн и эффекты при прокрутке
Оптимизация изображений и производительность
Адаптивная вёрстка
Видео для соцсетей к запуску

Дизайн-система

Тёплая бумага, чернила, единственный золотой оттенок как акцент — плюс Fraunces как вариативный акцидентный шрифт с засечками и Inter для основного текста. Никаких теней, никаких скруглённых углов, единственный разделитель — тонкие линии толщиной 1px.

Интерактив

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

Производительность

Шестнадцать исходных изображений общим весом 106 МБ превратились в адаптивные наборы WebP в трёх размерах — 2,6 МБ на весь сайт. Если JavaScript не загрузится, контент останется видимым; `prefers-reduced-motion` отключает всю анимацию.

Крупным планом

Концептуальный проект. MAISON LUMIÈRE — вымышленный бренд. Этот проект создан как самостоятельная работа по дизайну и разработке, чтобы показать полный цикл: от визуальной концепции до реализации. Заказчика не было; адрес, цены, команда и отзывы вымышлены.

Смотреть все проекты