Shopify
Noktomeza Forcejo - Varmarkoj floras kontraŭ profunda turkisa fono, prilumita de ununura sparko de mento
La dezajna sistemo de Shopify estas noktomeza laborejo por komerco: preskaŭ nigra kanvaso nuancita per profunda turkisa verdo, larĝa, memfida sanserifa tiparo, kaj ununura vigla menta akcento kiu aktivigas interagajn momentojn. La interfaco similas al malhela ĉambro, kie produktoj kaj markoj estas la fonto de lumo - fotoj kaj butikfasadoj brilas kontraŭ preskaŭ nigraj surfacoj, dum kromaj elementoj retiriĝas. Komponantoj estas geometriaj sed molaj: kartoj kun radiuso de 12 rastrumeroj kaj maldikaj randoj, butonoj en formo de pilolo, kaj tiparo kun pezo de 330, kiu flustras skalon anstataŭ krii. Ununura kromata interpunkcia signo (#36f4a4) estas uzata ŝpareme sur ligiloj, etikedoj kaj fokusaj statoj, rezervante koloron por funkciaj momentoj por certigi, ke komercaj rakontoj restas la vida fokuso.
La maksimuma larĝo estas ~1280 rastrumeroj, centrita, kun plenlarĝaj ŝprucblokoj etendiĝantaj preter la fotujo. La paĝritmo alternas: (1) plenlarĝa malhela ŝprucpaĝo kun supermetita titolo kaj butonoj por alvoko al ago, (2) komfortaj malhelaj sekcioj kun maksimumlarĝa teksto kaj bildblokoj en 2 kolumnoj aŭ bildkradoj en 3 kolumnoj, (3) interagaj montrofenestroj (produkta karto, kalkulilo por sendokostoj, mondmapo) montrataj kiel reliefaj kartoj sur pli profunda kanvaso. La navigado estas fiksa supra stango kun la emblemo + 3 navigaciaj elementoj + duarangaj ligiloj + la ĉefa butono por alvoko al ago, ĉiuj vicigitaj dekstre. La vertikala ritmo uzas 80 rastrumerajn interspacojn inter sekcioj kun glata transiro - neniuj dividiloj inter malhelaj sekcioj, nur ŝanĝo en surfaca tono.
La vida dezajno ĉefe fokusiĝas al la podetalisto: plenmezuraj produktaj fotoj kaj fotoj de markaj eventoj portas la plejparton de la vida pezo, ofte en la formo de grandaj fonoj kun supermetita blanka teksto. La bildoj estas dense tonditaj, altkontrastaj kaj festaj (la sonorado de la Nasdaq-sonorilo, grupaj salutoj, proksimaj bildoj de produktoj enmane). La malhela fono kreas la impreson, ke ĉi tiuj fotoj estas lumigitaj per spotlumoj. La ilustraĵoj estas minimalistaj - la ĉefa klariga laboro estas plenumata per enigitaj produktaj bildoj kaj ekranfotoj de butikfasadoj. Ikonoj estas monokromataj, kun linilarĝo de 1,5–2 rastrumeroj, tipe blankaj aŭ #36f4a4 por aktivaj statoj.
Paletro
Marko
- Shopify Mint
#36f4a4— Aktivaj navigaciaj indikiloj, fokusaj ringoj, etikedaj reliefigiloj kaj ŝvebaj reliefigiloj sur ligiloj estas la sola kromata brilo, kiu kreas senton de ebligita interagado kontraŭ malhela fono.
Neŭtrala
- Midnight Forest
#02090a— Paĝkanvaso, kapbildaj fonbildoj, sekciaj fonbildoj - Deep Lichen
#061a1c— Ĉefaj kartsurfacoj, ŝvelintaj paneloj, enhavblokoj. - Shaded Fern
#072720— Navigacia panelo, aldonaj kartoj, apenaŭ rimarkebla levo de la panelo. - Spruce Border
#1e2c31— Maldikaj randoj por kartoj, dividlinioj, konturoj de enigaĵkampoj. - Abyss Indigo
#000a1e— Plia surfaco por enkorpigi produktojn/demonstraĵojn, panelojn kun priskriboj de funkcioj. - Pure White
#ffffff— Ĉefa teksto, butonplenigo, titolo, logotipoj.
Tipografio
de 12 ĝis 70 rastrumeroj · 8 paŝoj
- Neue Haas Grotesk — anstataŭaĵo: Inter · konturoj 330, 400, 500, 550, 600 · La kerna tipografia sistemo estas titoloj kun tiparopezo de 70–96 rastrumeroj (330–400), kiuj estas subtilaj anstataŭ laŭtaj; korpoteksto kun tiparopezo de 16–18 rastrumeroj (400–500); kaj navigado kaj uzantinterfaco kun tiparopezo de 14–16 rastrumeroj (500–550). La ultra-malpeza tiparopezo de 330 ĉe grandaj ekranaj grandecoj estas distinga trajto: ĝi transdonas fidon per modereco anstataŭ volumeno.
- Inter Variable — anstataŭaĵo: Inter · konturoj 400, 420, 450, 550 · Dua tiparo uzata en navigaciaj interfacaj elementoj, malgrandaj notoj, langetoj kaj mikroteksto en paĝopiedoj. Ĝiaj iomete pli grandaj minusklaj literoj kaj pli norma interspaco inter literoj igas ĝin pli legebla je kompaktaj grandecoj. Ĝi ankaŭ taŭgas por situacioj kie tiparo de pezo 420 plenigas la interspacon inter regula kaj mezgranda tiparo.
Intervaloj kaj formo
| Celo | Signifo |
|---|---|
| Denseco | averaĝa |
| Baza paŝo | 12px |
| Butona radiuso | 9999px |
| Karto-radiuso | 12px |
| Ombroj | ne - limoj anstataŭ ombroj |
| Inter sekcioj | 80px |
| Paĝlarĝo | 1280px |
AI konstruos vian retejon laŭ la stilo de Shopify kaj plenigos ĝin
- Plenigu per produktoj kaj afiŝoj per la ligilo - Instagram, TikTok, Facebook.
- Transdonu enhavon de via malnova retejo — nur specifu la adreson.
- Moderna dezajno sur la plej bona motoro: React ( Next.js) kun servila bildigo kaj SEO-optimigo tuj uzeblaj.
- Plene aŭtomatigita SEO-optimigo por serĉrezultoj kaj rekomendoj pri neŭralaj retoj.
Similaj stiloj
- Retool — Varma obsidianlaborejo - surfaco por precizaj iloj, lumigita per bruletantaj ardaĵoj, kie ĉio kreiĝas
- Elektron — La ekipaĵa stirpanelo je noktomezo estas preskaŭ nigra kanvaso, kie produktaj fotoj brilas dum la interfaco restas preskaŭ nevidebla.
- REKKI — Flugkontrolpanelo en la fotolaboratorio
- OFFFICE : — noir-galerio englutita en monolita tiparo
- Clyde — La ekspoziciejo, kun sia ununura lumĵetilo, estas preskaŭ malluma galerio, kie la sola koloro en la ĉambro estas varma gradienta pilko.
- Channel Studio — Studio-fotolaboratorio kun unu korala lampŝirmilo
- Electronic Materials Office — Ardanta ardaĵo en galerio ornamita per lignokarbo
- ORYZO AI — Fotoeseo pri senlumejo. Sola objekto ŝvebanta en la varma mallumo, kremkolora tiparo kiel sola ornamaĵo.
- Factory — La terminalo "militĉambro" je noktomezo. La "fabriko" estas severa nigra kontrolpanelo kie ununura blanka karto alteriĝas kiel torĉlampolumita forsendo — la sola objekto en la ĉambro estas la verko mem.
- Hungry Tiger — Kurkumo-brila grafitio sur la muro de la tandoor. Unuigita paletro de oro kaj rustbruna, kun tiparo tiel granda, ke ĝi aspektas pli kiel ŝildo de spicmerkato ol retejo.
- Bibliothèque — Nigra kubforma galerio sub lumĵetilo - sola lumigita plato en vasta, malluma halo
- Apple (España) — nigra teatro kun lumigitaj armaturoj