INO
Gablota muzealna w ciszy – każdy eksponat unosi się w białej przestrzeni, niczym pojedynczy obiekt za szkłem, otoczony niemal czarną, ledwo słyszalną czcionką
INO funkcjonuje jak niemal monochromatyczna galeria biżuterii: krystalicznie białe płótno, pojedynczy, ciepły, niemal czarny tusz i niemal całkowity brak koloru. System wizualny traktuje każdy pierścionek jak eksponat muzealny – zdjęcia produktów medycznych unoszące się w rozległej, negatywnej przestrzeni, z hierarchią konstruowaną poprzez położenie, odstępy między literami i natężenie bieli, a nie poprzez skalę czcionki czy kolor. Nawigacja znajduje się u dołu strony i składa się z czterech kropek z etykietami (wypełnionymi lub pustymi), celowo odwracając tradycyjny górny pasek e-commerce. Sam znak marki to zestaw koncentrycznych konturów pierścieni, nawiązujących do kształtu produktu i pełniących funkcję typograficznej rzeźby, a nie logo.
Pełnoekranowe płótno bez limitu maksymalnej szerokości treści. Ekran główny zajmuje całą szerokość strony, a zdjęcia i grafiki są podzielone równo (50/50). Siatki produktów są wyświetlane jako trzykolumnowe wiersze z dużym poziomym marginesem od krawędzi pola widzenia. Dolny pasek nawigacyjny jest wyśrodkowany i zakotwiczony w stopce strony, a nie przypięty. Podziały sekcji wykorzystują albo pełnoekranowe zdjęcia redakcyjne, albo czystą białą przestrzeń – nigdy pasek koloru, linia podziału ani gradient. Rytm pionowy jest swobodny: 80/1/1 między głównymi sekcjami, co pozwala stronie oddychać, a nie być wypełnioną treścią. Nie ma paska bocznego, megamenu ani górnego paska nagłówka – logo „INO” znajduje się wyłącznie w lewym górnym rogu ekranu głównego.
Współistnieją dwa odrębne tryby wyświetlania obrazu: kliniczne fotografie produktów na płaskim, jasnoszarym, jednolitym tle (każdy pierścień jest sfotografowany centralnie, bez dłoni, stylizowanych rekwizytów ani cieni powierzchniowych – obiekt jest głównym bohaterem) oraz narracyjne zdjęcia redakcyjne (pierścień w pudełku porośniętym trawą, ręka trzymająca łańcuch), renderowane jako odbarwione, pełnoekranowe fragmenty redakcyjne. Zdjęcia produktów pełnią funkcję kart produktów; zdjęcia redakcyjne oddają nastrój marki. Oba są monochromatyczne lub prawie monochromatyczne – trawa na głównym zdjęciu to jedyny odcień zieleni, a nawet ona jest stonowana do odcienia lasu. W interfejsie nie ma ikon – symbol koncentrycznego pierścienia zastępuje całą ikonografię.
Paleta
Neutralny
- Obsidian Ink
#212123— Neutralne stany formularza, tekst ikon i dyskretne informacje zwrotne od interfejsu użytkownika, podczas gdy schematy kolorów powinny pozostać nienachalne. - Bone
#ffffff— Strony płócienne, powierzchnie tekturowe, odwrócony tekst na ciemnym tle. Dominująca powierzchnia; prawie cała strona znajduje się tutaj. - Carbon
#000000— Wypełnienie ikony, dekoracyjne kontury graficzne i wypełnienie stanu aktywnego dla wskaźnika punktu nawigacyjnego. Używane oszczędnie, aby uzyskać maksymalny kontrast tonalny z kolorem „kości”. - Ash
#999999— Średnio kontrastowe obramowania, kontury kontrolne i podziały strukturalne. - Pebble
#a6a6a7— Stonowany tekst pomocniczy, cienkie separatory dla tekstu głównego i metadanych drugorzędnych. Najjaśniejszy kolor szarości funkcjonalnej jest używany dla metek cenowych i tekstu towarzyszącego, który powinien wtapiać się w tło.
Typografia
od 11 do 18px · 4 kroki
- Sequel100Wide — wymiana: Jost (400 · wytyczne 400 · Jedyny krój pisma firmowego używany wyłącznie w grubości 400 we wszystkich kontekstach – nawigacji, tekście głównym, nagłówkach, tytułach, cenach i podpisach. Szeroko rozstawiony symbol geometryczny z dużymi odstępami między literami odzwierciedla cały styl korporacyjny. Brak pogrubienia jest celowy: hierarchia jest osiągana poprzez kapitalizację, odstępy między literami i pozycjonowanie, a nie poprzez zróżnicowanie grubości czcionki.
- Arial — wymiana: system-ui · wytyczne 400 · Systemowy mechanizm awaryjny do renderowania przycisków w starszych kontekstach. Nie jest częścią brandingu – pojawia się tylko wtedy, gdy nie uda się załadować Sequel100Wide.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 23px |
| Promień przycisku | 50px |
| Promień karty | 8px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 80-120px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu INO 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ą
- Peak Design — Ściana galerii, częściowo oświetlona
- 099 SUPPLY — Ściana galerii wypełniona czarno-białymi obiektami
- Apple (España) — biała gablota wystawowa
- Apple (España) — Okno galerii w porannej mgle
- Custo — Galeria w kolorze stalowo-brązowym z monolityczną czcionką. Salon wystawowy w stonowanych szaro-zielonych odcieniach, gdzie pojedynczy ciemny obiekt i czcionka o szerokości 57 pikseli mówią same za siebie.
- 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
- Sociotype — Typowy okaz muzealny na białym papierze
- 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.