Glossier
Ședință foto cu soare - hârtie albă, cerneală neagră, un accent galben strălucitor
Glossier funcționează ca o revistă digitală de frumusețe: o pânză aproape monocromă, în alb și negru, punctată de un singur accent galben vibrant, care servește și ca logo al mărcii și ca unic îndemn la acțiune. Sistemul este restrâns din punct de vedere editorial - titluri Apercu supradimensionate, spațiu amplu pentru text, fotografii lifestyle pe o pagină întreagă, care poartă cea mai mare parte a greutății emoționale - și utilitar în execuție: carduri de produs plate, chenar subțiri și o lipsă completă de înfrumusețare. Galbenul nu este o culoare secundară a mărcii; ESTE marca, folosită cu moderație, astfel încât fiecare apariție să se simtă ca un bliț de cameră. Orice altceva este menit să se estompeze în fundal: neutrele sunt griuri calde cu o subtilă nuanță de roșeață, chenarele sunt subtile, iar fontul este dens și condensat. Rezultatul este o vitrină care se simte încrezătoare, discretă și modernă fără compromisuri.
Pagina prezintă o serie de secțiuni pe ecran complet, aranjate vertical, fiecare concepută ca o pagină editorială independentă. Secțiunea principală este o fotografie pe lățime completă, cu o suprapunere albă plutitoare (stânga sus) și un logo galben masiv care ocupă întreaga parte inferioară a paginii. Sub secțiunea principală, secțiunile alternează între imagini pe ecran complet și grile de fișe individuale. Împărțirea categoriilor (îngrijire a pielii/machiaj) în două coloane cu un raport egal de imagini (50/50) are loc fără o margine vizibilă - doar o linie care leagă imaginile le separă. Catalogul de produse folosește o grilă cu patru coloane de fișe pătrate pe o pânză #f7f7f7. Navigarea este o bară superioară minimalistă, cu o bandă publicitară secundară deasupra acesteia. Spațiile dintre secțiuni sunt destul de mari (64px), dar tranzițiile dintre secțiuni sunt line - fără separatoare sau culori de fundal alternante, cu excepția subsolului cald. Ritmul general este: fotografie, text, fotografie, grilă, fotografie - ca și cum ai răsfoi o revistă de modă.
Fotografia este limbajul vizual dominant. Întreaga zonă de vizualizare este plină de imagini și portrete specifice stilului de viață - iluminare caldă aurie, prim-planuri estompate ale pielii, mâini care țin sticle de produse pe un fundal de strălucire solară. Paleta de culori din fotografii este caldă și desaturată: cer piersică, tonuri de piele teracotă, albastru oceanic intens. Imaginile ocupă întotdeauna întreaga suprafață a paginii, fără colțuri rotunjite, rame sau suprapuneri, cu excepția cartonașelor cu text albe sau a logo-ului galben. Fotografiile de produse de pe cartonașele din catalog sunt realizate pe un fundal alb pur, fără sudură, cu iluminare uniformă și plată. Raportul imagine-text este de aproximativ 70/30 - imaginile transmit emoție, textul, funcția. Fără ilustrații, fără grafică abstractă, fără randări 3D.
Paletă
Marca
- Glossier Yellow
#fff116— Galbenul este folosit ca accent secundar pentru detalii decorative și pentru a evidenția căutările mai puțin utilizate. Nu ar trebui folosit ca și culoare principală pentru un îndemn la acțiune.
Neutru
- Ink
#000000— Corpul textului, linkuri de navigare, textul principal, textul subsolului, contururile pictogramelor, chenarele subțiri; culoare tipografică și structurală dominantă. - Paper
#ffffff— Suprafețele cardurilor de produs, zonele de umplere, panourile în relief; cel mai luminos nivel de suprafață din stivă. - Fog
#f7f7f7— Pânza paginii, fundalurile secțiunilor, tranzițiile dintre imaginile de pe pagină; suprafața de bază pe care se află întregul site web. - Blush
#faf2f4— Fundal de subsol, separatoare de secțiuni calde și delicate; o nuanță subtilă alb-rozalie adaugă căldură în partea de jos a paginilor. - Mist
#f0f0f0— O suprafață de susținere ușoară pentru crearea unui fundal discret și separarea secțiunilor. Nu ar trebui folosită ca și culoare principală pentru îndemnul la acțiune. - Ash
#e8e8e8— Borduri pentru câmpurile de introducere, fundaluri pentru pictograme, linii de separare subțiri; culoare bordură structurală pentru carduri și elemente de formular.
Tipografie
de la 12 la 32px · 5 pași
- Apercu — înlocuire: Inter · contururi 400, 500, 700 · Fontul principal este utilizat în întreaga interfață cu utilizatorul - corpul textului la 16px/400, navigarea și legendele la 12–14px/500, subtitlurile la 20px/500 și titlurile editoriale la 32px/700. Designul geometric și umanist al Apercu conferă mărcii un stil condensat și modern; spațierea aproape zero a literelor (0,002–0,003em) face ca fontul să fie compact și asemănător cu cel al revistelor, mai degrabă decât aerisit sau prietenos. Greutatea de 700 este rezervată elementelor de afișare din editoriale, nu elementelor interfeței utilizator.
- Apercu Mono — înlocuire: JetBrains Mono or IBM Plex Mono · contururi 400 · Tipografie micro-utilitaristă pentru metadatele comenzii, numerele de urmărire și etichetele de lângă cod; versiunea monospațiată creează o textură tehnică pe fondul unui tip de corp proporțional.
- GTStandard-M — înlocuire: Inter · contururi 400 · GTStandard-M - Se regăsește în datele extrase, dar nu este descris de IA.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | medie |
| Pasul de bază | 8px |
| Raza butonului | 0px |
| Raza cardului | 0px |
| Umbre | fără - margini în loc de umbre |
| Între secțiuni | 64px |
| Lățimea paginii | 1440px |
Inteligența artificială vă va construi site-ul web în stilul Glossier și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- Lightship — O dioramă cinematografică a drumului deschis. Pereți de galerie de culoare crem cald, împodobiți cu fotografii mari de peisaj montate la intervale mici, fonturi negre subțiri abia vizibile pe rame și un singur accent portocaliu aprins care sparge monocromul ca un foc de tabără într-o pajiște.
- Faire ES — catalog en-gros de cremă caldă
- Adanola — Un lookbook editorial pe hârtie albă. O ședință foto de modă în care tipografia și fotografia respiră pe suprafețe albe și curate, cu cerneală neagră pentru font și un font sans-serif subtil și caracteristic (Favorit), reflectând stilul general al brandului.
- Oura Ring — Un atelier de preparare a fulgilor de ovăz confortabil, scăldat în lumina blândă a zilei
- Stykka — Un atelier scandinav în lumină albă – un showroom liniștit, lucrat manual, unde singura voce este fotografia
- DJI — pânză neagră aerospațială cu o singură evidențiere albastru electric
- Altitude Beverages — Pagina monocromă a unei reviste de modă. Imaginați-vă o pagină monocromă a unei reviste de modă, lipsită de orice culoare, cu excepția fotografiilor statice - textul și spațiul alb spun întreaga poveste.
- AATHER — O palmă deschisă, o singură flacără - un lux liniștit conținut în liniște
- Cowboy — O galerie belgiană de biciclete într-un decor de porțelan alb ca zăpada. Un showroom unde suprafețele mate, fonturile mari folosite în materialele editoriale și absența virtuală a decorului atrag atenția asupra bicicletei și a conținutului acesteia.
- Refero — Machetă editorială pe marmură albă - o pagină de produs creată de un tipograf, unde titlul cu serif este cartea de vizită a mărcii, iar totul este discret
- Face Formula — Un portret editorial scandinav. O prezentare calmă, în stil de revistă, în care privirea modelului și titlul, scrise cu un font serif condensat, vorbesc de la sine pe un fundal rece și cețos.
- Shupatto — Vitrină muzeală din marmură albă