Maison Noire – koncepcyjny serwis luksusowej marki jubilerskiej w Next.js

Maison Noire to koncepcyjny serwis luksusowej marki jubilerskiej, który stworzyłem jako projekt portfolio Netovy. Założeniem nie było zbudowanie kolejnej klasycznej strony producenta biżuterii z katalogiem produktów i przyciskiem „Kup teraz”.

Projekt miał pokazać, jak można przenieść język luksusowego domu jubilerskiego do internetu: przez fotografię, typografię, ruch, przestrzeń i kontrolowane tempo odkrywania treści.

Serwis łączy rozbudowaną stronę główną, prezentacje kolekcji, historię marki, case studies indywidualnych realizacji oraz wieloetapową rezerwację prywatnej wizyty w atelier. Całość uzupełniają interakcje Framer Motion, smooth scroll, niestandardowy kursor oraz elementy 3D renderowane przy użyciu React Three Fiber.

Maison Noire jest marką fikcyjną. Nazwa, historia, kolekcje, produkty, adres, dane kontaktowe, realizacje i opinie zostały przygotowane wyłącznie na potrzeby projektu demonstracyjnego.

Co chciałem pokazać

• projektowanie cyfrowego doświadczenia dla marki z segmentu luxury,
• odejście od typowego układu sklepu internetowego na rzecz editorial storytellingu,
• budowanie spójnego systemu wizualnego obejmującego wiele podstron,
• prezentację kolekcji i produktów bez przeciążania interfejsu,
• wykorzystanie animacji jako elementu narracji, a nie dekoracji,
• integrację lekkich doświadczeń 3D bez wrzucania Three.js do krytycznej ścieżki ładowania,
• świadomą optymalizację LCP i zasobów graficznych,
• responsywny interfejs zachowujący charakter premium również na telefonach,
• techniczną bazę SEO dla lokalnego atelier,
• projekt dostępny z klawiatury i przygotowany z uwzględnieniem podstaw accessibility.

Status projektu: projekt koncepcyjny / portfolio. Maison Noire nie jest działającym domem jubilerskim, dlatego nie przypisuję projektowi fikcyjnej sprzedaży, liczby rezerwacji, wzrostu konwersji ani efektów SEO.

Od strony internetowej do cyfrowego atelier

Najważniejszą decyzją projektową było potraktowanie witryny nie jako katalogu produktów, ale jako cyfrowego odpowiednika luksusowego atelier.

Użytkownik nie powinien otrzymać wszystkich informacji natychmiast. Maison Noire wykorzystuje duże fotografie, ograniczoną ilość tekstu, spokojną typografię i kontrolowane przejścia pomiędzy sekcjami, aby tworzyć doświadczenie bliższe przeglądaniu magazynu modowego niż klasycznej stronie e-commerce.

Strona główna prowadzi użytkownika przez kilka warstw marki:

1. pierwsze wrażenie i aktualną kolekcję,
2. wybrane produkty,
3. historię i filozofię Maison Noire,
4. wyróżniony element kolekcji,
5. proces rzemieślniczy,
6. editorialową galerię,
7. zaproszenie do prywatnej wizyty.

Nie ma tutaj przypadkowego zestawu komponentów. Kolejność sekcji buduje narrację od emocji do produktu, a następnie od produktu do zaufania i kontaktu.

Kierunek wizualny: haute joaillerie bez wizualnego hałasu

Maison Noire został zaprojektowany wokół bardzo ograniczonego systemu wizualnego.

Dominują niemal czarne powierzchnie, przygaszone odcienie kamienia, ciepłe złote akcenty i fotografia biżuterii o wysokim kontraście. Interfejs celowo unika dużej liczby kart, ramek, gradientowych CTA czy efektów typowych dla współczesnych landing pages.

System typografii łączy trzy role:

• Cormorant Garamond dla dużych editorialowych nagłówków,
• Inter dla treści użytkowych i nawigacji,
• JetBrains Mono dla danych technicznych, numeracji oraz drobnych elementów interfejsu.

Fonty korzystają z next/font, dzięki czemu mogą zostać zoptymalizowane razem z aplikacją zamiast polegać na runtime'owym ładowaniu całego zestawu z zewnętrznego CDN.

Duże ilości pustej przestrzeni są celowe. W segmencie luxury brak elementu często komunikuje więcej niż kolejna ikona czy karta z cieniem.

Hero zaprojektowane wokół LCP

Hero jest najbardziej wizualną częścią strony, ale jednocześnie potencjalnie największym problemem wydajnościowym.

Zamiast blokować pierwsze renderowanie skomplikowaną animacją wejścia, główny obraz jest widoczny od razu. Otrzymuje wysoki priorytet pobierania, responsywne sizes i jest obsługiwany przez next/image.

Animacja pojawia się dopiero jako dodatkowa warstwa doświadczenia:

• delikatne skalowanie fotografii przy przewijaniu,
• zmiana jej przezroczystości,
• przesunięcie tekstu względem scrolla,
• osobne wejścia drobnych elementów typograficznych.

Najważniejsza treść i obraz LCP nie czekają więc na zakończenie rozbudowanej sekwencji Framer Motion.

Dodatkowo konfiguracja projektu wykorzystuje:

• AVIF i WebP dla obrazów,
• preconnect do hosta fotografii,
• ograniczoną liczbę wariantów fontów,
• optymalizację importów cięższych bibliotek,
• inline CSS,
• lazy loading fotografii znajdujących się poniżej pierwszego ekranu.

Celem było zachowanie efektu premium bez sytuacji, w której użytkownik najpierw ogląda loader, a dopiero później stronę.

Strona główna jako kontrolowany storytelling

Home page składa się z kilku dużych komponentów, z których każdy odpowiada za inny etap opowieści.

Horizontal Gallery

Pierwszym przejściem z komunikacji marki do produktu jest pozioma galeria wybranych elementów.

Duże fotografie i ograniczona ilość danych pozwalają skupić uwagę na materiale, formie i nazwie produktu zamiast prezentować użytkownikowi klasyczną siatkę sklepową z dziesiątkami CTA.

Brand Story

Kolejna część przedstawia pochodzenie Maison Noire i podkreśla rzemieślniczy charakter marki.

Tekst pojawia się stopniowo, natomiast fotografia atelier porusza się niezależnie od treści, tworząc subtelny efekt paralaksy.

Featured Piece

Wybrany produkt otrzymuje znacznie większą przestrzeń niż standardowa karta produktowa.

To miejsce, w którym serwis przechodzi z fotografii produktowej do bardziej interaktywnej prezentacji.

Craftsmanship

Proces produkcji został rozbity na cztery etapy:

1. szkic,
2. odlew,
3. oprawę kamieni,
4. finalne wykończenie.

Dzięki temu marka komunikuje wartość produktu przez proces jego powstawania, a nie przez marketingowe określenia typu „najwyższa jakość”.

Editorial Grid

Dalsza część strony ponownie zwiększa skalę fotografii i zmienia rytm layoutu. Asymetryczna kompozycja przypomina sesję editorialową i odcina się od przewidywalnej siatki e-commerce.

Appointment CTA

Końcowym działaniem nie jest zakup online, lecz umówienie prywatnej wizyty w atelier.

To świadoma decyzja wynikająca z charakteru fikcyjnej marki premium.

Kolekcje zamiast klasycznego katalogu

Projekt posiada osobne prezentacje dwóch kolekcji: Lumière Noire oraz Ombre.

Każda z nich posiada własny:

• hero,
• sezon i rok,
• opis idei kolekcji,
• zestaw produktów,
• fotografie,
• materiały,
• wymiary,
• ceny,
• przejścia do pozostałych kolekcji.

Produkty są przechowywane w typowanej strukturze TypeScript, a kolekcja jedynie odwołuje się do należących do niej elementów.

Pozwala to uniknąć duplikowania danych i daje prostą bazę do późniejszego podłączenia prawdziwego CMS-a lub systemu commerce.

Prezentacja pozostaje jednak celowo bardziej editorialowa niż sprzedażowa. Produkt jest częścią kolekcji i historii marki, a nie tylko rekordem z ceną.

Historia marki jako osobne doświadczenie

Podstrona Nasza historia nie ogranicza się do krótkiej sekcji „O nas”.

Przygotowałem pełną linię czasu prowadzącą fikcyjną markę od 1987 do 2026 roku. Poszczególne momenty historii posiadają własne fotografie i narrację, dzięki czemu użytkownik poznaje Maison Noire etapami.

Na stronie wykorzystałem także eksperymentalną warstwę cząsteczek opartą na React Three Fiber.

Istotne było jednak to, aby efekt 3D nie znalazł się w krytycznej ścieżce renderowania.

Komponent Three.js jest importowany dynamicznie dopiero po załadowaniu podstawowej zawartości strony. Użytkownik otrzymuje więc hero, tekst i fotografię niezależnie od tego, czy cięższa warstwa WebGL została już pobrana.

3D jako progresywne ulepszenie

Projekt wykorzystuje three, @react-three/fiber i @react-three/drei, ale nie traktuje Canvas jako obowiązkowego fundamentu całej strony.

To ważne szczególnie w projekcie, w którym animacji jest już dużo.

Elementy 3D są izolowane w osobnych komponentach i ładowane tylko wtedy, gdy mają uzasadnienie wizualne.

Dodatkowo scena korzysta m.in. z:

• ograniczonego DPR,
• wyłączonego antyaliasingu tam, gdzie nie jest potrzebny,
• powerPreference: "high-performance",
• prostych źródeł światła,
• animowania całej grupy zamiast modyfikowania każdego punktu geometrii w każdej klatce.

Dzięki temu Three.js pozostaje dodatkiem budującym charakter projektu, a nie biblioteką, która przejmuje cały frontend.

To podejście jest dla mnie szczególnie ważne: efekt wizualny ma uzasadniać swój koszt.

Animacje i mikrointerakcje

Ruch jest jednym z głównych elementów identyfikacji Maison Noire.

Do animacji wykorzystałem Framer Motion, a płynne przewijanie obsługuje Lenis.

Przygotowałem również własne komponenty wielokrotnego użytku:

• ScrollReveal — pojawianie elementów po wejściu do viewportu,
• ImageReveal — odkrywanie fotografii przy pomocy clip-path,
• SplitText — animowane wejścia kolejnych słów nagłówka,
• MagneticButton — delikatne przyciąganie CTA do kursora,
• CustomCursor — kursor reagujący na linki, przyciski i elementy oznaczone data-cursor.

Animacje korzystają z jednego spójnego języka ruchu. Nie każdy element otrzymuje inny easing czy przypadkowy efekt.

Dzięki temu interfejs pozostaje spokojny mimo dużej liczby mikrointerakcji.

Nawigacja jako część doświadczenia

Klasyczny header został połączony z pełnoekranowym menu.

Nawigacja prowadzi bezpośrednio do:

• kolekcji Lumière Noire,
• kolekcji Ombre,
• realizacji,
• historii marki,
• rezerwacji wizyty.

Na urządzeniach dotykowych niestandardowy kursor nie jest uruchamiany, ponieważ nie przynosi tam żadnej wartości.

To mała decyzja, ale dobrze pokazuje szersze podejście do projektu: desktopowe efekty nie powinny być bezmyślnie kopiowane na telefon.

Case studies jako dowód rzemiosła

Maison Noire posiada również wewnętrzną sekcję realizacji.

Przygotowałem trzy fikcyjne historie projektów:

• pierścień zaręczynowy Éclipse,
• naszyjnik Serpentine dla domu mody,
• kolekcję ślubną Aurore.

Każda realizacja posiada:

• opis projektu,
• klienta,
• datę,
• parametry techniczne,
• wyzwanie,
• proces realizacji,
• rezultat,
• testimonial,
• galerię.

Podstrony korzystają ze wspólnego modelu danych i dynamicznego sluga.

To jednocześnie element storytellingu marki oraz przykład architektury, którą w rzeczywistym projekcie można wykorzystać do prezentowania realizacji bespoke.

Rezerwacja prywatnej wizyty

Głównym punktem konwersji jest osobna podstrona rezerwacji atelier.

Formularz został rozdzielony na dwa etapy.

Krok 1 — termin

Użytkownik wybiera:

• datę,
• godzinę,
• interesującą go kolekcję lub zamówienie indywidualne.

Dostępne sloty godzinowe są przedstawione jako czytelne przyciski zamiast klasycznego selecta.

Krok 2 — dane

Następnie formularz zbiera:

• imię i nazwisko,
• adres e-mail,
• numer telefonu,
• opcjonalną wiadomość.

Numer telefonu jest formatowany do polskiego układu XXX XXX XXX, a formularz weryfikuje liczbę cyfr przed przejściem dalej.

Przed wysłaniem użytkownik otrzymuje także podsumowanie wybranej daty i godziny.

W wersji demonstracyjnej formularz nie wysyła ani nie zapisuje rezerwacji.

Cloudflare Turnstile działa jako demonstracja warstwy antybotowej. Kod wyraźnie zakłada, że przy produkcyjnym wdrożeniu token zostałby przesłany do backendu i zweryfikowany po stronie serwera.

Nie opisuję więc formularza jako gotowego systemu rezerwacyjnego — obecna wersja demonstruje UX i frontend całego procesu.

Responsywność bez utraty charakteru marki

W przypadku projektu opartego na bardzo dużej typografii i fotografiach największym problemem na mobile jest zwykle próba zachowania desktopowej kompozycji za wszelką cenę.

Tutaj układ zmienia się razem z szerokością ekranu.

Dostosowywane są:

• wielkości nagłówków,
• paddingi sekcji,
• liczba kolumn,
• proporcje zdjęć,
• kompozycja galerii,
• rozmieszczenie danych produktu,
• formularz,
• stopka,
• menu.

next/image otrzymuje różne wartości sizes zależnie od kontekstu, dzięki czemu telefon nie musi pobierać pliku przygotowanego dla dużego monitora.

Efekty typowo desktopowe — jak custom cursor — są wyłączane tam, gdzie nie mają sensu.

SEO techniczne

Mimo że Maison Noire jest projektem wizualnym, przygotowałem również techniczną bazę pod wyszukiwarkę.

Root layout definiuje:

• tytuł i template tytułów,
• description,
• canonical base URL,
• słowa kluczowe,
• Open Graph,
• Twitter Cards,
• ustawienia robotów Google.

Dodatkowo serwis posiada dane strukturalne JewelryStore zawierające m.in.:

• nazwę,
• opis,
• adres,
• telefon,
• e-mail,
• współrzędne,
• godziny otwarcia,
• rok założenia.

Projekt posiada również robots.ts oraz sitemap.ts.

Sitemap uwzględnia główną stronę, kolekcje, historię, wizytę, listę realizacji oraz dynamiczne adresy poszczególnych case studies.

Dostępność

Warstwa wizualna nie powinna wymagać poświęcenia podstaw dostępności.

W projekcie zastosowałem m.in.:

• semantyczny main,
• link „Przejdź do treści” widoczny po uzyskaniu fokusu,
• opisy alt dla fotografii,
• aria-label dla przycisku menu,
• prawdziwe elementy button dla interakcji,
• prawdziwe label dla pól formularza,
• typy email, tel i date,
• inputMode="numeric" dla numeru telefonu,
• czytelne stany błędów,
• hierarchię nagłówków,
• osobny wariant zachowania dla urządzeń dotykowych.

Przy bardziej rozbudowanym wdrożeniu kolejnym etapem byłby pełny audyt WCAG obejmujący m.in. focus management pełnoekranowego menu oraz ograniczenie ruchu dla prefers-reduced-motion.

Stack technologiczny

• Next.js 16 — App Router, Metadata API, next/image, sitemap i robots
• React 19 — komponentowy frontend
• TypeScript 5 — typowanie kolekcji, produktów i realizacji
• Tailwind CSS 4 — design system i responsywne layouty
• Framer Motion — animacje wejścia, scroll-based motion i mikrointerakcje
• Lenis — smooth scrolling
• Three.js — warstwa WebGL
• React Three Fiber — deklaratywne sceny 3D w React
• Drei — komponenty pomocnicze dla R3F
• Cloudflare Turnstile — demonstracyjna ochrona formularza
• next/font — lokalna optymalizacja fontów
• next/image — responsywne obrazy AVIF/WebP

Decyzje performance

Przy projekcie tego typu najłatwiej stworzyć efektowną stronę, która działa dobrze wyłącznie na komputerze autora.

Dlatego wydajność traktowałem jako część designu.

Najważniejsze decyzje obejmują:

• brak animacji blokującej obraz LCP,
• priorytet dla głównego zdjęcia,
• lazy loading grafik poniżej pierwszego ekranu,
• responsywne sizes,
• AVIF/WebP,
• dynamiczne ładowanie komponentów Three.js,
• ograniczanie DPR Canvas,
• dynamiczne ładowanie efektów działających wyłącznie po stronie klienta,
• ograniczenie liczby wariantów fontów,
• content-visibility dla sekcji znajdujących się niżej,
• unikanie umieszczania całej aplikacji w jednym dużym Client Component.

Nie wpisuję tutaj fikcyjnego wyniku Lighthouse. Performance, Accessibility i Core Web Vitals powinny zostać uzupełnione wynikami z produkcyjnego deploymentu po wykonaniu finalnych pomiarów.

Co pokazuje ten projekt

Maison Noire pokazuje przede wszystkim moje podejście do projektów, w których wygląd jest tylko jednym z elementów rozwiązania.

Projekt łączy:

• branding,
• art direction,
• UI/UX,
• storytelling,
• responsive design,
• animacje,
• WebGL,
• optymalizację wydajności,
• SEO,
• podstawy accessibility,
• projektowanie ścieżki konwersji.

Największym wyzwaniem nie było dodanie animacji czy modelu 3D.

Było nim utrzymanie równowagi pomiędzy trzema rzeczami, które często ze sobą konkurują: efektem premium, użytecznością i wydajnością.

Maison Noire jest przykładem tego, że strona może mieć mocny art direction i dużą liczbę interakcji, a jednocześnie nadal być budowana ze świadomością kosztu JavaScriptu, obrazów i renderowania.

Podsumowanie

Maison Noire to koncepcyjny projekt luksusowego serwisu, w którym frontend pełni rolę cyfrowego doświadczenia marki, a nie tylko kontenera na tekst i fotografie.

Od pełnoekranowego hero, przez prezentację kolekcji i historię rzemiosła, po realizacje bespoke i rezerwację wizyty — każdy element został zaprojektowany jako część jednej narracji.

Projekt pokazuje kierunek, w którym chcę rozwijać realizacje Netovy: strony wyróżniające się wizualnie, ale jednocześnie przemyślane pod kątem technologii, wydajności, SEO i późniejszego rozwoju.

---

Budujesz markę premium i potrzebujesz strony, która nie wygląda jak kolejny szablon? Porozmawiajmy o projekcie dopasowanym do charakteru Twojej marki.