Glossier
Sesión de fotos con sol: papel branco, tinta negra, un detalle amarelo brillante
Glossier funciona como unha revista de beleza dixital: unha tea case monocromática de branco e negro, salpicada por un único e vibrante acento amarelo que tamén serve como logotipo da marca e única chamada á acción. O sistema é editorialmente contido (titulares Apercu extragrandes, amplo espazo para o texto, fotografía de estilo de vida a páxina completa que leva a maior parte do peso emocional) e utilitario na súa execución: tarxetas de produto planas, bordos finos e unha completa ausencia de adornos. O amarelo non é unha cor secundaria da marca; É a marca, usada con moderación, de xeito que cada aparición parece o flash dunha cámara. Todo o demais está pensado para desaparecer no fondo: os neutros son grises cálidos cun sutil matiz ruborizado, os bordos son sutís e a tipografía é densa e condensada. O resultado é un escaparate que se sente seguro, discreto e sen concesións moderno.
A páxina presenta unha serie de seccións a pantalla completa dispostas verticalmente, cada unha deseñada como unha extensión editorial independente. A sección principal é unha foto de ancho completo cunha superposición branca flotante (arriba á esquerda) e un logotipo amarelo enorme que ocupa toda a parte inferior da páxina. Debaixo da sección principal, as seccións alternan entre imaxes a pantalla completa e cuadrículas de tarxetas individuais. A división de categorías (coidado da pel/maquillaxe) en dúas columnas cunha proporción igual de imaxes (50/50) prodúcese sen un bordo visible; só unha liña que conecta as imaxes as separa. O catálogo de produtos usa unha cuadrícula de catro columnas de tarxetas cadradas nun lenzo #f7f7f7. A navegación é unha barra superior minimalista cunha tira publicitaria secundaria enriba. Os espazos entre as seccións son bastante grandes (64 px), pero as transicións entre as seccións son suaves, sen divisores nin cores de fondo alternas, agás o pé de páxina cálido. O ritmo xeral é: fotografía, texto, fotografía, cuadrícula, fotografía, como follear unha revista de moda.
A fotografía é a linguaxe visual dominante. Toda a área de visualización está chea de imaxes e retratos de estilo de vida: iluminación cálida da hora dourada, primeiros planos suaves da pel, mans sostendo botellas de produtos contra un fondo de resplandor solar. A paleta de cores das fotografías é cálida e desaturada: ceos cor pexego, tons de pel terracota, azuis oceánicos profundos. As imaxes sempre ocupan toda a superficie da páxina, sen esquinas redondeadas, marcos nin superposicións, coa excepción das tarxetas de texto brancas ou o logotipo amarelo. As fotos de produtos nas tarxetas do catálogo están tomadas sobre un fondo branco puro sen costuras cunha iluminación plana e uniforme. A proporción imaxe-texto é de aproximadamente 70/30: as imaxes transmiten emoción, o texto, función. Sen ilustracións, sen gráficos abstractos, sen representacións en 3D.
Paleta
Marca
- Glossier Yellow
#fff116— O amarelo úsase como acento secundario para detalles decorativos e para destacar consultas de busca menos utilizadas. Non se debe usar como cor principal para unha chamada á acción.
Neutro
- Ink
#000000— Corpo de texto, ligazóns de navegación, texto principal, texto do pé de páxina, contornos das iconas, bordos finos; cor tipográfica e estrutural dominante. - Paper
#ffffff— Superficies da tarxeta de produto, áreas de recheo, paneis elevados; o nivel de superficie máis brillante da pila. - Fog
#f7f7f7— Lenzo da páxina, fondos de sección, transicións entre imaxes da páxina; a superficie base sobre a que se atopa todo o sitio web. - Blush
#faf2f4— Fondo do pé de páxina, divisores de sección suaves e cálidos; un sutil ton branco rosado engade calidez á parte inferior das páxinas. - Mist
#f0f0f0— Unha superficie de apoio lixeira para crear un fondo discreto e separar seccións. Non se debe usar como cor principal para a chamada á acción. - Ash
#e8e8e8— Bordes dos campos de entrada, fondos de iconas, liñas separadoras finas; cor do bordo estrutural para tarxetas e elementos de formulario.
Tipografía
de 12 a 32 px · 5 pasos
- Apercu — substitución: Inter · contornos 400, 500, 700 · O tipo de letra principal úsase en toda a interface de usuario: corpo do texto a 16px/400, navegación e subtítulos a 12–14px/500, subtítulos a 20px/500 e titulares editoriais a 32px/700. O deseño xeométrico e humanista de Apercu dálle á marca un estilo condensado e moderno; o espazado entre letras case nulo (0,002–0,003em) fai que o tipo de letra sexa compacto e semellante ao dunha revista, en lugar de lixeiro ou amigable. O peso de 700 está reservado para elementos de visualización en editoriais, non para elementos da interface de usuario.
- Apercu Mono — substitución: JetBrains Mono or IBM Plex Mono · contornos 400 · Tipografía microutilitaria para os metadatos dos pedidos, os números de seguimento e as etiquetas xunto ao código; a versión monoespaciada crea unha textura técnica contra un tipo de corpo proporcional.
- GTStandard-M — substitución: Inter · contornos 400 · GTStandard-M: atópase nos datos extraídos pero non se describe pola IA.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 8px |
| Radio do botón | 0px |
| Radio da tarxeta | 0px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 64px |
| Largura da páxina | 1440px |
A IA creará o teu sitio web ao estilo de Glossier e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- Lightship — Un diorama cinematográfico da estrada aberta. Paredes de galería de cor crema cálida adornadas con grandes fotografías de paisaxes montadas a intervalos curtos, letras negras finas apenas visibles nos marcos e un único detalle laranxa brillante que rompe a monocromía coma unha fogueira nun prado.
- Faire ES — catálogo por xunto de crema morna
- Adanola — Un lookbook editorial en papel branco. Unha sesión de fotos de moda onde a tipografía e a fotografía respiran sobre superficies brancas limpas, con tinta negra para o tipo de letra e unha sutil fonte sans-serif característica (Favorit), reflectindo o estilo xeral da marca.
- Oura Ring — Un acolledor obradoiro de elaboración de avea, bañado pola suave luz do día
- Stykka — Un obradoiro escandinavo con luz branca: unha sala de exposicións tranquila e artesanal onde a única voz é a fotografía.
- DJI — lona negra aeroespacial cun único toque azul eléctrico
- Altitude Beverages — Páxina de revista monocromática. Imaxina unha páxina de revista de moda sen cor agás as fotos fixas: o texto e o espazo en branco contan toda a historia.
- AATHER — Unha palma aberta, unha soa chama: un luxo tranquilo contido na quietude
- Cowboy — Unha galería de bicicletas belgas nun escenario de porcelana branca como a neve. Unha sala de exposicións onde as superficies mate, as grandes fontes empregadas nos materiais editoriais e a ausencia virtual de decoración atraen a atención cara á bicicleta e o seu contido.
- Refero — Maquetación editorial sobre mármore branco: unha páxina de produto creada por un tipógrafo, onde o título con serifas é a tarxeta de presentación da marca e todo o demais é discreto
- Face Formula — Un retrato editorial escandinavo. Unha publicación tranquila, ao estilo dunha revista, onde a mirada da modelo e o titular, escritos nunha fonte serif condensada, falan por si mesmos sobre un fondo frío e brumoso.
- Shupatto — Vitrina de museo en mármore branco