Glossier
Napsütéses fotózás - fehér papír, fekete tinta, egy élénk sárga díszítés
A Glossier egy digitális szépségmagazinhoz hasonlóan működik: egy szinte monokróm fehér és fekete vászon, amelyet egyetlen, élénk sárga akcentus tarkít, amely egyben a márka logója és egyetlen cselekvésre ösztönzése is. A rendszer szerkesztőileg visszafogott – túlméretezett Apercu címsorok, bőséges szövegterület, teljes oldalas életmódfotók, amelyek az érzelmi súly nagy részét hordozzák –, és a kivitelezésben is haszonelvű: lapos termékkártyák, vékony szegélyek és a díszítés teljes hiánya. A sárga nem másodlagos márkaszín; ez maga a márka, amelyet takarékosan használnak, így minden megjelenése olyan, mint egy vaku. Minden másnak a háttérbe kell olvadnia: a semleges színek meleg szürkék, finom píros alaphanggal, a szegélyek finomak, a betűtípus pedig sűrű és tömör. Az eredmény egy magabiztos, visszafogott és kompromisszumok nélküli modern kirakat.
Az oldal függőlegesen elrendezett, teljes képernyős szakaszokból áll, amelyek mindegyike önálló szerkesztői oldalpárként van kialakítva. A fő rész egy teljes szélességű fotó lebegő fehér fedvénnyel (bal felső sarokban) és egy hatalmas sárga logóval, amely az oldal teljes alját elfoglalja. A fő rész alatt a szakaszok váltakoznak a teljes képernyős képek és az egyes kártyák rácsai között. A kategóriák (bőrápolás/smink) két oszlopra osztásával, egyenlő képarányban (50/50) történik, látható szegély nélkül – csak a képeket összekötő vonal választja el őket. A termékkatalógus négy oszlopos, négyzet alakú kártyákból álló rácsot használ egy #f7f7f7 méretű vásznon. A navigáció egy minimalista felső sáv, felette egy másodlagos hirdetési csíkkal. A szakaszok közötti rések meglehetősen nagyok (64 képpont), de a szakaszok közötti átmenetek simaak – elválasztók vagy váltakozó háttérszínek nélkül, kivéve a meleg láblécet. Az általános ritmus: fénykép, szöveg, fénykép, rács, fénykép – mintha egy divatmagazint lapoznánk.
A fényképészet a domináns vizuális nyelv. A teljes nézőfelületet életstílus-fotók és portrék töltik ki – meleg, aranyló fények, lágy közeli felvételek bőrről, termékes üvegeket tartó kezek vakító napfény hátterében. A fényképek színpalettája meleg és telítetlen: barackszínű ég, terrakotta bőrtónusok, mély óceánkék. A képek mindig a teljes oldalfelületet elfoglalják, lekerekített sarkok, keretek vagy rátétek nélkül, kivéve a fehér szöveges kártyákat vagy a sárga logót. A katalóguskártyákon található termékfotók tiszta fehér, zökkenőmentes háttér előtt, lapos, egyenletes megvilágítással készülnek. A kép-szöveg arány körülbelül 70/30 – a képek érzelmeket, a szöveget a funkciót közvetítik. Nincsenek illusztrációk, nincsenek absztrakt grafikák, nincsenek 3D-s látványtervek.
Paletta
Márka
- Glossier Yellow
#fff116— A sárga másodlagos hangsúlyként szolgál a díszítő részleteknél és a ritkábban használt keresési lekérdezések kiemelésére. Nem szabad elsődleges színként használni cselekvésre ösztönzés esetén.
Semleges
- Ink
#000000— Törzsszöveg, navigációs linkek, elsődleges szöveg, láblécszöveg, ikonkörvonalak, vékony szegélyek; domináns tipográfiai és szerkezeti szín. - Paper
#ffffff— Termékkártya-felületek, kitöltési területek, kiemelt panelek; a halom legfényesebb felületi szintje. - Fog
#f7f7f7— Oldalvászon, szakaszhátterek, képek közötti átmenetek az oldalon; az alapfelület, amelyen a teljes weboldal található. - Blush
#faf2f4— Lábléc háttere, lágy, meleg színű elválasztók; a finom rózsaszínes-fehér árnyalat melegséget kölcsönöz az oldalak aljának. - Mist
#f0f0f0— Világos tartófelület egy diszkrét háttér létrehozásához és a részek elválasztásához. Nem szabad a cselekvésre ösztönzés elsődleges színeként használni. - Ash
#e8e8e8— Beviteli mező szegélyek, ikon hátterek, vékony elválasztó vonalak; kártyák és űrlapelemek strukturális szegélyszíne.
Tipográfia
12-ről 32 képpontra · 5 lépésben
- Apercu — csere: Inter · körvonalak 400, 500, 700 · Az elsődleges betűtípust a teljes felhasználói felületen használják – a törzsszöveg 16px/400, a navigáció és a feliratok 12–14px/500, az alcímek 20px/500, a szerkesztőségi címsorok pedig 32px/700 méretben. Az Apercu geometrikus, humanista dizájnja tömör, modern stílust kölcsönöz a márkának; a közel nulla betűköz (0,002–0,003em) a betűtípust kompakttá és magazinszerűvé teszi, ahelyett, hogy légiessé vagy barátságossá tenné. A 700-as vastagság a szerkesztőségi cikkek megjelenítési elemeinek van fenntartva, nem pedig a felhasználói felület elemeinek.
- Apercu Mono — csere: JetBrains Mono or IBM Plex Mono · körvonalak 400 · Mikro-utilitarista tipográfia a rendelési metaadatokhoz, a követési számokhoz és a kód melletti címkékhez; az egysoros verzió egy technikai textúrát hoz létre egy arányos testtípussal.
- GTStandard-M — csere: Inter · körvonalak 400 · GTStandard-M – Megtalálható a kinyert adatokban, de a mesterséges intelligencia nem írja le.
Intervallumok és forma
| Cél | Jelentés |
|---|---|
| Sűrűség | átlagos |
| Alapvető lépés | 8px |
| Gomb sugara | 0px |
| Kártya sugara | 0px |
| Árnyékok | nincs - szegélyek árnyékok helyett |
| Szakaszok között | 64px |
| Oldal szélessége | 1440px |
A mesterséges intelligencia Glossier stílusban fogja elkészíteni a weboldaladat, és kitölti azt.
- Töltsd fel termékeidet és posztjaidat a linkeken keresztül - Instagram, TikTok, Facebook.
- Tartalom átvitele régi webhelyéről – csak adja meg a címet.
- Modern dizájn a legjobb keresőmotoron: React ( Next.js) szerveralapú rendereléssel és SEO optimalizálással, azonnal használható formában.
- Teljesen automatizált SEO optimalizálás a keresési eredményekhez és a neurális hálózati ajánlásokhoz.
Hasonló stílusok
- Lightship — Filmszerű dioráma a nyílt útról. Meleg krémszínű galériafalakat díszítettek a sűrűn elhelyezett nagyméretű tájképek, a képkockákon alig látható vékony fekete betűtípus, és egyetlen élénk narancssárga díszítés törte meg a monokróm képet, mint egy máglya a réten.
- Faire ES — meleg krém nagykereskedelmi katalógus
- Adanola — Egy fehér papíron készült editoriális lookbook. Egy divatfotózás, ahol a tipográfia és a fényképezés tiszta fehér felületeken lélegzik, fekete tintával a betűtípushoz és egy visszafogott, jellegzetes sans-serif betűtípushoz (Favorit), amely tükrözi a márka általános stílusát.
- Oura Ring — Egy hangulatos zabkásakészítő műhely, lágy napfényben fürödve
- Stykka — Egy skandináv műhely fehér fényben – egy csendes, kézműves bemutatóterem, ahol az egyetlen hang a fotózás.
- DJI — repülőgép fekete vászon egyetlen elektromos kék kiemeléssel
- Altitude Beverages — Fekete-fehér magazinoldal. Képzelj el egy divatmagazin-oldalt, amelyről az állóképek kivételével minden szín el van távolítva – a szöveg és az üres terület elmeséli az egész történetet.
- AATHER — Egy nyitott tenyér, egyetlen láng – csendes luxus a csendben
- Cowboy — Egy belga kerékpárgaléria hófehér porcelán környezetben. Egy bemutatóterem, ahol matt felületek, a kiadványokban használt nagyméretű betűtípusok és a dekoráció gyakorlatilag hiánya vonzza a tekintetet a kerékpárra és annak tartalmára.
- Refero — Fehér márványon készült szerkesztői elrendezés - tipográfus által készített termékoldal, ahol a talpas címsor a márka névjegykártyája, és minden más diszkrét.
- Face Formula — Skandináv szerkesztőségi portré. Nyugodt, magazin stílusú kép, ahol a modell tekintete és a tömörített talpas betűtípussal írt főcím magáért beszél egy hűvös, ködös háttér előtt.
- Shupatto — Múzeumi vitrin fehér márványon