Shop
Pływająca konstelacja handlowa na białym marmurze
Sklep internetowy działa w oparciu o model „białego płótna”, gdzie produkty są wyświetlane jako duże, mocno zakrzywione karty graficzne, a nie siatki miniatur. Cały interfejs jest niezwykle płynny: promienie 20–28 px na całej powierzchni, elementy sterujące w kształcie pigułki i kompaktowa, 16-pikselowa obudowa GT Standard z ciasnym, negatywnym śledzeniem, które sprawia, że tekst jest wyraźny i pogrubiony. Jedynym pogrubionym akcentem systemu jest żywa purpura (#5433eb), która pojawia się w logo, okrągłym polu wyników wyszukiwania oraz jako cieniowany cień na tym samym przycisku. Reszta palety to ciepłe, neutralne kolory: białe powierzchnie, subtelne, chłodne szare płótno, subtelne obramowania i niemal czarny tekst. Gęstość pozostaje zwarta z 12-pikselowymi odstępami, ale paski bohaterów i kategorii tętnią życiem dzięki szerokiemu, pionowemu rytmowi 64–80 px, dzięki czemu zakupy bardziej przypominają przeglądanie niż katalog.
Maksymalna szerokość to 1200 px, wyśrodkowana na półprzezroczystym płótnie #f2f4f5, z trwałym paskiem bocznym o szerokości 64 px po lewej stronie, zawierającym wyłącznie ikony nawigacji. Głównym elementem jest pasek o pełnej szerokości, z kartami produktów umieszczonymi nad wyśrodkowanym fioletowym logo „sklep” i paskiem wyszukiwania w kształcie pigułki bezpośrednio pod nim. Pigułki kategorii są ułożone w jednym, wyśrodkowanym wierszu pod paskiem wyszukiwania. Sekcje treści (Kobiety, Mężczyźni, Uroda, Dom, Dzieci i niemowlęta) następują po sobie jako dedykowane paski, z których każdy zawiera 4-kolumnową siatkę ze zdjęciami produktów lub 2-kolumnową kompozycję „element główny i siatka”. Rytm pionowy jest szeroki: 64–80 px między sekcjami głównymi. Stopka to ciemny pasek u dołu strony z grupami linków w kształcie kolumn. Strzałki karuzeli po prawej stronie poziomych paneli produktów wskazują na przewijalną zawartość bez punktów paginacji.
Dominującym elementem wizualnym jest fotografia: pełnoekranowe zdjęcia produktów na białym tle, przycięte w formacie 1:1, oraz zdjęcia lifestylowe w ciepłych, ziemistych barwach (beż, terakota, szałwia, kość słoniowa). Zdjęcia produktów mają swój własny kolor – interfejs użytkownika pozostaje achromatyczny, dzięki czemu odcienie produktów zapewniają różnorodność wizualną. Loga marek pojawiają się jako tekst nakładany na ciemne lub jasne zdjęcia główne, a nie jako pojedyncze ikony. W głównej kompozycji karty produktów są umieszczone jako unosząca się, lekko nachodząca na siebie konstelacja nad logotypem. Ikony są minimalistyczne i monochromatyczne (czarne kontury), z wyjątkiem ikon kategorii, które wykorzystują jednolity kolor marki. Na zdjęciach produktów nie ma ilustracji, efektów 3D ani gradientów.
Paleta
Marka
- Shop Violet
#5433eb— Przycisk „Wyślij”, znak tekstu przerywanego i logo marki to jedyne akcenty podkreślające akcję i indywidualność na białym tle. - Violet Wash
#c0b5f3— Półprzezroczysta aureola za fioletowym przyciskiem wysyłania, która zachowuje swoje światło bez zmiany odcienia.
Neutralny
- Canvas Mist
#f2f4f5— Tło strony i dodatkowa obróbka powierzchni za wypukłymi kartami. - Pure White
#ffffff— Główna powierzchnia przeznaczona na karty, pola wprowadzania danych, znaki ruchome i przyciski w kształcie pigułek. - Ink Black
#000000— Tekst główny, nagłówki, ikony, symbole nawigacyjne i karty produktów w trybie ciemnym. - Faint Border
#ebebeb— Cienkie linie podziału na kartach, kontury pól wprowadzania danych i ramki przycisków w kształcie pigułek. - Muted Gray
#787574— Tekst pomocniczy, etykiety nawigacyjne, kontury ikon w stanie nieaktywnym - Cool Stone
#cccccc— Symbole zastępcze, stany wyłączone i nieaktywne tła ikon
Typografia
od 11 do 16px · 4 kroki
- GT Standard — wymiana: Inter · wytyczne 400 · Podstawowy krój czcionki we wszystkich rozmiarach – zarówno dla tekstu głównego, jak i nagłówków. GTStandard-MRegular o szerokości 16 px/-0,031 em jest podstawowym krojem czcionki dla tekstu głównego, przycisków i etykiet. GTStandard-MSemibold o szerokości 20 px/-0,05 em jest używany do kilku dużych nagłówków; GTStandard-MMedium o szerokości 11–12 px jest używany do mikropodpisów. Każdy wariant czcionki jest wyświetlany z optyczną grubością 400 – hierarchia czcionek jest uzyskiwana poprzez subtelne gradienty i gęste odstępy między literami, a nie poprzez pogrubiony kontrast. To styl sygnaturowy: Shop nie krzyczy pogrubionymi czcionkami, ale kształtuje tekst poprzez odstępy między literami.
- Shopify Sans — wymiana: Inter · wytyczne 400, 700 · Zarezerwowane dla komunikatów systemowych, takich jak banery ładowania aplikacji i teksty zgody na pliki cookie.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 12px |
| Promień przycisku | 9999px |
| Promień karty | 28px |
| Cienie | miękkie cienie |
| Między sekcjami | 64px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Shop 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
- Cursor — Przytulny warsztat pergaminowy, oświetlony tlącymi się węglami
- Slush — nadmuchiwany wszechświat naklejek na papierze pastelowym
- MindMarket — Przytulna, bajkowa książka na kremowym papierze – przyjazne płótno redakcyjne, na którym duże nagłówki Interu i wycięte z papieru postacie współistnieją na nasłonecznionej, miękkiej jak naklejka powierzchni.
- Airbnb — Cicha, biała ściana galerii z pojedynczą koralowo-czerwoną zakładką
- Superr — Ciepły zeszyt szkolny w delikatnym popołudniowym świetle. Kremowa strona, pomarańczowy marker bez skuwki i stos laminowanych naklejek z imionami czekających na odklejenie.
- Apple (España) — Galeria muzeum, w łagodnym świetle dziennym, stanowi pojedynczą, urzekającą, nieważką białą przestrzeń, w której każdy eksponat jest oświetlony reflektorem umieszczonym na lekko przyciemnionej ścianie.
- Lamborghini — Czarny kolor nadwozia w salonie, pod reflektorami - jeden żółty samochód
- Amplemarket — Zalane słońcem miejsce pracy pokryte konfetti
- Getharvest — Biurko o złotej godzinie – ciepłe kremowe płótno, białe pocztówki zawieszone na płótnie i pojedynczy, jasnopomarańczowy płomień
- Agence Foudre — Okładka magazynu ma delikatny różowy kolor, przypominający szminkę.
- Drive Capital — Plakat z retro podróżą samochodem na ciepłym papierze
- Apple (España) — biała gablota wystawowa