Telegram, WhatsApp+380637610482
Valeri Danjuk
Valeri DanjukkehittäjäTekoälytyökalujen kehittäminen yrityksille. Korkealaatuinen. Edullinen.Kirjoita Telegramissa
Le Puzz — esikatselu sivustosta tässä tyylissä

Le Puzz

Sunny Sunday Circular on mysteerejä täynnä oleva tabloidi.

Le Puzz on maksimalistinen verkkokauppajärjestelmä putiikeille, joka on rakennettu kaksiväriselle pohjalle: täyteläinen, hunajakennomainen keltainen yhdistettynä puhtaaseen mustaan viileää, helmenharmaata taustaa vasten. Sen tyyli on risteytys vintage-sanomalehden ja palapelin välillä: leipäteksti on serif Times -fontilla, kun taas otsikot ovat mukautetulla Times Now -fontilla, joka rikkoo tarkoituksella perinteisiä, sans-serif-fontteihin perustuvia verkkokaupan käytäntöjä. Itse käyttöliittymä on pidetty yksinkertaisena ja ruudukkopohjaisena, jolloin visuaalinen vaikutus välittyy tuotepakkauksen kautta (tiheät, kuvitetut sommitelmat, jotka ovat täynnä leluja). Käyttöliittymän ohjaimet ovat melko vankkoja: mustareunaiset painikkeet keltaisella taustalla, pillerinmuotoiset kuvakkeet, 12 pikselin säteellä varustetut kortit ja reilu kirjainväli pienille isoille kirjaimille, mikä antaa jopa "PIKALISÄÄ"-painikkeelle toimituksellisen säväyksen.

Klassinen verkkokaupparuudukko, jolla on erottuva toimituksellinen muotoilu. Ylätunniste on keltainen hunajakennomainen kaistale, jossa on yhden levyinen musta reunus ja keskitetty logo sekä rivi navigointipainikkeita. Alapuolella, harmaalla taustalla olevan kolmipalstaisen tuoteruudukon yläpuolella, on keskitetty tervetuloylätunniste Times Now -fontilla. Pääelementti on keskitetty, kulmiltaan pyöristetty valokuvalohko (40), jota reunustavat kaksi tuotekorttia. Osioiden rytmi säilyy: runsaasti pystysuoraa tilaa (30), vuorottelevat keltaiset ja harmaat pinnat ja enimmäisleveys noin 4,5 cm, keskitettynä sivulle. Tuotekortit ovat samankokoisia ja järjestetty siistiin kolmipalstaiseen ruudukkoon, jossa on 5 cm:n välit. Asettelu on symmetrinen ja sidottu ruudukkoon – ei epäsymmetrisiä sommitelmia tai päällekkäisiä elementtejä.

Visuaalinen elementti on tuotevalokuvaus. Palapelilaatikot valokuvataan suoraan valkoista/neutraalia taustaa vasten ja asetetaan sitten lämpimän sinistä tai luonnollista studiotaustaa vasten. Pääkuvassa on henkilö, joka pitelee useita palapelilaatikoita – elämäntapaesineitä, jotka on ikuistettu vaivattomasti energialla. Pakkaus itsessään on rikas, havainnollistava ja maksimalistinen: lukuisia leluja, elintarvikkeita ja hahmoja kirkkaissa perusväreissä ja paksuilla mustilla ääriviivoilla, jotka on suunniteltu näyttämään lastenkirjan kuvitukselta 500-palaisessa palapelissä. Ei abstraktia grafiikkaa, ei 3D-renderöintejä, ei ikonografiaa kuin yksi suurennuslasi – palapelit itse ovat visuaalinen kieli.

Paletti

Merkki

  • Honeycomb Yellow #ffd931 — Ensisijainen brändiväri, otsikkorivi, ensisijaiset toimintopainikkeet, navigoinnin aktiivinen tila, linkin alleviivausväri, korostusväri – se yksivärinen sävy, jonka ympärille kaikki muu pyörii.

Neutraali

  • Carbon Black #000000 — Pääteksti, paksut reunat, painikkeiden ääriviivat, kuvakkeiden ääriviivat ja navigointiteksti ovat koko järjestelmän rakenteellinen perusta.
  • Ink Black #231f20 — Toissijainen teksti, ensisijainen teksti, painikkeiden reunat, syöttökenttien reunat – hieman lämpimämpi, lähes musta väri pehmeämmän tuntuman aikaansaamiseksi.
  • Pearl Gray #c8cbcd — Sivupohja, tuotekorttien taustat, silmiinpistävä näyttämö, jossa näkyvät keltaiset ja mustat värit.
  • Fog Gray #a6a8aa — Hillityt merkkipinnat, toissijaiset sirujen taustat ja hienovaraiset käyttöliittymätäytteet.
  • Smoke Line #d6d6d6 — Ohuet jakajat, huomaamattomat pöytä-/korttijakajat.

Typografia

11:stä 47 pikseliin · 6 vaihetta

  • Times Now — korvaava: Playfair Display · ääriviivat 100, 400 · Otsikoihin ja alaotsikoihin tarkoitettu serif-fontti – käytetään pääotsikoissa, tuotenimissä ja osioiden otsikoissa. Erittäin kevyt 100 pisteen fontti, jonka riviväli on 47 pikseliä, luo korkean, lähes tiivistetyn toimituksellisen vaikutelman; tiivistetyt kirjainmuodot (rivinkorkeudet 0,87–0,90) mahdollistavat suurten otsikoiden sijoittamisen lähelle oheistekstiä, jäljitellen painettua julistetta.
  • Times — korvaava: Times New Roman · ääriviivat 400 · Serif-leipäteksti on verkkokaupalle odottamaton valinta, sillä se antaa koko sivustolle kirjallisen, luettelomaisen tunnelman. Pieni riviväli (1,15) tekee kappaleista tiiviitä ja luettavia.
  • Helvetica Neue — korvaava: Helvetica · ääriviivat 100, 400 · Käyttöliittymän pieni teksti, painikkeiden teksti ja mikroteksti on asetettu 11 pikselin fontilla ja isolla kirjainvälillä (0,0730 em), mikä luo vaikutelman isoilla kirjaimilla kirjoitetusta jopa mukavassa ruumiinlämmössä.

Intervallit ja muoto

TarkoitusMerkitys
Tiheystiheä
Perusvaihe15px
Painikkeen säde12px
Kortin säde12px
Varjotei - reunoja varjojen sijaan
Osioiden välillä30-40px
Sivun leveys1200px

Tekoäly rakentaa verkkosivustosi Le Puzz -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ä

  • Agence Foudre — Lehden kansi on pehmeän pinkki, joka tuo mieleen huulipunan.
  • INVERSA — Topografinen kenttäterminaali keskiyöllä. Tumma komentopaneeli, jossa massiivinen toimituksellinen fontti ja yksi kerros neonvihreitä merkkejä on asetettu Maan satelliittikuvien päälle, jokainen merkintä yksivärisenä, ikään kuin se lukisi tehtävän koordinaatteja.
  • Acne Studios — Minimalistinen galleriatila täynnä eloisia valokuvia – marmorille aseteltu muotilehti
  • GTE — Kauppaterminaali galleriavalaistuksen takana
  • Diabla — Välimerellinen sisäpiha keskipäivällä – auringon haalistamat vaaleanpunaiset seinät, yksi kirkkaanpunainen kangaskatos ja taivaan alla levittäytyvät pääkirjoitusten otsikot, joissa on serifioituja otsikoita.
  • Subset — Raa'asta pellavasta valmistettu toimituksellinen putiikki
  • Cursor — Viihtyisä pergamenttipaja, kytevien hiilien valaisema
  • 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.
  • 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
  • Drive Capital — Retro road trip -juliste lämpimällä paperilla