Glossier
Fotoshoot in de zon - wit papier, zwarte inkt, één felgele accentkleur
Glossier functioneert als een digitaal beautymagazine: een bijna monochroom canvas van wit en zwart, onderbroken door een enkel, levendig geel accent dat tevens dienstdoet als logo en enige call-to-action van het merk. Het systeem is redactioneel ingetogen – uitvergrote Apercu-koppen, ruime tekstruimte, paginagrote lifestylefoto's die de meeste emotionele impact hebben – en functioneel in de uitvoering: platte productkaarten, dunne randen en een volledig gebrek aan versieringen. Geel is geen secundaire merkkleur; het IS het merk, spaarzaam gebruikt, waardoor elke verschijning aanvoelt als een flits van een camera. Al het andere is bedoeld om naar de achtergrond te verdwijnen: neutrale tinten zijn warme grijstinten met een subtiele roze ondertoon, randen zijn subtiel en de typografie is compact en dicht op elkaar. Het resultaat is een webwinkel die zelfverzekerd, ingetogen en compromisloos modern aanvoelt.
De pagina bestaat uit een verticaal geordende reeks schermvullende secties, elk ontworpen als een op zichzelf staande redactionele spread. De hoofdsectie is een foto over de volledige breedte met een zwevende witte overlay (linksboven) en een enorm geel logo dat de hele onderkant van de pagina beslaat. Onder de hoofdsectie wisselen secties af tussen schermvullende afbeeldingen en rasters met individuele kaarten. De indeling van categorieën (huidverzorging/make-up) in twee kolommen met een gelijke verhouding afbeeldingen (50/50) vindt plaats zonder zichtbare rand – alleen een lijn die de afbeeldingen verbindt, scheidt ze. De productcatalogus gebruikt een raster van vier kolommen met vierkante kaarten op een #f7f7f7 canvas. De navigatie bestaat uit een minimalistische bovenste balk met daarboven een secundaire advertentiestrook. De ruimte tussen de secties is vrij groot (64px), maar de overgangen tussen de secties zijn vloeiend – zonder scheidingslijnen of afwisselende achtergrondkleuren, behalve de warme voettekst. Het algehele ritme is: foto, tekst, foto, raster, foto – alsof je door een modetijdschrift bladert.
Fotografie is de dominante beeldtaal. Het hele scherm is gevuld met lifestylefoto's en portretten – warm gouden-uurlicht, zachte close-ups van de huid, handen die productflesjes vasthouden tegen een achtergrond van zonlicht. Het kleurenpalet in de foto's is warm en gedempte kleuren: perzikkleurige luchten, terracotta huidtinten, diep oceaanblauw. Afbeeldingen vullen altijd de volledige pagina, zonder afgeronde hoeken, kaders of overlays, met uitzondering van witte tekstkaarten of het gele logo. Productfoto's op cataloguskaarten zijn gemaakt tegen een puur witte, naadloze achtergrond met vlakke, gelijkmatige belichting. De verhouding tussen beeld en tekst is ongeveer 70/30 – de afbeeldingen brengen emotie over, de tekst de functie. Geen illustraties, geen abstracte afbeeldingen, geen 3D-renderings.
Palet
Merk
- Glossier Yellow
#fff116— Geel wordt gebruikt als secundair accent voor decoratieve details en om minder vaak gebruikte zoektermen te benadrukken. Het mag niet als primaire kleur voor een call-to-action worden gebruikt.
Neutrale
- Ink
#000000— Hoofdtekst, navigatielinks, primaire tekst, voettekst, pictogramcontouren, dunne randen; dominante typografische en structurele kleur. - Paper
#ffffff— Oppervlakken van productkaarten, vulvlakken, reliëfpanelen; het helderste oppervlak in de stapel. - Fog
#f7f7f7— Het paginacanvas, de achtergronden van de secties, de overgangen tussen afbeeldingen op de pagina; het basisoppervlak waarop de gehele website is gebouwd. - Blush
#faf2f4— Achtergrond van de voettekst, zachte, warme sectiescheidingstekens; een subtiele roze-witte tint voegt warmte toe aan de onderkant van de pagina's. - Mist
#f0f0f0— Een lichte, ondersteunende ondergrond voor het creëren van een onopvallende achtergrond en het scheiden van secties. Deze kleur mag niet als hoofdkleur voor de call-to-action worden gebruikt. - Ash
#e8e8e8— Randen van invoervelden, achtergronden van pictogrammen, dunne scheidingslijnen; structurele randkleur voor kaarten en formulierelementen.
Typografie
van 12 tot 32px · 5 stappen
- Apercu — vervanging: Inter · overzichten 400, 500, 700 · Het primaire lettertype wordt in de gehele gebruikersinterface gebruikt: hoofdtekst op 16px/400, navigatie en bijschriften op 12–14px/500, subkoppen op 20px/500 en redactionele koppen op 32px/700. Het geometrische, humanistische ontwerp van Apercu geeft het merk een compacte, moderne stijl; de bijna nul letterafstand (0,002–0,003em) maakt het lettertype compact en tijdschriftachtig, in plaats van luchtig of vriendelijk. De letterdikte 700 is gereserveerd voor weergave-elementen in redactionele artikelen, niet voor UI-elementen.
- Apercu Mono — vervanging: JetBrains Mono or IBM Plex Mono · overzichten 400 · Micro-utilitaire typografie voor ordergegevens, volgnummers en labels naast de code; de monospace-versie creëert een technische textuur tegen een proportioneel lettertype.
- GTStandard-M — vervanging: Inter · overzichten 400 · GTStandard-M - Gevonden in de geëxtraheerde gegevens, maar niet beschreven door de AI.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gemiddeld |
| Basisstap | 8px |
| Knopradius | 0px |
| Kaartradius | 0px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 64px |
| Paginabreedte | 1440px |
AI bouwt je website in de stijl Glossier en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- Lightship — Een filmisch diorama van de open weg. Warme crèmekleurige galeriewanden versierd met grote landschapsfoto's die dicht op elkaar zijn gemonteerd, dunne zwarte letters die nauwelijks zichtbaar zijn op de lijsten, en een enkel feloranje accent dat het monochrome doorbreekt als een vreugdevuur in een weiland.
- Faire ES — Groothandelscatalogus van warme room
- Adanola — Een redactioneel lookbook op wit papier. Een modeshoot waarin typografie en fotografie samenkomen op een strak wit oppervlak, met zwarte inkt voor het lettertype en een subtiel, kenmerkend schreefloos lettertype (Favorit), dat de algehele stijl van het merk weerspiegelt.
- Oura Ring — Een knusse workshop havermout maken, badend in zacht daglicht.
- Stykka — Een Scandinavisch atelier in wit licht – een rustige, ambachtelijke showroom waar fotografie het enige geluid is.
- DJI — Luchtvaartzwart canvas met een enkele elektrisch blauwe accentkleur.
- Altitude Beverages — Zwart-wit magazinepagina. Stel je een pagina uit een modetijdschrift voor, ontdaan van alle kleur behalve de foto's – de tekst en de witruimte vertellen het hele verhaal.
- AATHER — Een open handpalm, een enkele vlam - een serene luxe, vervat in de stilte.
- Cowboy — Een Belgische fietsengalerij in een sneeuwwitte porseleinen omgeving. Een showroom waar matte oppervlakken, grote lettertypen die ook in redactioneel materiaal worden gebruikt en een vrijwel afwezige decoratie de aandacht vestigen op de fiets en zijn inhoud.
- Refero — Redactionele lay-out op wit marmer - een productpagina ontworpen door een typograaf, waarbij de koptekst met schreefletters het visitekaartje van het merk is en al het andere onopvallend is.
- Face Formula — Een Scandinavisch redactioneel portret. Een rustige, tijdschriftachtige spread, waarin de blik van het model en de kop, geschreven in een smal schreeflettertype, voor zich spreken tegen een koele, mistige achtergrond.
- Shupatto — Museumvitrine op wit marmer