Shopify
Chafu ya Usiku wa Manane - Alama za biashara huchanua dhidi ya mandhari ya zumaridi, zikiangazwa na cheche moja ya mnanaa
Mfumo wa usanifu wa Shopify ni karakana ya biashara ya usiku wa manane: turubai nyeusi karibu iliyotiwa rangi ya kijani kibichi, uandishi mpana na wenye ujasiri wa sans-serif, na lafudhi moja ya mnanaa inayoamilisha nyakati shirikishi. Kiolesura kinafanana na chumba chenye giza, ambapo bidhaa na chapa ndizo chanzo cha mwanga—picha na sehemu za mbele za duka hung'aa dhidi ya nyuso nyeusi karibu, huku vipengele vya chrome vikipungua. Vipengele ni vya kijiometri lakini ni laini: kadi za kipenyo cha pikseli 12 zenye mipaka nyembamba, vifungo vyenye umbo la kidonge, na uandishi wa uzito wa 330 unaonong'ona badala ya kupiga kelele. Alama moja ya uandishi wa kromatic (#36f4a4) hutumika kidogo kwenye viungo, lebo, na hali za kuzingatia, ikihifadhi rangi kwa nyakati za utendaji ili kuhakikisha hadithi za wafanyabiashara zinabaki kuwa kitovu cha kuona.
Upana wa juu zaidi ni ~pikseli 1280, katikati, huku vizuizi vya upana kamili vya kunyunyizia vikienea zaidi ya chombo cha picha. Mdundo wa ukurasa hubadilika: (1) ukurasa wa kunyunyizia mweusi wenye upana kamili wenye kichwa cha habari kilichofunikwa na vitufe vya wito wa kuchukua hatua, (2) sehemu zenye giza zenye maandishi na vizuizi vya picha vyenye upana wa juu zaidi katika safu wima 2 au gridi za picha katika safu wima 3, (3) paneli shirikishi za maonyesho (kadi ya bidhaa, kikokotoo cha usafirishaji, ramani ya dunia) zinazoonyeshwa kama kadi zilizoinuliwa kwenye turubai yenye kina kirefu. Usogezaji ni upau wa juu uliowekwa na nembo + vipengele 3 vya urambazaji + viungo vya pili + kitufe cha wito wa kuchukua hatua cha msingi, vyote vikiwa vimepangwa kulia. Mdundo wa wima hutumia mapengo ya pikseli 80 kati ya sehemu zenye mpito laini—hakuna vitenganishi kati ya sehemu nyeusi, ni mabadiliko tu katika toni ya uso.
Muundo wa taswira unalenga hasa muuzaji: picha na picha za bidhaa za ukubwa kamili kutoka kwa matukio ya chapa hubeba sehemu kubwa ya uzito wa taswira, mara nyingi katika mfumo wa mandharinyuma makubwa yenye maandishi meupe yaliyofunikwa. Picha zimekatwa kwa ukali, zenye utofauti mkubwa, na zina asili ya sherehe (mlio wa kengele ya Nasdaq, salamu za kikundi, picha za karibu za bidhaa mkononi). Mandharinyuma meusi huunda hisia kwamba picha hizi zinaangazwa na miangaza. Vielelezo ni vidogo—kazi kuu ya maelezo hufanywa na picha za bidhaa zilizopachikwa na picha za skrini za mbele za duka. Aikoni ni monochrome, zenye upana wa mstari wa pikseli 1.5–2, kwa kawaida nyeupe au #36f4a4 kwa hali zinazotumika.
Paleti
Chapa
- Shopify Mint
#36f4a4— Viashiria vya urambazaji vinavyofanya kazi, pete za kulenga, vivutio vya lebo, na vivutio vya kuelea kwenye viungo ndio mng'ao pekee wa chromatic unaounda hisia ya mwingiliano uliowezeshwa dhidi ya mandharinyuma meusi.
Isiyoegemea upande wowote
- Midnight Forest
#02090a— Turubai ya ukurasa, picha za mandharinyuma za kichwa, picha za mandharinyuma za sehemu - Deep Lichen
#061a1c— Nyuso kuu za kadi, paneli zilizoinuliwa, vitalu vya maudhui. - Shaded Fern
#072720— Paneli ya urambazaji, kadi za ziada, kuinua paneli bila kuonekana vizuri. - Spruce Border
#1e2c31— Mipaka nyembamba kwa kadi, mistari inayogawanya, mihtasari ya sehemu za kuingiza. - Abyss Indigo
#000a1e— Sehemu ya ziada ya kupachika bidhaa/maonyesho, paneli zenye maelezo ya kazi. - Pure White
#ffffff— Maandishi kuu, kujaza vitufe, kichwa, nembo.
Uchapaji
kutoka pikseli 12 hadi 70 · hatua 8
- Neue Haas Grotesk — mbadala: Inter · mihtasari 330, 400, 500, 550, 600 · Mfumo mkuu wa uchapaji ni vichwa vya habari vyenye uzito wa fonti wa pikseli 70–96 (330–400) ambazo ni laini badala ya kubwa; nakala ya mwili yenye uzito wa fonti wa pikseli 16–18 (400–500); na urambazaji na kiolesura cha mtumiaji chenye uzito wa fonti wa pikseli 14–16 (500–550). Uzito wa fonti nyepesi sana wa 330 katika ukubwa wa skrini kubwa ni sifa tofauti: inatoa kujiamini kupitia kujizuia badala ya wingi.
- Inter Variable — mbadala: Inter · mihtasari 400, 420, 450, 550 · Aina ya fonti ya pili inayotumika katika vipengele vya kiolesura cha urambazaji, madokezo madogo, vidhibiti vya vichupo, na maandishi madogo katika vijachini. Herufi zake ndogo ndogo ni kubwa kidogo na nafasi zaidi ya herufi za kawaida huifanya iwe rahisi kusomeka katika ukubwa mdogo. Pia inafaa kwa hali ambapo fonti yenye uzito wa 420 hujaza pengo kati ya fonti ya kawaida na ya ukubwa wa kati.
Vipindi na umbo
| Kusudi | Maana |
|---|---|
| Uzito | wastani |
| Hatua ya msingi | 12px |
| Kipenyo cha kitufe | 9999px |
| Redi ya kadi | 12px |
| Vivuli | hapana - mipaka badala ya vivuli |
| Kati ya sehemu | 80px |
| Upana wa ukurasa | 1280px |
AI itaunda tovuti yako kwa mtindo wa Shopify na kuijaza
- Jaza bidhaa na machapisho kupitia kiungo - Instagram, TikTok, Facebook.
- Hamisha maudhui kutoka kwa tovuti yako ya zamani—taja tu anwani.
- Muundo wa kisasa kwenye injini bora: React ( Next.js) yenye utoaji wa seva na uboreshaji wa SEO bila kuchelewa.
- Uboreshaji wa SEO kiotomatiki kikamilifu kwa matokeo ya utafutaji na mapendekezo ya mtandao wa neva.
Mitindo inayofanana
- Retool — Warsha ya joto ya obsidian - uso wa vifaa vya usahihi, unaowashwa na makaa yanayotoa moshi, ambapo kila kitu huundwa
- Elektron — Paneli ya kudhibiti vifaa saa sita usiku ni turubai nyeusi karibu, ambapo picha za bidhaa huangaza huku kiolesura kikiwa hakionekani kabisa.
- REKKI — Paneli ya kudhibiti ndege katika maabara ya picha
- OFFFICE : — ghala la noir lililojaa fonti ya monolithic
- Clyde — Chumba cha maonyesho, chenye mwangaza wake mmoja, ni ghala la sanaa lenye giza karibu ambapo rangi pekee chumbani ni mpira wa joto wa gradient.
- Channel Studio — Maabara ya picha ya studio yenye kivuli kimoja cha taa ya matumbawe
- Electronic Materials Office — Kaa la moto linalong'aa kwenye ghala lililopambwa kwa mkaa
- ORYZO AI — Insha ya picha kuhusu chumba chenye giza. Kitu pekee kinachoelea gizani, fonti ya krimu ndiyo mapambo pekee.
- Factory — Kituo cha "chumba cha vita" saa sita usiku. "Kiwanda" ni paneli ya kudhibiti nyeusi iliyo wazi ambapo kadi moja nyeupe inatua kama kifaa kinachowashwa na tochi—kitu pekee chumbani ni kazi yenyewe.
- Hungry Tiger — Graffiti angavu kama manjano ukutani mwa tandoor. Rangi ya dhahabu na kahawia iliyokolea, yenye fonti kubwa sana kiasi kwamba inaonekana kama bango la soko la viungo kuliko tovuti.
- Bibliothèque — Nyumba ya sanaa nyeusi yenye umbo la mchemraba chini ya mwangaza - bamba pekee lenye mwangaza katika ukumbi mkubwa na mweusi
- Apple (España) — ukumbi mweusi wenye vifaa vya mwanga