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
- Apple iPhone 18 Pro — Një galeri me pajisje të mesnatës. Konsideroni secilën pjesë si një bazament të errët, si muze, me një pjesë të produktit të theksuar saktësisht, dhe tipografinë dhe kontrollet blu që shërbejnë si etiketa diskrete përreth saj.
- Apple Watch Ultra 4 — Një mjet për testimin gjatë natës. Krijoni ekrane si një sekuencë zonash ekspozimi të zeza, ku kokat gjigante SF Pro krijojnë pajisje me precizion të lartë, të dhëna aktive dhe ngjyra elektrike të dozuara me kujdes.
- Apple Watch Series 12 — Një sensor bronzi në errësirë. Mendoni për pajisjet dhe treguesit e statusit të orës si objekte të ndriçuara të pezulluara në një galeri pothuajse të errët.
- Bedouin's Daughter — Rrezet e diellit mbi kadife të zezë. Përdorni sipërfaqe të ndritshme me ngjyrë të verdhë gjalpi, sipërfaqe të zeza të forta dhe imazhe kokrrizash të ndriçuara nga dielli si pjesë të barabarta të kompozimit vizual.
- 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.