Le Puzz
Sunny Sunday Circular és un tabloide ple de misteris.
Le Puzz és un sistema de comerç electrònic maximalista per a botigues boutique, construït sobre una base de dos tons: un groc intens, semblant a un bresca, combinat amb un negre pur, sobre un fons gris perla fresc. El seu estil és una barreja entre un diari vintage i un trencaclosques: el text del cos està en Times amb serifes, mentre que els titulars estan en una font personalitzada, Times Now, trencant deliberadament amb les convencions tradicionals del comerç electrònic que es basen en fonts sans-serif. La interfície en si es manté senzilla i basada en quadrícula, cosa que permet que l'impacte visual es transmeti mitjançant l'embalatge del producte (composicions denses i il·lustrades plenes de joguines). Els controls de la interfície són força robustos: botons amb una vora negra sobre un fons groc, icones en forma de píndola, targetes amb un radi de 12 px i un espaiat generós entre lletres per a majúscules petites, cosa que dóna fins i tot al botó "AFEGIR RÀPID" un toc editorial.
Una quadrícula clàssica de comerç electrònic amb un disseny editorial distintiu. La capçalera és una franja groga en forma de bresca amb una vora negra d'1 amplada, que allotja un logotip centrat i una fila addicional de botons de navegació. A sota, per sobre d'una quadrícula de tres columnes de productes sobre un fons gris, hi ha una capçalera de benvinguda centrada amb la font Times Now. L'element principal és un bloc de fotos centrat amb cantonades arrodonides (40), flanquejat per dues targetes de producte. Es manté el ritme de les seccions: un ampli espai vertical (30), superfícies grogues i grises alternades, i una amplada màxima d'aproximadament 4,5 cm, centrada a la pàgina. Les targetes de producte tenen la mateixa mida i estan disposades en una quadrícula ordenada de tres columnes amb espais de 5 cm. El disseny és simètric i està lligat a la quadrícula: sense composicions asimètriques ni elements superposats.
L'element visual és la fotografia de producte. Les caixes de trencaclosques es fotografien completament sobre un fons blanc/neutre i després es col·loquen sobre un fons d'estudi blau càlid o natural. La imatge principal mostra una persona que sosté diverses caixes de trencaclosques, un objecte d'estil de vida, capturat amb una energia natural. L'embalatge en si és ric, il·lustratiu i maximalista: una multitud de joguines, productes alimentaris i personatges en colors primaris brillants amb contorns negres gruixuts, dissenyats per semblar una il·lustració de llibre infantil escampada per un trencaclosques de 500 peces. Sense gràfics abstractes, sense renders en 3D, sense iconografia més enllà d'una única lupa: els trencaclosques en si mateixos són el llenguatge visual.
Paleta
Marca
- Honeycomb Yellow
#ffd931— El color principal de la marca, la barra de títol, els botons d'acció principals, l'estat actiu de la navegació, el color de subratllat de l'enllaç, l'emplenament d'accent: la nota de color única al voltant de la qual gira tot.
Neutral
- Carbon Black
#000000— El text principal, les vores gruixudes, els contorns dels botons, els contorns de les icones i el text de navegació són la base estructural de tot el sistema. - Ink Black
#231f20— Text secundari, text principal, vores dels botons, vores del camp d'entrada: un color lleugerament més càlid, gairebé negre, per a una sensació més suau. - Pearl Gray
#c8cbcd— Lienç de pàgina, fons de targetes de producte, un escenari impactant on apareixen els colors groc i negre. - Fog Gray
#a6a8aa— Superfícies de les insígnies atenuades, fons de xips secundaris i farciments subtils de la interfície d'usuari. - Smoke Line
#d6d6d6— Separadors prims, separadors discrets de taula/targetes.
Tipografia
d'11 a 47 px · 6 passos
- Times Now — reemplaçament: Playfair Display · esquemes 100, 400 · Una font serif per a titulars i subtítols: utilitzada per a titulars principals, noms de productes i títols de seccions. La font ultralleugera de 100 punts amb un pas entre línies de 47 píxels crea una sensació editorial alta, gairebé condensada; les lletres condensades (alçada de línia de 0,87 a 0,90) permeten que els titulars grans es posicionin a prop del text que els acompanya, imitant un pòster imprès.
- Times — reemplaçament: Times New Roman · esquemes 400 · El text del cos amb serif és una elecció inesperada per a una botiga en línia, ja que dóna a tot el lloc web un aspecte literari, semblant a un catàleg. L'interlineat reduït (1,15) fa que els paràgrafs siguin compactes i llegibles.
- Helvetica Neue — reemplaçament: Helvetica · esquemes 100, 400 · El text petit de la interfície d'usuari, el text dels botons i el microtext estan configurats amb una font d'11 px amb un espaiat entre lletres gran (0,0730 em), cosa que crea la sensació d'escriure en majúscules fins i tot a una temperatura corporal confortable.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | dens |
| Pas bàsic | 15px |
| Radi del botó | 12px |
| Radi de la targeta | 12px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 30-40px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Le Puzz i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- Agence Foudre — La portada de la revista és d'un color rosa suau que recorda el pintallavis.
- INVERSA — Una terminal topogràfica de camp a mitjanit. Un panell de comandaments fosc, on una font editorial massiva i una sola capa de marcadors de color verd neó se superposen a imatges de satèl·lit de la Terra, cada etiqueta monocroma, com si llegís les coordenades de la missió.
- Acne Studios — Un espai de galeria minimalista ple de fotografies vibrants: una revista de moda presentada sobre marbre
- GTE — Terminal comercial darrere de la il·luminació de la galeria
- Diabla — Un pati mediterrani al migdia: parets roses descolorides pel sol, un tendal de lona vermell brillant i titulars editorials amb serifes que s'estenen pel cel.
- Subset — Botiga editorial feta de lli cru
- Cursor — Un acollidor taller de pergamí, il·luminat per brases fumejants
- MindMarket — Un llibre de conte de fades acollidor sobre paper crema: un llenç editorial agradable on grans titulars d'Inter i personatges de paper retallats conviuen sobre una superfície suau com un adhesiu banyada pel sol.
- Lamborghini — Color negre de la carrosseria a la sala d'exposició, sota els focus: un cotxe groc
- Amplemarket — Un lloc de treball assolellat i ple de confeti
- Getharvest — Un escriptori a l'hora daurada: un llenç de color crema càlid, postals blanques penjades al llenç i una única flama taronja brillant
- Drive Capital — Cartell retro de viatge per carretera sobre paper càlid