Shop
Plutajuća trgovačka konstelacija na bijelom mramoru
Online trgovina funkcionira po modelu "bijelog platna", s proizvodima prikazanim kao velike, jako zakrivljene slikovne kartice, a ne kao mreže sličica. Cijelo sučelje je nevjerojatno glatko: radijusi od 20-28px po cijelom prostoru, kontrole u obliku tablete i kompaktno GT Standardno tijelo od 16px s uskim negativnim praćenjem koje tekst čini oštrim i podebljanim. Jedini podebljani naglasak sustava je živahna ljubičasta (#5433eb), koja se pojavljuje u logotipu, kružnom polju rezultata pretraživanja i kao nijansirana sjena na istom gumbu. Ostatak palete je topla neutralna: bijele površine, suptilno hladno sivo platno, suptilni obrubi i gotovo crni tekst. Gustoća ostaje kompaktna s 12px žljebovima, ali herojske i category pruge dišu zahvaljujući velikodušnom vertikalnom ritmu od 64-80px, čineći da se iskustvo trgovine više osjeća kao pregledavanje nego katalog.
Maksimalna širina je 1200px, centrirana na prozirnom platnu #f2f4f5, s trajnom bočnom trakom širine 64px s lijeve strane koja sadrži samo ikone za navigaciju. Glavni element je traka pune širine, s karticama proizvoda postavljenim iznad centriranog ljubičastog logotipa "trgovina" i trakom za pretraživanje u obliku tablete neposredno ispod nje. Tablete kategorija raspoređene su u jednom centriranom redu ispod trake za pretraživanje. Odjeljci sadržaja (Žene, Muškarci, Ljepota, Dom, Bebe i djeca) slijede kao određene trake, a svaki sadrži mrežu s 4 stupca sa slikama proizvoda ili kompoziciju "glavni element i mreža" s 2 stupca. Vertikalni ritam je velikodušan: 64–80px između glavnih odjeljaka. Podnožje je tamna traka na dnu stranice s grupama poveznica u obliku stupaca. Strelice u obliku karusela na desnoj strani horizontalnih panela proizvoda označavaju sadržaj koji se može pomicati bez točaka paginacije.
Fotografija je dominantan vizualni element: fotografije proizvoda preko cijelog zaslona na bijeloj pozadini, izrezane 1:1, i slike životnog stila s toplim zemljanim tonovima (bež, terakota, kadulja, bjelokost). Slike proizvoda imaju vlastitu boju - korisničko sučelje ostaje akromatsko, što omogućuje nijansama proizvoda da pruže vizualnu raznolikost. Logotipi robnih marki pojavljuju se kao preklapajući tekst na tamnim ili svijetlim glavnim slikama, a ne kao pojedinačne ikone. U glavnoj kompoziciji, kartice proizvoda pozicionirane su kao plutajuća, blago preklapajuća konstelacija iznad oznake riječi. Ikone su minimalističke i monokromatske (crni obrisi), s izuzetkom ikona kategorija, koje koriste jednu boju robne marke. Nema ilustracija, 3D efekata ili gradijenata na slikama proizvoda.
Paleta
Robna marka
- Shop Violet
#5433eb— Gumb za slanje, točkasti tekst i logotip marke jedini su akcenti koji ističu akciju i individualnost na bijeloj pozadini. - Violet Wash
#c0b5f3— Prozirni oreol iza ljubičastog gumba za slanje koji održava svoj sjaj bez promjene nijanse.
Neutralno
- Canvas Mist
#f2f4f5— Pozadina stranice i dodatna površinska obrada iza izdignutih kartica. - Pure White
#ffffff— Glavna površina za kartice, polja za unos, plutajuće znakove i gumbe u obliku tableta. - Ink Black
#000000— Glavni tekst, naslovi, ikone, navigacijski simboli i kartice proizvoda u tamnom načinu rada. - Faint Border
#ebebeb— Tanke linije razdjeljivanja na karticama, obrisi polja za unos i okviri gumba u obliku tableta. - Muted Gray
#787574— Sekundarni tekst, navigacijske oznake, obrisi ikona kada je neaktivno - Cool Stone
#cccccc— Rezervirana mjesta, onemogućena stanja i neaktivne pozadine ikona
Tipografija
od 11 do 16px · 4 koraka
- GT Standard — zamjena: Inter · obrisi 400 · Primarni font u svim veličinama - i za tekst tijela i za naslove. GTStandard-MRegular s 16px/-0.031em je primarni font za tekst tijela, gumbe i oznake. GTStandard-MSemibold s 20px/-0.05em koristi se za nekoliko velikih naslova; GTStandard-MMedium s 11–12px koristi se za mikrotitlove. Svaka varijanta fonta prikazuje se s optičkom težinom od 400 - hijerarhija fonta postiže se suptilnim gradijentima i gustim negativnim razmakom između slova, a ne podebljanim kontrastom. Ovo je prepoznatljiv stil: Shop se ne ističe podebljanim fontovima, već oblikuje tekst razmakom između slova.
- Shopify Sans — zamjena: Inter · obrisi 400, 700 · Rezervirano za poruke na razini sustava kao što su banneri za učitavanje aplikacija i tekst pristanka za kolačiće.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | prosjek |
| Osnovni korak | 12px |
| Radijus gumba | 9999px |
| Radijus kartice | 28px |
| Sjene | meke sjene |
| Između odjeljaka | 64px |
| Širina stranice | 1200px |
Umjetna inteligencija će izraditi vašu web stranicu u Shop stilu i ispuniti je
- Popunite proizvodima i objavama putem poveznice - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa svoje stare web-lokacije - samo navedite adresu.
- Moderan dizajn na najboljem engineu: React ( Next.js) s renderiranjem na serveru i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretraživanja i preporuke neuronskih mreža.
Slični stilovi
- Cursor — Ugodna radionica za pergament, osvijetljena tinjajućim ugljenom
- Slush — napuhani svemir naljepnica na pastelnom papiru
- MindMarket — Ugodna bajkovita knjiga na krem papiru - prijateljsko uredničko platno gdje veliki Interovi naslovi i izrezani papirnati likovi koegzistiraju na suncem okupanoj, mekoj površini poput naljepnica.
- Airbnb — Tihi bijeli galerijski zid s jednom koraljnocrvenom oznakom stranice
- Superr — Topla školska bilježnica u mekom popodnevnom svjetlu. Krem stranica, narančasti marker bez poklopca i hrpa plastificiranih naljepnica s imenima koje čekaju da se odlijepe.
- Apple (España) — Muzejska galerija, u mekom dnevnom svjetlu, jedinstven je, očaravajući, bestežinski bijeli prostor, a svaki je eksponat osvijetljen reflektorom naspram lagano zatamnjenog zida.
- Lamborghini — Crna boja karoserije u salonu, pod reflektorima - jedan žuti automobil
- Amplemarket — Suncem okupano radno mjesto posuto konfetima
- Getharvest — Radni stol u zlatnom satu – toplo kremasto platno, bijele razglednice obješene na platnu i jedan jarko narančasti plamen
- Agence Foudre — Naslovnica časopisa je nježno ružičaste boje koja podsjeća na ruž za usne.
- Drive Capital — Retro plakat za putovanje automobilom na toplom papiru
- Apple (España) — bijela galerijska vitrina