Shopify
Gauerdiko Negutegia - Marka erregistratuak loratzen dira turkesa sakoneko atzealde baten aurrean, menda txinparta bakar batek argiztatuta
Shopify-ren diseinu sistema gauerdiko tailer bat da merkataritzarako: mihise ia beltza, turkesa berde sakon batez tindatua, sans-serif letra-tipo zabal eta segurua, eta une interaktiboak aktibatzen dituen menta koloreko azentu bizi bakarra. Interfazeak gela ilun baten antza du, non produktuak eta markak diren argi-iturri: argazkiak eta denden erakusleihoak gainazal ia beltzen aurka distiratzen dira, kromo elementuak urruntzen diren bitartean. Osagaiak geometrikoak baina leunak dira: 12px-ko erradioko txartelak ertz meheekin, pilula itxurako botoiak eta 330 pisuko letra-tipoa, eskala xuxurlatzen duena oihuen ordez. Puntuazio-marka kromatiko bakarra (#36f4a4) gutxitan erabiltzen da esteketan, etiketetan eta foku-egoeretan, kolorea une funtzionaletarako gordez, merkatarien istorioak foku-puntu bisuala izaten jarrai dezaten.
Gehienezko zabalera ~1280px da, erdian, argazki-edukiontzitik haratago hedatzen diren zabalera osoko sarrera-orrialdeekin. Orriaren erritmoa txandakatzen da: (1) zabalera osoko sarrera-orrialde ilun bat, gainjarritako izenburu batekin eta ekintzarako dei-botoiekin, (2) gehienezko zabalera duten testu eta irudi-blokeekin 2 zutabetan edo irudi-saretekin 3 zutabetan, (3) erakusleiho-panel interaktibo batzuk (produktuaren txartela, bidalketa-kalkulagailua, munduko mapa) mihise sakonago batean txartel erliebatu gisa bistaratzen dira. Nabigazioa goiko barra finko bat da, logotipoa + 3 nabigazio-elementu + bigarren mailako estekak + ekintzarako dei-botoi nagusia dituena, guztiak eskuinaldean lerrokatuta. Erritmo bertikalak 80px-ko tarteak erabiltzen ditu atalen artean, trantsizio leun batekin —ez dago zatitzailerik atal ilunen artean, gainazaleko tonuaren aldaketa bat besterik ez.
Diseinu bisuala batez ere txikizkariarengan zentratzen da: tamaina osoko produktuen argazkiek eta markaren ekitaldietako argazkiek dute pisu bisual gehiena, askotan atzeko plano handien moduan, gainjarritako testu zuriarekin. Irudiak ondo moztuta daude, kontraste handikoak eta izaera jai-girokoak (Nasdaq kanpaiaren hotsa, taldeko agurrak, eskuan dauden produktuen plano hurbilak). Atzeko plano ilunak argazki hauek fokuek argiztatzen dituztela ematen du. Ilustrazioak minimalistak dira: azalpen-lan nagusia txertatutako produktuen irudiek eta denden erakusleihoen pantaila-argazkiek egiten dute. Ikonoak monokromoak dira, 1,5-2 px-ko lerro-zabalerarekin, normalean zuriak edo #36f4a4 egoera aktiboetarako.
Paleta
Marka
- Shopify Mint
#36f4a4— Nabigazio aktiboko adierazleak, foku eraztunak, etiketa nabarmentzeak eta esteketan gainetik pasatzen den nabarmentzeak dira atzeko plano ilun baten aurrean interaktibitate gaituaren sentsazioa sortzen duten distira kromatiko bakarrak.
Neutroa
- Midnight Forest
#02090a— Orrialdearen mihisea, goiburuaren atzeko planoaren irudiak, atalaren atzeko planoaren irudiak - Deep Lichen
#061a1c— Txartel nagusien gainazalak, panel altxatuak, eduki-blokeak. - Shaded Fern
#072720— Nabigazio panela, txartel gehigarriak, panelaren altxatze ia nabarmena. - Spruce Border
#1e2c31— Txartelen ertz meheak, banaketa-lerroak, sarrera-eremuen eskemak. - Abyss Indigo
#000a1e— Produktuak/erakustaldiak txertatzeko gainazal gehigarria, funtzioen deskribapenak dituzten panelak. - Pure White
#ffffff— Testu nagusia, botoien betegarria, izenburua, logotipoak.
Tipografia
12tik 70px-ra · 8 urrats
- Neue Haas Grotesk — ordezkapena: Inter · eskemak 330, 400, 500, 550, 600 · Tipografia-sistema nagusia 70–96px (330–400) letra-lodierako izenburuak dira, ozenak baino sotilak; 16–18px (400–500) letra-lodierako gorputz-testua; eta 14–16px (500–550) letra-lodierako nabigazioa eta erabiltzaile-interfazea. Pantaila-tamaina handietan 330eko letra-lodiera ultra-arina ezaugarri bereizgarria da: konfiantza transmititzen du neurritasunaren bidez, bolumenaren bidez baino.
- Inter Variable — ordezkapena: Inter · eskemak 400, 420, 450, 550 · Nabigazio-interfazearen elementuetan, ohar txikietan, fitxa-kontroletan eta oin-orriko mikrotestuetan erabiltzen den bigarren mailako letra-tipoa. Letra minuskula apur bat handiagoak eta letren arteko tarte estandarragoa dituenez, irakurterrazagoa da tamaina trinkoetan. 420 pisuko letra-tipo batek letra-tipo arrunt eta ertain baten arteko hutsunea betetzen duen egoeretarako ere egokia da.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | batez bestekoa |
| Oinarrizko urratsa | 12px |
| Botoiaren erradioa | 9999px |
| Txartelaren erradioa | 12px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 80px |
| Orriaren zabalera | 1280px |
Adimen artifizialak zure webgunea Shopify estiloan eraikiko du eta beteko du
- Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
- Transferitu edukia zure gune zaharretik: zehaztu helbidea.
- Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
- Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.
Estilo antzekoak
- Retool — Obsidiana tailer bero bat - doitasun-tresnentzako gainazal bat, txingar ketsuek argiztatua, non dena sortzen den
- Elektron — Gauerdian ekipamenduaren kontrol panela mihise ia beltza da, non produktuen argazkiak distira egiten duten interfazea ia ikusezin den bitartean.
- REKKI — Argazki laborategiko hegaldi kontrol panela
- OFFFICE : — letra-tipo monolitikoz inguratutako galeria noir bat
- Clyde — Erakusleihoa, bere foku bakarrarekin, galeria ia ilun bat da, non gelako kolore bakarra gradiente epeleko bola bat den.
- Channel Studio — Koral-pantalla bakarreko estudioko argazki laborategi bat
- Electronic Materials Office — Txingar distiratsu bat ikatzez apaindutako galeria batean
- ORYZO AI — Gela ilun bati buruzko argazki-saiakera bat. Objektu bakarti bat iluntasun epelean flotatzen, krema koloreko letra-tipoa apaingarri bakarra izanik.
- Factory — "Gerra gela" terminala gauerdian. "Fabrika" kontrol panel beltz bat da, non txartel zuri bakarra lurreratzen den linterna batek argiztatutako bidalketa baten antzera; gelako objektu bakarra lana bera da.
- Hungry Tiger — Tandoor-aren horman kurkuma-distiratsuko grafitiak. Urre eta marroi herdoil koloreko paleta bateratua, letra-tipo hain handia ezen espezia-merkatu baten seinalea webgune bat baino gehiago dirudien.
- Bibliothèque — Kubo beltz itxurako galeria foku baten azpian – areto ilun eta zabal bateko plaka argiztatu bakarti bat
- Apple (España) — argiztatutako osagarriak dituen antzoki beltza