Shopify
Éjféli üvegház - Védjegyek virágoznak mély türkiz háttér előtt, egyetlen mentafény szikrájával megvilágítva
A Shopify tervezőrendszere egy éjféli műhely a kereskedelem számára: egy majdnem fekete vászon mély türkizzöld árnyalattal, széles, magabiztos sans-serif betűtípussal és egyetlen élénk menta színű díszítéssel, amely aktiválja az interaktív pillanatokat. A felület egy sötétkamrára hasonlít, ahol a termékek és a márkák a fény forrásai – a fotók és az üzletek kirakatai a majdnem fekete felületek előtt világítanak, míg a króm elemek háttérbe szorulnak. Az elemek geometrikusak, mégis lágyak: 12 képpontos sugarú kártyák vékony szegéllyel, pirula alakú gombok és egy 330-as vastagságú betűtípus, amely inkább a méretarányt suttogja, mintsem a kiáltásokat. Egyetlen kromatikus írásjelet (#36f4a4) takarékosan használunk a linkeken, címkéken és fókuszállapotokon, a színeket a funkcionális pillanatoknak tartva fenn, hogy a kereskedői történetek továbbra is a vizuális fókuszpont maradjanak.
A maximális szélesség ~1280 képpont, középre igazítva, a teljes szélességű nyitóoldal a fotókonténeren túlnyúlik. Az oldal ritmusa váltakozik: (1) egy teljes szélességű sötét nyitóoldal egy átfedésben lévő címsorral és cselekvésre ösztönző gombokkal, (2) kényelmes sötét részek maximális szélességű szöveg- és képblokkokkal 2 oszlopban vagy képráccsal 3 oszlopban, (3) interaktív bemutatópanelek (termékkártya, szállítási kalkulátor, világtérkép), amelyek kiemelt kártyákként jelennek meg egy mélyebb vásznon. A navigáció egy fix felső sáv a logóval + 3 navigációs elemmel + másodlagos linkekkel + az elsődleges cselekvésre ösztönző gombbal, mindegyik jobbra igazítva. A függőleges ritmus 80 képpontos réseket használ a részek között, sima átmenettel – nincsenek elválasztók a sötét részek között, csak a felületi tónus változik.
A vizuális design elsősorban a kiskereskedőre fókuszál: a vizuális súly nagy részét a teljes méretű termékfotók és a márkaeseményekről készült fotók hordozzák, gyakran nagyméretű hátterek formájában, amelyekre fehér szöveget helyeznek. A képek szorosan vágottak, nagy kontrasztúak és ünnepi jellegűek (a Nasdaq harangjának csengése, csoportos üdvözlések, a kézben tartott termékek közeli képei). A sötét háttér azt a benyomást kelti, mintha ezeket a fotókat reflektorok világítanák meg. Az illusztrációk minimalisták – a fő magyarázó munkát beágyazott termékképek és az üzletek kirakatainak képernyőképei végzik. Az ikonok monokrómok, 1,5–2 képpontos vonalvastagsággal, jellemzően fehérek vagy #36f4a4 színűek az aktív állapotokhoz.
Paletta
Márka
- Shopify Mint
#36f4a4— Az aktív navigációs jelzők, a fókuszgyűrűk, a címkekiemelés és az egérrel kiemelt elemek a linkeken az egyetlen kromatikus csillogás, amely a sötét háttér előtt az interaktivitás érzetét kelti.
Semleges
- Midnight Forest
#02090a— Oldalvászon, fejléc háttérképek, szakasz háttérképek - Deep Lichen
#061a1c— Fő kártyafelületek, kiemelt panelek, tartalomblokkok. - Shaded Fern
#072720— Navigációs panel, további kártyák, a panel alig észrevehető felemelkedése. - Spruce Border
#1e2c31— Vékony szegélyek kártyákhoz, elválasztó vonalak, beviteli mező körvonalai. - Abyss Indigo
#000a1e— További felület termékek/bemutatók beágyazásához, funkciók leírását tartalmazó panelek. - Pure White
#ffffff— Fő szöveg, gombkitöltés, cím, logók.
Tipográfia
12-től 70 képpontig · 8 lépésben
- Neue Haas Grotesk — csere: Inter · körvonalak 330, 400, 500, 550, 600 · Az alapvető tipográfiai rendszert a címsorok alkotják, amelyek inkább visszafogott, mint harsány betűvastagsággal készülnek, 70–96 képpontos (330–400) betűmérettel; a törzsszöveg 16–18 képpontos (400–500) betűmérettel; valamint a navigáció és a felhasználói felület 14–16 képpontos (500–550) betűmérettel. A nagy képernyőméreteknél alkalmazott, 330-as ultravékony betűméret megkülönböztető jegy: a tömeg helyett inkább visszafogottsággal sugároz magabiztosságot.
- Inter Variable — csere: Inter · körvonalak 400, 420, 450, 550 · Másodlagos betűtípus, amelyet navigációs felületelemekben, kis jegyzetekben, tabulátorvezérlőkben és láblécekben található mikroszövegben használnak. Kissé nagyobb kisbetűi és szabványosabb betűközei miatt kompakt méretben is olvashatóbb. Olyan helyzetekben is alkalmas, ahol egy 420-as vastagságú betűtípus kitölti a normál és a közepes méretű betűtípus közötti rést.
Intervallumok és forma
| Cél | Jelentés |
|---|---|
| Sűrűség | átlagos |
| Alapvető lépés | 12px |
| Gomb sugara | 9999px |
| Kártya sugara | 12px |
| Árnyékok | nincs - szegélyek árnyékok helyett |
| Szakaszok között | 80px |
| Oldal szélessége | 1280px |
A mesterséges intelligencia Shopify stílusban fogja elkészíteni a weboldaladat, és kitölti azt.
- Töltsd fel termékeidet és posztjaidat a linkeken keresztül - Instagram, TikTok, Facebook.
- Tartalom átvitele régi webhelyéről – csak adja meg a címet.
- Modern dizájn a legjobb keresőmotoron: React ( Next.js) szerveralapú rendereléssel és SEO optimalizálással, azonnal használható formában.
- Teljesen automatizált SEO optimalizálás a keresési eredményekhez és a neurális hálózati ajánlásokhoz.
Hasonló stílusok
- Retool — Egy meleg obszidián műhely - precíziós szerszámok felülete, parázsló fényben, ahol minden elkészül
- Elektron — Az éjféli kezelőpanel szinte fekete vászon, ahol a termékfotók ragyognak, miközben a kezelőfelület gyakorlatilag láthatatlan marad.
- REKKI — Repülésirányító panel a fotólaborban
- OFFFICE : — egy monolitikus betűtípusba burkolt noir galéria
- Clyde — A bemutatóterem, egyetlen reflektorával, egy szinte sötét galéria, ahol a helyiségben az egyetlen szín egy meleg, átmenetes gömb.
- Channel Studio — Egy stúdió fotólabor egyetlen korall lámpaernyővel
- Electronic Materials Office — Izzó parázs egy faszénnel díszített galériában
- ORYZO AI — Egy fotóesszé egy sötétkamráról. Egy magányos tárgy lebeg a meleg sötétségben, krémszínű betűtípus az egyetlen dekoráció.
- Factory — A „hadiszoba” terminál éjfélkor. A „gyár” egy rideg fekete vezérlőpanel, ahol egyetlen fehér kártya landol, mint egy zseblámpával megvilágított jelzés – a szobában az egyetlen tárgy maga a munka.
- Hungry Tiger — Kurkumára emlékeztető élénk színű graffiti a tandoor falán. Egységes arany és rozsdásbarna paletta, olyan nagy betűmérettel, hogy inkább egy fűszerpiac táblájára hasonlít, mint egy weboldalra.
- Bibliothèque — Egy fekete, kocka alakú galéria reflektorfény alatt – egy magányos megvilágított tányér egy hatalmas, sötét teremben
- Apple (España) — fekete színház megvilágított szerelvényekkel