Glossier
Séance photo ensoleillée - papier blanc, encre noire, une touche de jaune vif
Glossier fonctionne comme un magazine de beauté numérique: une toile presque monochrome de blanc et de noir, ponctuée d’une unique touche de jaune vif qui fait office de logo et d’unique appel à l’action. Le design est sobre – titres Apercu surdimensionnés, texte aéré, photos lifestyle pleine page qui portent l’essentiel du message – et fonctionnel: fiches produits épurées, bordures fines et absence totale d’ornements. Le jaune n’est pas une couleur secondaire; il EST la couleur emblématique de la marque, utilisé avec parcimonie pour que chaque apparition soit aussi percutante qu’un flash. Tout le reste se fond dans le décor: les tons neutres sont des gris chauds avec une subtile nuance rosée, les bordures sont discrètes et la typographie est dense et condensée. Le résultat? Une vitrine qui inspire confiance, sobriété et résolument moderne.
La page présente une série de sections plein écran disposées verticalement, chacune conçue comme une double page éditoriale indépendante. La section principale est une photo pleine largeur avec un surlignage blanc (en haut à gauche) et un grand logo jaune occupant tout le bas de la page. En dessous, les sections alternent entre images plein écran et grilles de fiches individuelles. La division des catégories (soins de la peau/maquillage) en deux colonnes avec un nombre égal d'images (50/50) se fait sans bordure visible: seule une ligne les sépare. Le catalogue de produits utilise une grille à quatre colonnes de fiches carrées sur un fond #f7f7f7. La navigation se fait par une barre supérieure minimaliste surmontée d'une bande publicitaire. Les espaces entre les sections sont assez importants (64 px), mais les transitions sont fluides: pas de séparateurs ni de couleurs de fond alternées, à l'exception du pied de page aux tons chauds. Le rythme général est: photo, texte, photo, grille, photo – comme feuilleter un magazine de mode.
La photographie est le langage visuel dominant. L'espace d'affichage est entièrement consacré à des images lifestyle et des portraits: lumière dorée et chaude, gros plans doux sur la peau, mains tenant des flacons de produits sur fond de soleil éclatant. La palette de couleurs des photographies est chaude et désaturée: ciels pêche, teints terracotta, bleus profonds de l'océan. Les images occupent toujours toute la surface de la page, sans coins arrondis, cadres ni superpositions, à l'exception des fiches blanches ou du logo jaune. Les photos de produits sur les fiches du catalogue sont prises sur un fond blanc uni, avec un éclairage plat et uniforme. Le rapport image/texte est d'environ 70/30: les images transmettent l'émotion, le texte, la fonction. Pas d'illustrations, pas de graphismes abstraits, pas de rendus 3D.
Palette
Marque
- Glossier Yellow
#fff116— Le jaune est utilisé comme couleur d'accent secondaire pour les détails décoratifs et pour mettre en évidence les requêtes de recherche moins fréquentes. Il ne doit pas être utilisé comme couleur principale pour un appel à l'action.
Neutre
- Ink
#000000— Texte principal, liens de navigation, texte principal, texte du pied de page, contours des icônes, bordures fines; couleur typographique et structurelle dominante. - Paper
#ffffff— Surfaces des fiches produits, zones de remplissage, panneaux en relief; la surface la plus brillante de la pile. - Fog
#f7f7f7— Canevas de la page, arrière-plans des sections, transitions entre les images de la page; la surface de base sur laquelle repose l’ensemble du site web. - Blush
#faf2f4— Fond de page, séparateurs de section aux tons doux et chauds; une subtile teinte blanc rosé ajoute de la chaleur au bas des pages. - Mist
#f0f0f0— Une surface claire servant de fond discret et à séparer les sections. Elle ne doit pas être utilisée comme couleur principale pour l'appel à l'action. - Ash
#e8e8e8— Bordures des champs de saisie, arrière-plans des icônes, fines lignes de séparation; couleur de bordure structurelle pour les cartes et les éléments de formulaire.
Typographie
de 12 à 32 px · 5 étapes
- Apercu — remplacement: Inter · grandes lignes 400, 500, 700 · La police principale est utilisée dans toute l'interface utilisateur: texte courant en 16 px/400, navigation et légendes en 12-14 px/500, sous-titres en 20 px/500 et titres d'articles en 32 px/700. Le design géométrique et humaniste d'Apercu confère à la marque un style moderne et épuré; l'espacement quasi nul entre les lettres (0,002-0,003 em) rend la police compacte et lui donne un aspect professionnel, plutôt qu'aéré ou convivial. Le gras 700 est réservé aux éléments d'affichage des articles, et non aux éléments d'interface.
- Apercu Mono — remplacement: JetBrains Mono or IBM Plex Mono · grandes lignes 400 · Typographie micro-utilitaire pour les métadonnées de commande, les numéros de suivi et les étiquettes à côté du code; la version à chasse fixe crée une texture technique sur un corps de texte proportionnel.
- GTStandard-M — remplacement: Inter · grandes lignes 400 · GTStandard-M - Présent dans les données extraites mais non décrit par l'IA.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 8px |
| Rayon du bouton | 0px |
| Rayon de la carte | 0px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 64px |
| Largeur de la page | 1440px |
L'IA construira votre site web dans le style Glossier et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Lightship — Un diorama cinématographique de la route. Des murs de galerie couleur crème chaude, ornés de grandes photographies de paysages montées à intervalles rapprochés, de fines lettres noires à peine visibles sur les cadres, et une unique touche d'orange vif qui rompt le monochrome comme un feu de joie dans une prairie.
- Faire ES — Catalogue en gros de crème chaude
- Adanola — Un lookbook éditorial sur papier blanc. Un shooting de mode où la typographie et la photographie s'épanouissent sur des surfaces blanches immaculées, avec une encre noire pour la police de caractères et une police sans empattement discrète (Favorit), signature de la marque, reflétant son style global.
- Oura Ring — Un atelier de fabrication de gruau chaleureux, baigné d'une douce lumière du jour
- Stykka — Un atelier scandinave baigné de lumière blanche – un showroom intimiste et artisanal où seule la photographie se fait entendre.
- DJI — Toile noire aérospatiale avec une seule touche de bleu électrique
- Altitude Beverages — Double page monochrome d'un magazine. Imaginez une double page de magazine de mode dépourvue de toute couleur, à l'exception des photos fixes: le texte et l'espace blanc racontent toute l'histoire.
- AATHER — Une paume ouverte, une flamme unique – un luxe discret contenu dans le silence
- Cowboy — Une galerie de vélos belge dans un décor de porcelaine d'un blanc immaculé. Un showroom où les surfaces mates, les grandes polices de caractères utilisées dans les supports de communication et une quasi-absence de décoration attirent le regard sur le vélo et son contenu.
- Refero — Mise en page éditoriale sur fond de marbre blanc – une page produit créée par un typographe, où le titre à empattements est la carte de visite de la marque, et où tout le reste est discret.
- Face Formula — Un portrait éditorial scandinave. Une double page apaisante, façon magazine, où le regard du mannequin et le titre, écrit dans une police à empattements condensée, se suffisent à eux-mêmes sur un fond frais et brumeux.
- Shupatto — Vitrine de musée en marbre blanc