Zellerfeld
Pracownia rzeźbiarska na białym marmurze – monolityczne powierzchnie cokołu, pojedyncza iskra kobaltu, szept małych liter od podłogi do sufitu
Zellerfeld przypomina galerię cyfrowych rzeźbiarzy na białym marmurze – targowisko butów drukowanych w 3D, gdzie monochromatyczne powierzchnie, duża biała przestrzeń i duże, małe czcionki sprawiają, że każdy produkt działa jak eksponat muzealny. Interfejs jest niezwykle oszczędny: achromatyczne płótno z pojedynczym, elektryzującym kobaltem (#000aff) zarezerwowanym na pilne chwile – ikony, aktywną nawigację „Sklep” i aktualny status slajdu. Karty unoszą się na ciepłym, perłowoszarym tle, a nie czystej bieli, nadając siatce namacalny, gipsowy odlew. Czcionka pozostaje pojedynczą, niestandardową czcionką bezszeryfową (Roobert) z niewielkimi odstępami między literami, a Space Mono jest używany wyłącznie do cen, ofert produktów i metadanych technicznych. W rezultacie strona produktu bardziej przypomina stronę wydawnictwa projektowego niż kasę sklepową – obiekty są fotografowane, a nie sprzedawane.
Strona zajmuje całą szerokość strony i zawiera pasek treści o szerokości 1440 px. Głównym elementem jest pełnoekranowy baner ze zdjęciem i ruchomą nakładką interfejsu użytkownika. Sekcje produktów korzystają z siatki 4-kolumnowej, zwijanej do 2 kolumn na tabletach i 1 na urządzeniach mobilnych. Układ sekcji jest następujący: duży opis produktu → siatka ocen redakcyjnych → siatka nowości → panel danych kontaktowych dla prasy. Treść każdej sekcji produktu jest wyśrodkowana w pasku i zajmuje 80 px przestrzeni pionowej między sekcjami. Nawigacja to stały górny pasek w jednym rzędzie z cienkim paskiem reklamowym nad nim. Karty produktów są wyrównane do ścisłej siatki — obszar obrazu zawsze jest wyśrodkowany na sylwetce buta z 40 px odstępem od góry i dołu wewnątrz karty, a klaster metadanych jest zakotwiczony w lewym dolnym rogu z logo marki o wymiarach 40x40 pikseli.
Dominującym elementem wizualnym jest fotografia produktowa – każdy but jest sfotografowany na czystej, białej lub gipsowej powierzchni pod kątem 3/4, wypełniając całą kartę bez kontekstu, modelu ani otoczenia. Głównym elementem jest pełnoprawna fotografia lifestylowa: wykadrowane ujęcia stóp i butów na piasku lub betonie, zawsze w ludzkiej skali, nigdy w idealnej jakości studyjnej. Obowiązuje zasada „temat jest głównym elementem” – buty zajmują 40% widocznej powierzchni kadru, nawet w głównym elemencie redakcyjnym. Nie stosuje się dekoracyjnych elementów graficznych, abstrakcyjnych wzorów ani ilustracji. Ikony są liniowe, obrysowane czarną linią, nigdy wypełnione, nigdy kolorowe.
Paleta
Marka
- Electric Cobalt
#000aff— Nowe ikony, aktywny pasek nawigacyjny, wskaźnik bieżącego slajdu, momenty aktywacji — jedyny sygnał chromatyczny w systemie, używany oszczędnie, aby był odbierany raczej jako aktywacja niż dekoracja.
Neutralny
- Pale Iris
#e5e7ff— Nowe wypełnienie kolorem dla odznak, delikatne podświetlenie i barwiona powierzchnia do etykietowania — stonowany odcień kobaltu, który podkreśla kolor, nie zakłócając monochromatycznej palety barw. - Ink Black
#111111— Tekst główny, domyślne obramowania, kontury ikon, cienkie podziały — dominujący kolor strukturalny nagłówków, list i linków. - Pure White
#ffffff— Należy stosować neutralne stany formularzy, tekst ikon i dyskretne informacje zwrotne w interfejsie użytkownika, a kolor powinien pozostać subtelny. Należy unikać stosowania go jako koloru podstawowego w wezwaniach do działania. - Plaster
#ecedee— Powierzchnia dodatkowa dla kart produktów, tło paska nawigacyjnego, gładkie podniesienie poziomu ponad płótnem. - Slate
#a1a4aa— Odcień ramki karty, neutralne wypełnienie przycisku i stonowana obwódka przycisku to odcienie szarości, które podkreślają krawędzie karty bez ich przyciemniania. - Fog
#d7d7d7— Jasna rama karty, linie podziału, przyciemnienie powierzchni nieaktywnej.
Typografia
od 13 do 128 px · 7 kroków
- Roobert — wymiana: Inter · wytyczne 400, 500, 600, 700 · Główna czcionka marki jest używana we wszystkich tekstach, od tekstu głównego po nagłówki. Odstępy między wierszami są jednakowe we wszystkich rozmiarach, dzięki czemu małe litery w logo mają gęstą, rzeźbiarską bryłę. Grubość czcionki wzrasta w zależności od kontekstu: 400 w tekście głównym i interfejsie użytkownika, 500 w wyróżnionych nagłówkach, 600 w nazwach produktów i 700 w dużych tytułach.
- Space Mono — wymiana: JetBrains Mono · wytyczne 400, 600 · Metadane techniczne — ceny (189,00 EUR), wartości liczbowe dla 10 najlepszych pozycji, symbole giełdowe i nazwy sklepów — są dodawane w miejscach, w których strona powinna być postrzegana jako specyfikacja techniczna, a nie tekst promocyjny.
- Arial — wymiana: Inter · wytyczne 400 · Arial - znaleziony w wyodrębnionych danych, ale nieopisany przez sztuczną inteligencję.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 16px |
| Promień przycisku | 10px |
| Promień karty | 10px |
| Cienie | minimalny |
| Między sekcjami | 80px |
| Szerokość strony | 1440px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Zellerfeld i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Airbnb — Cicha, biała ściana galerii z pojedynczą koralowo-czerwoną zakładką
- Apple (España) — biała gablota wystawowa
- Silencio — Biały pokój z unoszącymi się w powietrzu artefaktami. Wystawa galerii wykonana z ciepłego papieru, gdzie każdy element zajmuje swoje miejsce na tle negatywowej objętości, a cisza jest celowym zabiegiem projektowym.
- Oakâme — Skąpany w słońcu prowansalski warsztat wykuty w ciepłym kamieniu
- Nike — Monochromatyczna galeria osiągnięć sportowych – białe ściany, produkt jako dzieło sztuki, chrom rozpuszczony w tle
- Arc — przemysłowa biała galeria nad północną wodą
- Rivian — Elektryczny monolit na betonowej ścianie galerii. Rivian prezentuje każdy pojazd jako rzeźbę na tle ogromnej białej przestrzeni, z typografią tak dużą, że staje się elementem architektonicznym, i pojedynczą ciepłą żółcią, która przełamuje monochromatyczną atmosferę, niczym światło słoneczne na matowej powierzchni.
- Analogue — Czarna gablota wystawowa – towary unoszą się w próżni
- ddna — ciepła gablota muzealna na nieobrobionym lnie
- UY Studio — Kamienna galeria klasztoru to cicha przestrzeń z betonowymi ścianami, w której na białych postumentach stoją flakony perfum, oświetlone jedną 400-watową lampą i czterema ciepłymi, szarymi żarówkami.
- Basic.Space — galeria kuratorska na białym marmurze
- COS — modna galeria z białymi ścianami