Shopify
Sera e Mesnatës - Markat tregtare lulëzojnë në një sfond të errët bruz, të ndriçuar nga një shkëndijë e vetme menteje
Sistemi i dizajnit i Shopify është një seminar mesnate për tregtinë: një kanavacë pothuajse e zezë e ngjyrosur me një jeshile të thellë turkeze, një font sans-serif të gjerë dhe të sigurt, dhe një theks i vetëm i gjallë mente që aktivizon momentet interaktive. Ndërfaqja i ngjan një dhome të errët, ku produktet dhe markat janë burimi i dritës - fotot dhe vitrinat shkëlqejnë në sipërfaqe pothuajse të zeza, ndërsa elementët e kromit tërhiqen. Komponentët janë gjeometrikë, por të butë: karta me rreze 12px me kufij të hollë, butona në formë pilule dhe një font me peshë 330 që pëshpërit shkallën në vend që të bërtasë. Një shenjë e vetme pikësimi kromatike (#36f4a4) përdoret me kursim në lidhje, etiketa dhe gjendje fokusi, duke rezervuar ngjyrën për momentet funksionale për të siguruar që historitë e tregtarëve të mbeten pika fokale vizuale.
Gjerësia maksimale është ~1280px, e përqendruar, me blloqe njoftimi me gjerësi të plotë që shtrihen përtej kontejnerit të fotos. Ritmi i faqes alternohet: (1) një faqe njoftimi e errët me gjerësi të plotë me një titull të mbivendosur dhe butona thirrjeje për veprim, (2) seksione të errëta komode me blloqe teksti dhe imazhi me gjerësi maksimale në 2 kolona ose rrjeta imazhi në 3 kolona, (3) panele ekspozimi interaktive (karta e produktit, kalkulatori i transportit, harta e botës) të shfaqura si karta të ngritura në një kanavacë më të thellë. Navigimi është një shirit i sipërm i fiksuar me logon + 3 elementë navigimi + lidhje dytësore + butonin kryesor të thirrjes për veprim, të gjitha të rreshtuara në të djathtë. Ritmi vertikal përdor boshllëqe 80px midis seksioneve me një tranzicion të butë - pa ndarës midis seksioneve të errëta, vetëm një ndryshim në tonin e sipërfaqes.
Dizajni vizual është i fokusuar kryesisht te shitësi me pakicë: fotot e produkteve në madhësi të plotë dhe fotot nga eventet e markës mbajnë pjesën më të madhe të peshës vizuale, shpesh në formën e sfondeve të mëdha me tekst të bardhë të mbivendosur. Imazhet janë të prera fort, me kontrast të lartë dhe me natyrë festive (zilja e kambanës së Nasdaq, përshëndetjet në grup, pamjet nga afër të produkteve në dorë). Sfondi i errët krijon përshtypjen se këto foto janë të ndriçuara nga reflektorët. Ilustrimet janë minimaliste - puna kryesore shpjeguese kryhet nga imazhet e integruara të produkteve dhe pamjet e ekranit të vitrinave. Ikonat janë monokrome, me një gjerësi vije prej 1.5–2px, zakonisht të bardha ose #36f4a4 për gjendjet aktive.
Paletë
Markë
- Shopify Mint
#36f4a4— Treguesit e navigimit aktiv, unazat e fokusit, theksimet e etiketave dhe theksimet e qëndrimit pezull mbi lidhje janë të vetmet shkëlqime kromatike që krijojnë një ndjesi ndërveprimi të aktivizuar kundrejt një sfondi të errët.
Neutral
- Midnight Forest
#02090a— Kanavaca e faqes, imazhet e sfondit të kokës së faqes, imazhet e sfondit të seksionit - Deep Lichen
#061a1c— Sipërfaqet kryesore të kartave, panelet e ngritura, blloqet e përmbajtjes. - Shaded Fern
#072720— Paneli i navigimit, kartat shtesë, ngritje mezi e dukshme e panelit. - Spruce Border
#1e2c31— Kufij të hollë për kartat, vija ndarëse, skica të fushave të futjes. - Abyss Indigo
#000a1e— Sipërfaqe shtesë për vendosjen e produkteve/demonstrimeve, panele me përshkrime të funksioneve. - Pure White
#ffffff— Teksti kryesor, mbushja e butonave, titulli, logot.
Tipografi
nga 12 në 70px · 8 hapa
- Neue Haas Grotesk — zëvendësim: Inter · skica 330, 400, 500, 550, 600 · Sistemi kryesor tipografik përbëhet nga tituj me një peshë shkronjash prej 70–96px (330–400) që janë delikate në vend që të jenë të zhurmshme; teksti i trupit me një peshë shkronjash prej 16–18px (400–500); dhe navigimi dhe ndërfaqja e përdoruesit me një peshë shkronjash prej 14–16px (500–550). Pesha ultra e lehtë e shkronjave prej 330 në madhësitë e ekraneve të mëdha është një tipar dallues: ajo përcjell besim përmes përmbajtjes në vend të vëllimit.
- Inter Variable — zëvendësim: Inter · skica 400, 420, 450, 550 · Një lloj fonti dytësor që përdoret në elementët e ndërfaqes së navigimit, shënimet e vogla, kontrollet e skedave dhe mikrotekstin në fund të faqes. Shkronjat e vogla pak më të mëdha dhe hapësira standarde midis shkronjave e bëjnë atë më të lexueshëm në madhësi kompakte. Është gjithashtu i përshtatshëm për situata ku një font me peshë 420 mbush boshllëkun midis një fonti të rregullt dhe një fonti të mesëm.
Intervalet dhe forma
| Qëllimi | Kuptimi |
|---|---|
| Dendësia | mesatare |
| Hapi bazë | 12px |
| Rrezja e butonit | 9999px |
| Rrezja e kartës | 12px |
| Hijet | pa kufij në vend të hijeve |
| Midis seksioneve | 80px |
| Gjerësia e faqes | 1280px |
IA do ta ndërtojë faqen tuaj të internetit në stilin Shopify dhe do ta mbushë atë
- Plotësoni me produkte dhe postime përmes linkut - Instagram, TikTok, Facebook.
- Transferoni përmbajtje nga faqja juaj e vjetër—thjesht specifikoni adresën.
- Dizajn modern në motorin më të mirë: React ( Next.js) me renderim të serverit dhe optimizim SEO që në fillim.
- Optimizim plotësisht i automatizuar i SEO-s për rezultatet e kërkimit dhe rekomandimet e rrjeteve nervore.
Stile të ngjashme
- Retool — Një punishte e ngrohtë prej obsidiani - një sipërfaqe për vegla precize, e ndriçuar nga prush që digjen, ku krijohet gjithçka
- Elektron — Paneli i kontrollit të pajisjeve në mesnatë është një kanavacë pothuajse e zezë, ku shkëlqejnë fotot e produkteve ndërsa ndërfaqja mbetet praktikisht e padukshme.
- REKKI — Paneli i kontrollit të fluturimit në laboratorin e fotografive
- OFFFICE : — një galeri noir e mbuluar nga fonti monolitik
- Clyde — Salloni i ekspozitës, me dritën e tij të vetme të fokusit, është një galeri pothuajse e errët ku e vetmja ngjyrë në dhomë është një top me gradient të ngrohtë.
- Channel Studio — Një laborator fotografik në studio me një abazhur korali
- Electronic Materials Office — Një prush i ndezur në një galeri të zbukuruar me qymyr druri
- ORYZO AI — Një ese me foto rreth një dhome të errët. Një objekt i vetmuar që qëndron pezull në errësirën e ngrohtë, me një shkop krem si dekorimin e vetëm.
- Factory — Terminali i "dhomës së luftës" në mesnatë. "Fabrika" është një panel kontrolli i zi ku një kartë e vetme e bardhë bie si një sinjalizues i ndriçuar nga elektriku dore - i vetmi objekt në dhomë është vetë puna.
- Hungry Tiger — Grafiti të ndritshëm si shafrani i Indisë në murin e tandoorit. Një paletë e unifikuar ngjyrash ari dhe kafe e ndryshkur, me shkronja aq të mëdha sa duket më shumë si një tabelë tregu erëzash sesa si një faqe interneti.
- Bibliothèque — Një galeri e zezë në formë kubi nën një dritë prozhektorësh – një pjatë e vetme e ndriçuar në një sallë të gjerë e të errët
- Apple (España) — teatër i zi me pajisje të ndriçuara