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

Основа дизайну — редакційна стилістика на теплому «паперовому» тлі з темними блоками ательє. Послуги подано не сіткою плиток, а нумерованим індексом 01–06, який під час наведення курсора заповнюється «чорнилом» і тягне за вказівником зображення-прев’ю. Роботи рухаються вбік закріпленою стрічкою, поки сторінка прокручується вертикально.

Решта — ремесло: 106 МБ зображень стиснуто до 2,6 МБ, сім сторінок, жодного шаблону, запит на запис у три кроки замість єдиного блоку з формою.

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

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

Теплий папір, чорнило й лише один золотий відтінок як акцент — а також Fraunces як варіативний дисплейний шрифт із засічками та Inter для основного тексту. Жодних тіней, жодних заокруглених кутів: єдиний засіб розділення — тонкі лінії в 1 px.

Взаємодія

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

Швидкодія

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

Великим планом

Концептуальний проєкт. MAISON LUMIÈRE — вигаданий бренд. Цей проєкт створено як самостійну роботу з дизайну та розробки, щоб показати повний цикл: від візуальної концепції до реалізації. Замовника не було; адреса, ціни, команда й відгуки вигадані.

Переглянути всі проєкти