Glossier
Sessió de fotos amb sol: paper blanc, tinta negra, un toc groc brillant
Glossier funciona com una revista de bellesa digital: un llenç gairebé monocrom de blanc i negre, puntuat per un únic i vibrant accent groc que també serveix com a logotip de la marca i única crida a l'acció. El sistema és editorialment restringit (titulars Apercu de grans dimensions, ampli espai de text, fotografia d'estil de vida a pàgina completa que porta la major part del pes emocional) i utilitari en l'execució: targetes de producte planes, vores primes i una manca total d'embelliment. El groc no és un color secundari de la marca; ÉS la marca, utilitzada amb moderació, de manera que cada aparença sembla el flaix d'una càmera. Tota la resta està pensat per esvair-se en el fons: els neutres són grisos càlids amb un subtil to de rubor, les vores són subtils i la tipografia és densa i condensada. El resultat és un aparador que es percep com una botiga segura, discreta i sense concessions.
La pàgina presenta una sèrie de seccions a pantalla completa disposades verticalment, cadascuna dissenyada com una extensió editorial independent. La secció principal és una foto d'amplada completa amb una superposició blanca flotant (a dalt a l'esquerra) i un logotip groc massiu que ocupa tota la part inferior de la pàgina. A sota de la secció principal, les seccions alternen entre imatges a pantalla completa i quadrícules de targetes individuals. La divisió de categories (cura de la pell/maquillatge) en dues columnes amb una proporció igual d'imatges (50/50) es produeix sense una vora visible; només una línia que connecta les imatges les separa. El catàleg de productes utilitza una quadrícula de quatre columnes de targetes quadrades sobre un llenç #f7f7f7. La navegació és una barra superior minimalista amb una franja publicitària secundària a sobre. Els espais entre les seccions són força grans (64 px), però les transicions entre seccions són suaus, sense divisors ni colors de fons alterns, excepte el peu de pàgina càlid. El ritme general és: fotografia, text, fotografia, quadrícula, fotografia, com fullejar una revista de moda.
La fotografia és el llenguatge visual dominant. Tota l'àrea de visualització està plena d'imatges i retrats d'estil de vida: una càlida il·luminació daurada, primers plans suaus de la pell, mans que sostenen ampolles de productes amb un fons de sol brillant. La paleta de colors de les fotografies és càlida i desaturada: cels préssec, tons de pell terracota, blaus oceànics profunds. Les imatges sempre ocupen tota la superfície de la pàgina, sense cantonades arrodonides, marcs ni superposicions, amb l'excepció de les targetes de text blanc o el logotip groc. Les fotos de productes de les targetes del catàleg es fan sobre un fons blanc pur i sense fissures amb una il·luminació plana i uniforme. La relació imatge-text és d'aproximadament 70/30: les imatges transmeten emoció, el text, funció. Sense il·lustracions, sense gràfics abstractes, sense representacions en 3D.
Paleta
Marca
- Glossier Yellow
#fff116— El groc s'utilitza com a accent secundari per a detalls decoratius i per ressaltar consultes de cerca menys utilitzades. No s'hauria d'utilitzar com a color principal per a una crida a l'acció.
Neutral
- Ink
#000000— Text del cos, enllaços de navegació, text principal, text del peu de pàgina, contorns d'icones, vores fines; color tipogràfic i estructural dominant. - Paper
#ffffff— Superfícies de la targeta de producte, àrees d'ompliment, panells en relleu; el nivell de superfície més brillant de la pila. - Fog
#f7f7f7— Lienç de la pàgina, fons de secció, transicions entre imatges de la pàgina; la superfície base sobre la qual es troba tot el lloc web. - Blush
#faf2f4— Fons de peu de pàgina, separadors de seccions suaus i càlids; un subtil to blanc rosat afegeix calidesa a la part inferior de les pàgines. - Mist
#f0f0f0— Una superfície de suport lleugera per crear un fons discret i separar seccions. No s'hauria d'utilitzar com a color principal per a la crida a l'acció. - Ash
#e8e8e8— Vores dels camps d'entrada, fons d'icones, línies separadores fines; color de la vora estructural per a targetes i elements de formulari.
Tipografia
de 12 a 32px · 5 passos
- Apercu — reemplaçament: Inter · esquemes 400, 500, 700 · La tipografia principal s'utilitza a tota la interfície d'usuari: el cos del text és de 16px/400, la navegació i els peus de foto de 12–14px/500, els subtítols de 20px/500 i els titulars editorials de 32px/700. El disseny geomètric i humanista d'Apercu dóna a la marca un estil modern i condensat; l'espaiat entre lletres gairebé nul (0,002–0,003em) fa que la tipografia sigui compacta i semblant a una revista, en lloc d'airejada o amigable. El pes de 700 es reserva per a elements de visualització en editorials, no per a elements de la interfície d'usuari.
- Apercu Mono — reemplaçament: JetBrains Mono or IBM Plex Mono · esquemes 400 · Tipografia microutilitària per a metadades de comandes, números de seguiment i etiquetes al costat del codi; la versió monoespaiada crea una textura tècnica contra un tipus de cos proporcional.
- GTStandard-M — reemplaçament: Inter · esquemes 400 · GTStandard-M: es troba a les dades extretes però no és descrit per la IA.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | mitjana |
| Pas bàsic | 8px |
| Radi del botó | 0px |
| Radi de la targeta | 0px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 64px |
| Amplada de la pàgina | 1440px |
La IA crearà el vostre lloc web a l'estil Glossier 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
- Lightship — Un diorama cinematogràfic de la carretera oberta. Parets de galeria de color crema càlid adornades amb grans fotografies de paisatges muntades a intervals curts, amb lletres negres fines gairebé invisibles als marcs i un únic detall taronja brillant que trencava el monocrom com una foguera en un prat.
- Faire ES — catàleg a l'engròs de crema calenta
- Adanola — Un lookbook editorial sobre paper blanc. Una sessió de moda on la tipografia i la fotografia respiren sobre superfícies blanques i netes, amb tinta negra per a la tipografia i una subtil font sans-serif característica (Favorit), que reflecteix l'estil general de la marca.
- Oura Ring — Un acollidor taller de fabricació de civada, banyat per una suau llum del dia
- Stykka — Un taller escandinau en llum blanca: una sala d'exposició tranquil·la i artesanal on l'única veu és la fotografia.
- DJI — lona negra aeroespacial amb un únic ressalt blau elèctric
- Altitude Beverages — Pàgina de revista monocroma. Imagineu-vos una pàgina de revista de moda sense color excepte per les fotos fixes: el text i l'espai en blanc expliquen tota la història.
- AATHER — Un palmell obert, una sola flama: un luxe tranquil contingut en la quietud
- Cowboy — Una galeria belga de bicicletes en un entorn de porcellana blanca com la neu. Una sala d'exposició on les superfícies mats, les grans fonts utilitzades en materials editorials i una pràctica absència de decoració atrauen la mirada cap a la bicicleta i el seu contingut.
- Refero — Disseny editorial sobre marbre blanc: una pàgina de producte creada per un tipògraf, on el titular amb serif és la targeta de presentació de la marca i tota la resta és discreta.
- Face Formula — Un retrat editorial escandinau. Una publicació tranquil·la, d'estil de revista, on la mirada de la model i el titular, escrits amb una font serif condensada, parlen per si sols sobre un fons fred i ennuvolat.
- Shupatto — Vitrina de museu sobre marbre blanc