Shopify
Midnight Greenhouse – Znaki towarowe rozkwitają na tle głębokiego turkusu, oświetlone pojedynczą iskierką mięty
System projektowania Shopify to nocny warsztat dla handlu: niemal czarne płótno zabarwione głęboką turkusową zielenią, szeroka, pewna siebie czcionka bezszeryfowa i pojedynczy, żywy, miętowy akcent, który aktywuje interaktywne momenty. Interfejs przypomina ciemnię, gdzie produkty i marki są źródłem światła – zdjęcia i witryny sklepowe lśnią na tle niemal czarnych powierzchni, a chromowane elementy się cofają. Komponenty są geometryczne, a zarazem miękkie: karty o promieniu 12 pikseli z cienkimi obramowaniami, przyciski w kształcie pigułek i czcionka o grubości 330, która szepcze skalę, a nie krzyczy. Pojedynczy chromatyczny znak interpunkcyjny (#36f4a4) jest używany oszczędnie w linkach, tagach i stanach fokusu, zachowując kolor dla momentów funkcjonalnych, aby historie sprzedawców pozostały wizualnym punktem centralnym.
Maksymalna szerokość wynosi ~1280 px, wyśrodkowana, z blokami powitalnymi o pełnej szerokości rozciągającymi się poza kontener zdjęcia. Rytm strony zmienia się: (1) ciemna strona powitalna o pełnej szerokości z nałożonym nagłówkiem i przyciskami wezwania do działania, (2) wygodne ciemne sekcje z blokami tekstu i obrazu o maksymalnej szerokości w 2 kolumnach lub siatkami obrazów w 3 kolumnach, (3) interaktywne panele prezentacyjne (karta produktu, kalkulator wysyłki, mapa świata) wyświetlane jako wypukłe karty na głębszym płótnie. Nawigacja to stały górny pasek z logo + 3 elementami nawigacyjnymi + linkami drugorzędnymi + głównym przyciskiem wezwania do działania, wszystko wyrównane do prawej strony. Pionowy rytm wykorzystuje 80-pikselowe odstępy między sekcjami z płynnym przejściem — bez podziałów między ciemnymi sekcjami, tylko zmiana tonu powierzchni.
Projekt wizualny koncentruje się przede wszystkim na sprzedawcy detalicznym: pełnowymiarowe zdjęcia produktów i zdjęcia z wydarzeń firmowych stanowią główną siłę wizualną, często w formie dużych teł z nałożonym białym tekstem. Zdjęcia są mocno przycięte, kontrastowe i mają świąteczny charakter (dźwięk dzwonka Nasdaq, grupowe pozdrowienia, zbliżenia produktów w dłoniach). Ciemne tło sprawia wrażenie, jakby zdjęcia były oświetlone reflektorami. Ilustracje są minimalistyczne – główną funkcję objaśniającą pełnią osadzone zdjęcia produktów i zrzuty ekranu witryn sklepowych. Ikony są monochromatyczne, o szerokości linii 1,5–2 px, zazwyczaj białe lub w kolorze #36f4a4 dla stanów aktywnych.
Paleta
Marka
- Shopify Mint
#36f4a4— Aktywne wskaźniki nawigacji, pierścienie ostrości, podświetlanie znaczników i podświetlanie linków to jedyne chromatyczne elementy, które tworzą wrażenie włączonej interaktywności na ciemnym tle.
Neutralny
- Midnight Forest
#02090a— Płótno strony, obrazy tła nagłówka, obrazy tła sekcji - Deep Lichen
#061a1c— Główne powierzchnie kart, panele wypukłe, bloki treści. - Shaded Fern
#072720— Panel nawigacyjny, dodatkowe karty, ledwo zauważalne podniesienie panelu. - Spruce Border
#1e2c31— Cienkie obramowania kart, linie podziału, kontury pól wprowadzania danych. - Abyss Indigo
#000a1e— Dodatkowa powierzchnia do osadzania produktów/demonstracji, panele z opisami funkcji. - Pure White
#ffffff— Tekst główny, wypełnienie przycisku, tytuł, logo.
Typografia
od 12 do 70px · 8 kroków
- Neue Haas Grotesk — wymiana: Inter · wytyczne 330, 400, 500, 550, 600 · Podstawowy system typograficzny obejmuje nagłówki o grubości czcionki 70–96 px (330–400 px), które są subtelne, a nie krzykliwe; tekst główny o grubości czcionki 16–18 px (400–500 px); oraz nawigację i interfejs użytkownika o grubości czcionki 14–16 px (500–550 px). Ultralekka grubość czcionki 330 px na dużych ekranach jest cechą charakterystyczną: przekazuje pewność siebie poprzez powściągliwość, a nie objętość.
- Inter Variable — wymiana: Inter · wytyczne 400, 420, 450, 550 · Drugi rodzaj czcionki używany w elementach interfejsu nawigacyjnego, małych notatkach, kartach sterujących i mikrotekście w stopkach. Nieco większe małe litery i bardziej standardowe odstępy między nimi sprawiają, że jest bardziej czytelny w kompaktowych rozmiarach. Nadaje się również do sytuacji, w których czcionka o grubości 420 wypełnia lukę między czcionką standardową a średnią.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 12px |
| Promień przycisku | 9999px |
| Promień karty | 12px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 80px |
| Szerokość strony | 1280px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Shopify 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
- Retool — Ciepły warsztat obsydianowy – powierzchnia do precyzyjnych narzędzi, oświetlona tlącymi się węglami, gdzie wszystko powstaje
- Elektron — O północy panel sterowania urządzenia zamienia się w niemal czarne płótno, na którym błyszczą zdjęcia produktów, a interfejs pozostaje praktycznie niewidoczny.
- REKKI — Panel sterowania lotem w laboratorium fotograficznym
- OFFFICE : — galeria noir pochłonięta monolityczną czcionką
- Clyde — Showroom z pojedynczym oświetleniem jest niemal ciemną galerią, w której jedynym kolorem jest ciepła, gradientowa kula.
- Channel Studio — Studio fotograficzne z jednym koralowym abażurem
- Electronic Materials Office — Żarzący się żar w galerii ozdobionej węglem drzewnym
- ORYZO AI — Fotoesej o ciemni. Samotny obiekt unoszący się w ciepłej ciemności, jedyną dekoracją jest kremowa czcionka.
- Factory — Terminal „pokoju wojennego” o północy. „Fabryka” to surowy, czarny panel sterowania, na którym pojedyncza biała karta ląduje niczym oświetlona latarką dyspozytornia – jedynym przedmiotem w pomieszczeniu jest samo dzieło.
- Hungry Tiger — Jaskrawe graffiti na ścianie tandoora. Jednolita paleta złota i rdzawego brązu, z czcionką tak dużą, że przypomina raczej szyld sklepu z przyprawami niż stronę internetową.
- Bibliothèque — Czarna, sześcienna galeria pod reflektorem – pojedyncza, oświetlona płyta w ogromnej, ciemnej sali
- Apple (España) — czarny teatr z oświetlonymi oprawami