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
- Apple iPhone 18 Pro — Éjféli hardverek galériája. Tekintsd úgy az egyes részeket, mint egy sötét, múzeumszerű talapzatot, ahol a termék egy darabja pontosan kiemelésre kerül, a tipográfia és a kék kezelőszervek pedig diszkrét címkékként szolgálnak körülötte.
- Apple Watch Ultra 4 — Eszköz éjszakai teszteléshez. Hozzon létre képernyőket fekete kiállítási területek sorozataként, ahol hatalmas SF Pro fejlécek keretezik a nagy pontosságú berendezéseket, az aktív adatokat és a gondosan adagolt elektromos színeket.
- Apple Watch Series 12 — Egy bronz érzékelő a sötétben. Képzeld el az óra hardverét és állapotjelzőit úgy, mint megvilágított tárgyakat egy majdnem sötét galériában.
- Bedouin's Daughter — Napfény fekete bársonnyal. Használj világító vajsárga, kemény fekete felületeket és szemcsés, napsütötte képeket a vizuális kompozíció egyenrangú részeként.
- 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ó.