Glossier
Sesja zdjęciowa w słońcu – biały papier, czarny tusz, jeden jaskrawożółty akcent
Glossier funkcjonuje jak cyfrowy magazyn o urodzie: niemal monochromatyczne płótno bieli i czerni, przełamane pojedynczym, jaskrawożółtym akcentem, który pełni również funkcję logo marki i jedynego wezwania do działania. System jest redakcyjnie oszczędny – powiększone nagłówki Apercu, dużo miejsca na tekst, całostronicowe zdjęcia lifestylowe, które niosą ze sobą większość emocjonalnego ciężaru – i praktyczny w wykonaniu: płaskie karty produktów, cienkie obramowania i całkowity brak ozdobników. Żółty nie jest drugorzędnym kolorem marki; jest marką, używanym oszczędnie, dzięki czemu każdy element sprawia wrażenie błysku flesza. Wszystko inne ma wtapiać się w tło: neutralne kolory to ciepłe szarości z subtelnym rumieńcem, obramowania są subtelne, a czcionka jest gęsta i skondensowana. Rezultatem jest witryna sklepowa, która emanuje pewnością siebie, stonowaniem i bezkompromisowo nowoczesną stylistyką.
Strona składa się z pionowo ułożonych sekcji pełnoekranowych, z których każda została zaprojektowana jako samodzielna rozkładówka redakcyjna. Sekcja główna to zdjęcie na całą szerokość ekranu z pływającą białą nakładką (w lewym górnym rogu) i ogromnym żółtym logo zajmującym cały dół strony. Poniżej sekcji głównej znajdują się naprzemiennie sekcje z obrazami pełnoekranowymi i siatkami pojedynczych kart. Podział kategorii (pielęgnacja skóry/makijaż) na dwie kolumny z równym stosunkiem obrazów (50/50) odbywa się bez widocznej granicy — oddziela je jedynie linia łącząca. Katalog produktów wykorzystuje czterokolumnową siatkę kwadratowych kart na płótnie #f7f7f7. Nawigacja to minimalistyczny górny pasek z dodatkowym paskiem reklamowym nad nim. Odstępy między sekcjami są dość duże (64 px), ale przejścia między sekcjami są płynne — bez separatorów ani naprzemiennych kolorów tła, z wyjątkiem ciepłej stopki. Ogólny rytm jest następujący: fotografia, tekst, fotografia, siatka, fotografia — jak przeglądanie magazynu mody.
Dominującym językiem wizualnym jest fotografia. Cały obszar wyświetlania wypełniają zdjęcia lifestylowe i portrety – ciepłe, złote światło, miękkie zbliżenia skóry, dłonie trzymające butelki produktów na tle blasku słońca. Paleta barw na fotografiach jest ciepła i stonowana: brzoskwiniowe niebo, terakotowe odcienie skóry, głęboki błękit oceanu. Zdjęcia zawsze zajmują całą powierzchnię strony, bez zaokrąglonych rogów, ramek ani nakładek, z wyjątkiem białych kartek z tekstem i żółtego logo. Zdjęcia produktów na kartach katalogowych są robione na czystym, białym, jednolitym tle z płaskim, równomiernym oświetleniem. Stosunek obrazu do tekstu wynosi około 70/30 – zdjęcia przekazują emocje, tekst i funkcję. Żadnych ilustracji, abstrakcyjnych grafik, renderów 3D.
Paleta
Marka
- Glossier Yellow
#fff116— Żółty jest używany jako drugorzędny akcent w detalach dekoracyjnych i do wyróżnienia rzadziej używanych zapytań w wyszukiwarce. Nie powinien być używany jako kolor podstawowy w wezwaniu do działania.
Neutralny
- Ink
#000000— Tekst główny, linki nawigacyjne, tekst podstawowy, tekst stopki, kontury ikon, cienkie obramowania; dominujący kolor typograficzny i strukturalny. - Paper
#ffffff— Powierzchnie kart produktów, obszary wypełnień, podniesione panele; najjaśniejszy poziom powierzchni w stosie. - Fog
#f7f7f7— Płótno strony, tła sekcji, przejścia między obrazami na stronie; powierzchnia bazowa, na której umieszczona jest cała witryna internetowa. - Blush
#faf2f4— Tło stopki, miękkie, ciepłe podziały sekcji; subtelny różowo-biały odcień dodaje ciepła dolnej części stron. - Mist
#f0f0f0— Jasna powierzchnia nośna służąca do stworzenia dyskretnego tła i oddzielenia sekcji. Nie powinna być używana jako kolor podstawowy w wezwaniu do działania. - Ash
#e8e8e8— Obramowania pól wprowadzania danych, tła ikon, cienkie linie rozdzielające; strukturalny kolor obramowania kart i elementów formularza.
Typografia
od 12 do 32px · 5 kroków
- Apercu — wymiana: Inter · wytyczne 400, 500, 700 · Główny krój pisma jest używany w całym interfejsie użytkownika – tekst główny o grubości 16 px/400 px, nawigacja i podpisy o grubości 12–14 px/500 px, podtytuły o grubości 20 px/500 px, a nagłówki redakcyjne o grubości 32 px/700 px. Geometryczny, humanistyczny design Apercu nadaje marce zwarty, nowoczesny styl; niemal zerowy odstęp między literami (0,002–0,003 em) sprawia, że krój jest zwarty i przypomina czasopismo, a nie zwiewny czy przyjazny. Grubość 700 px jest zarezerwowana dla elementów graficznych w materiałach redakcyjnych, a nie dla elementów interfejsu użytkownika.
- Apercu Mono — wymiana: JetBrains Mono or IBM Plex Mono · wytyczne 400 · Mikro-utylitarna typografia dla metadanych zamówienia, numerów śledzenia i etykiet obok kodu; wersja o stałej szerokości liter tworzy techniczną teksturę na tle proporcjonalnego tekstu.
- GTStandard-M — wymiana: Inter · wytyczne 400 · GTStandard-M – znaleziono w wyodrębnionych danych, ale nieopisany przez sztuczną inteligencję.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 8px |
| Promień przycisku | 0px |
| Promień karty | 0px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 64px |
| Szerokość strony | 1440px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Glossier 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
- Lightship — Kinowa diorama otwartej drogi. Ciepłe, kremowe ściany galerii zdobią duże zdjęcia krajobrazów umieszczone w krótkich odstępach, cienka czarna czcionka ledwo widoczna na ramach i pojedynczy, jaskrawopomarańczowy akcent przełamujący monochromatyczność niczym ognisko na łące.
- Faire ES — hurtowy katalog kremów rozgrzewających
- Adanola — Lookbook redakcyjny na białym papierze. Sesja zdjęciowa, w której typografia i fotografia tchną życie na czystych, białych powierzchniach, z czarnym tuszem jako krój pisma i subtelną, charakterystyczną czcionką bezszeryfową (Favorit), odzwierciedlającą ogólny styl marki.
- Oura Ring — Przytulny warsztat robienia owsianki, skąpany w łagodnym świetle dziennym
- Stykka — Skandynawska pracownia w białym świetle – cichy, rękodzielniczy showroom, w którym jedynym głosem jest fotografia
- DJI — czarne płótno lotnicze z pojedynczym elektrycznoniebieskim akcentem
- Altitude Beverages — Monochromatyczna rozkładówka magazynu. Wyobraź sobie rozkładówkę magazynu modowego pozbawioną wszelkich kolorów poza nieruchomymi zdjęciami – tekst i biała przestrzeń opowiadają całą historię.
- AATHER — Otwarta dłoń, pojedynczy płomień – cichy luksus zawarty w ciszy
- Cowboy — Belgijska galeria rowerów w śnieżnobiałej porcelanowej oprawie. Salon wystawowy, w którym matowe powierzchnie, duże czcionki używane w materiałach redakcyjnych i praktycznie brak dekoracji przyciągają wzrok do roweru i jego zawartości.
- Refero — Układ redakcyjny na białym marmurze – strona produktu stworzona przez typografa, gdzie nagłówek szeryfowy jest wizytówką marki, a wszystko inne jest dyskretne
- Face Formula — Skandynawski portret redakcyjny. Spokojna rozkładówka w stylu magazynu, gdzie spojrzenie modelki i nagłówek, napisany zwartą czcionką szeryfową, mówią same za siebie na chłodnym, mglistym tle.
- Shupatto — Gablota muzealna z białego marmuru