Shop
Kelluva kaupankäynnin tähdistö valkoisella marmorilla
Verkkokauppa toimii "valkoisen kankaan" mallilla, jossa tuotteet näytetään suurina, voimakkaasti kaarevina kuvakortteina pikkukuvien ruudukoiden sijaan. Koko käyttöliittymä on uskomattoman sujuva: 20–28 pikselin säteet kaikkialla, pillerinmuotoiset säätimet ja kompakti 16 pikselin GT Standard -runko, jossa on tiukka negatiivinen seuranta, joka tekee tekstistä terävää ja lihavoitua. Järjestelmän ainoa lihavoitu korostus on eloisa violetti (#5433eb), joka näkyy logossa, pyöreässä hakutuloskentässä ja sävytettynä varjona samassa painikkeessa. Loput paletista on lämpimän neutraalia: valkoiset pinnat, hienovarainen viileä harmaa kangas, hienovaraiset reunukset ja lähes musta teksti. Tiheys pysyy kompaktina 12 pikselin sisäviivoilla, mutta sankari- ja kategoriaraidat hengittävät anteliaan 64–80 pikselin pystysuuntaisen rytmin ansiosta, mikä tekee kaupankäyntikokemuksesta enemmän selaamisen kuin luettelon kaltaisen.
Suurin leveys on 1200 pikseliä, keskitettynä läpikuultavalle #f2f4f5-pohjalle, ja vasemmalla puolella on pysyvä 64 pikseliä leveä sivupalkki, joka sisältää vain navigointikuvakkeita. Pääelementti on täysleveä kaistale, jossa tuotekortit on sijoitettu keskitetyn violetin "kauppa"-logon yläpuolelle ja sen alapuolelle pillerin muotoinen hakupalkki. Kategoriapillerit on järjestetty yhdeksi keskitetyksi riviksi hakupalkin alapuolelle. Sisältöosiot (Naiset, Miehet, Kauneus, Koti, Vauvat ja lapset) seuraavat nimettyinä kaistaleina, joista jokainen sisältää nelisarakkeisen ruudukon tuotekuvineen tai kaksisarakkeisen "pääelementti ja ruudukko" -koostumuksen. Pystysuuntainen rytmi on runsas: 64–80 pikseliä pääosioiden välillä. Alatunniste on tumma kaistale sivun alareunassa, jossa on sarakkeen muotoiset linkkiryhmät. Vaakasuorien tuotepaneelien oikealla puolella olevat karusellinuolet osoittavat vieritettävää sisältöä ilman sivutuspisteitä.
Valokuvaus on hallitseva visuaalinen elementti: koko näytön tuotekuvat valkoista taustaa vasten, rajattuina suhteessa 1:1, ja lifestyle-kuvat lämpimillä maanläheisillä sävyillä (beige, terrakotta, salvia, norsunluu). Tuotekuvilla on oma värinsä – käyttöliittymä pysyy akromaattisena, jolloin tuotesävyt tarjoavat visuaalista vaihtelua. Brändilogot näkyvät päällekkäistekstinä tummien tai vaaleiden pääkuvien päällä yksittäisten kuvakkeiden sijaan. Pääasetelmassa tuotekortit on sijoitettu kelluvaksi, hieman päällekkäiseksi tähdistöksi sanamerkin yläpuolelle. Kuvakkeet ovat minimalistisia ja yksivärisiä (mustat ääriviivat), lukuun ottamatta kategoriakuvakkeita, joissa käytetään yhtä brändiväriä. Tuotekuvissa ei ole kuvituksia, 3D-tehosteita tai liukuvärejä.
Paletti
Merkki
- Shop Violet
#5433eb— Lähetä-painike, pisteviivalla merkitty tekstimerkki ja brändilogo ovat ainoat yksityiskohdat, jotka korostavat valkoisen taustan toimintaa ja yksilöllisyyttä. - Violet Wash
#c0b5f3— Läpikuultava sädekehä violetin lähetyspainikkeen takana, joka säilyttää hohteensa muuttamatta sävyä.
Neutraali
- Canvas Mist
#f2f4f5— Sivun tausta ja kohokorttien takana oleva lisäpintakäsittely. - Pure White
#ffffff— Korttien, syöttökenttien, kelluvien merkkien ja pillerinmuotoisten painikkeiden pääpinta. - Ink Black
#000000— Pääteksti, otsikot, kuvakkeet, navigointisymbolit ja tuotekortit tummassa tilassa. - Faint Border
#ebebeb— Ohuet jakoviivat korteissa, syöttökenttien ääriviivat ja pillerinmuotoiset nappikehykset. - Muted Gray
#787574— Toissijainen teksti, navigointitunnisteet, kuvakkeiden ääriviivat, kun ne eivät ole käytössä - Cool Stone
#cccccc— Paikkamerkit, käytöstä poistetut tilat ja passiivisten kuvakkeiden taustat
Typografia
11:stä 16 pikseliin · 4 vaihetta
- GT Standard — korvaava: Inter · ääriviivat 400 · Ensisijainen fontti kaikissa kokoluokissa – sekä leipätekstissä että otsikoissa. GTStandard-MRegular, jonka koko on 16 pikseliä/-0,031 em, on ensisijainen fontti leipätekstille, painikkeille ja otsikoille. GTStandard-MSemibold, jonka koko on 20 pikseliä/-0,05 em, on käytössä useissa suurissa otsikoissa; GTStandard-MMedium, jonka koko on 11–12 pikseliä, on käytössä mikrokuvateksteissä. Jokainen fonttivariantti näytetään optisella painotuksella 400 – fonttihierarkia saavutetaan hienovaraisilla liukuväreillä ja tiheällä negatiivisella kirjainvälistyksellä lihavoinnin kontrastin sijaan. Tämä on tunnusomainen tyyli: Shop ei huuda lihavoituilla fonteilla, vaan muokkaa tekstiä kirjainvälistyksen avulla.
- Shopify Sans — korvaava: Inter · ääriviivat 400, 700 · Varattu järjestelmätason viesteille, kuten sovellusten latausbannereille ja evästeiden suostumusteksteille.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | keskimäärin |
| Perusvaihe | 12px |
| Painikkeen säde | 9999px |
| Kortin säde | 28px |
| Varjot | pehmeät varjot |
| Osioiden välillä | 64px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Shop -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- Cursor — Viihtyisä pergamenttipaja, kytevien hiilien valaisema
- Slush — puhallettava tarrojen universumi pastellipaperille
- MindMarket — Viihtyisä satukirja kermanvärisellä paperilla – ystävällinen toimituksellinen pohja, jossa suuret Inter-otsikot ja leikatut paperihahmot esiintyvät rinnakkain auringon paahtamalla, tarranpehmeällä pinnalla.
- Airbnb — Hiljainen valkoinen galleriaseinä ja yksi korallinpunainen kirjanmerkki
- Superr — Lämmin kouluvihko pehmeässä iltapäivän valossa. Kermanvärinen sivu, oranssi tussi ilman korkkia ja pino laminoituja nimitarroja odottamassa irrottamista.
- Apple (España) — Museon galleria on pehmeässä päivänvalossa yksittäinen, lumoava, painoton valkoinen tila, jossa jokainen näyttelyesine valaistuu kohdevalolla kevyesti sävytettyä seinää vasten.
- Lamborghini — Musta koriväri näyttelytilassa, valonheittimien alla - yksi keltainen auto
- Amplemarket — Auringon paahtama työpaikka, joka on täynnä konfetteja
- Getharvest — Kultainen työpöytä – lämmin kermanvärinen kangas, valkoiset postikortit roikkumassa kankaalla ja yksi kirkkaan oranssi liekki
- Agence Foudre — Lehden kansi on pehmeän pinkki, joka tuo mieleen huulipunan.
- Drive Capital — Retro road trip -juliste lämpimällä paperilla
- Apple (España) — valkoinen galleriavitriini