Glossier
Güneşli fotoğraf çekimi - beyaz kağıt, siyah mürekkep, bir parlak sarı vurgu
Glossier, dijital bir güzellik dergisi gibi işlev görüyor: neredeyse tek renkli, beyaz ve siyah bir tuval, markanın logosu ve tek eylem çağrısı görevi gören canlı bir sarı vurguyla noktalanıyor. Sistem, editoryal olarak ölçülü – büyük boyutlu Apercu başlıkları, geniş metin alanı, duygusal ağırlığın büyük kısmını taşıyan tam sayfa yaşam tarzı fotoğrafları – ve uygulamada işlevsel: düz ürün kartları, ince çerçeveler ve tamamen süsleme eksikliği. Sarı, ikincil bir marka rengi değil; markanın ta kendisi, az miktarda kullanılıyor, böylece her görünüm bir kamera flaşı gibi hissettiriyor. Diğer her şey arka plana karışmak üzere tasarlanmış: nötr renkler, hafif bir pembe alt tonuna sahip sıcak griler, çerçeveler ince ve yazı tipi yoğun ve sıkıştırılmış. Sonuç, kendinden emin, sade ve tavizsiz bir şekilde modern hissettiren bir vitrin.
Sayfa, her biri bağımsız bir editoryal sayfa olarak tasarlanmış, dikey olarak düzenlenmiş bir dizi tam ekran bölümden oluşmaktadır. Ana bölüm, üst sol köşede yüzen beyaz bir kaplama ve sayfanın alt kısmının tamamını kaplayan devasa sarı bir logo ile tam genişlikte bir fotoğraftan oluşmaktadır. Ana bölümün altında, bölümler tam ekran görüntüler ve tek tek kartlardan oluşan ızgaralar arasında dönüşümlü olarak yer almaktadır. Kategorilerin (cilt bakımı/makyaj) eşit oranda görüntüyle (50/50) iki sütuna bölünmesi, görünür bir sınır olmaksızın gerçekleşir; yalnızca görüntüleri birbirine bağlayan bir çizgi onları ayırır. Ürün kataloğu, #f7f7f7 tuvalinde kare kartlardan oluşan dört sütunlu bir ızgara kullanır. Navigasyon, üstünde ikincil bir reklam şeridi bulunan minimalist bir üst çubuktur. Bölümler arasındaki boşluklar oldukça geniştir (64 piksel), ancak bölümler arasındaki geçişler, sıcak altbilgi hariç, ayırıcılar veya alternatif arka plan renkleri olmadan pürüzsüzdür. Genel ritim: fotoğraf, metin, fotoğraf, ızgara, fotoğraf – tıpkı bir moda dergisini karıştırıyormuş gibi.
Fotoğrafçılık, baskın görsel dildir. Tüm görüntüleme alanı, sıcak altın saat ışığı, cildin yumuşak yakın çekimleri, güneş parıltısı fonunda ürün şişeleri tutan eller gibi yaşam tarzı görüntüleri ve portrelerle doludur. Fotoğraflardaki renk paleti sıcak ve doygunluğu azaltılmış tonlardadır: şeftali rengi gökyüzü, toprak rengi ten tonları, derin okyanus mavileri. Görüntüler, beyaz metin kartları veya sarı logo hariç, yuvarlak köşeler, çerçeveler veya bindirmeler olmadan her zaman sayfanın tüm yüzeyini kaplar. Katalog kartlarındaki ürün fotoğrafları, düz ve eşit aydınlatma ile saf beyaz, dikişsiz bir arka plana karşı çekilmiştir. Görüntü-metin oranı yaklaşık 70/30'dur; görüntüler duyguyu, metin ise işlevi iletir. İllüstrasyon, soyut grafik veya 3D render kullanılmamıştır.
Palet
Marka
- Glossier Yellow
#fff116— Sarı, dekoratif detaylar için ikincil bir vurgu rengi olarak ve daha az sıklıkla kullanılan arama sorgularını öne çıkarmak için kullanılır. Eylem çağrısı için birincil renk olarak kullanılmamalıdır.
Doğal
- Ink
#000000— Gövde metni, gezinme bağlantıları, ana metin, alt bilgi metni, simge çerçeveleri, ince kenarlıklar; baskın tipografik ve yapısal renk. - Paper
#ffffff— Ürün kartı yüzeyleri, dolgu alanları, kabartmalı paneller; istifteki en parlak yüzey seviyesi. - Fog
#f7f7f7— Sayfa tuvali, bölüm arka planları, sayfadaki resimler arasındaki geçişler; tüm web sitesinin üzerinde bulunduğu temel yüzey. - Blush
#faf2f4— Altbilgi arka planı, yumuşak ve sıcak bölüm ayırıcılar; ince pembe-beyaz ton, sayfaların alt kısmına sıcaklık katıyor. - Mist
#f0f0f0— Göze batmayan bir arka plan oluşturmak ve bölümleri ayırmak için kullanılan hafif bir destekleyici yüzeydir. Eylem çağrısı için ana renk olarak kullanılmamalıdır. - Ash
#e8e8e8— Giriş alanı kenarlıkları, simge arka planları, ince ayırıcı çizgiler; kartlar ve form öğeleri için yapısal kenarlık rengi.
Tipografi
12 ila 32 piksel arası · 5 adım
- Apercu — yenisiyle değiştirme: Inter · ana hatlar 400, 500, 700 · Ana yazı tipi, kullanıcı arayüzünün tamamında kullanılır: gövde metni 16px/400, gezinme ve alt yazılar 12–14px/500, alt başlıklar 20px/500 ve editoryal başlıklar 32px/700. Apercu'nun geometrik, insancıl tasarımı markaya yoğun, modern bir stil kazandırır; sıfıra yakın harf aralığı (0.002–0.003em), yazı tipini havadar veya samimi olmaktan ziyade kompakt ve dergi tarzı yapar. 700 ağırlık, kullanıcı arayüzü öğelerinde değil, editoryal metinlerdeki ekran öğelerinde kullanılır.
- Apercu Mono — yenisiyle değiştirme: JetBrains Mono or IBM Plex Mono · ana hatlar 400 · Sipariş meta verileri, takip numaraları ve kodun yanındaki etiketler için mikro-kullanışlı tipografi; tek aralıklı versiyon, orantılı bir gövde yazı tipine karşı teknik bir doku oluşturur.
- GTStandard-M — yenisiyle değiştirme: Inter · ana hatlar 400 · GTStandard-M - Çıkarılan verilerde bulundu ancak yapay zeka tarafından tanımlanmadı.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 8px |
| Düğme yarıçapı | 0px |
| Kart yarıçapı | 0px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 64px |
| Sayfa genişliği | 1440px |
Yapay zeka, web sitenizi Glossier tarzında oluşturacak ve içeriğini dolduracak.
- Ürünlerinizi ve gönderilerinizi aşağıdaki bağlantılar aracılığıyla paylaşın: Instagram, TikTok, Facebook.
- Eski sitenizdeki içeriği aktarın; sadece adresi belirtmeniz yeterli.
- En iyi motor üzerinde modern tasarım: Sunucu tarafı işleme ve SEO optimizasyonu özellikleriyle birlikte React ( Next.js).
- Arama sonuçları için tamamen otomatik SEO optimizasyonu ve sinir ağı tabanlı öneriler.
Benzer stiller
- Lightship — Açık yolun sinematik bir dioraması. Sıcak krem rengi galeri duvarları, yakın aralıklarla yerleştirilmiş büyük manzara fotoğraflarıyla süslenmiş; çerçevelerde zar zor görünen ince siyah yazılar ve tek bir parlak turuncu vurgu, çayırda bir şenlik ateşi gibi monokromluğu kırıyor.
- Faire ES — sıcak krema toptan kataloğu
- Adanola — Beyaz kağıda basılmış bir editoryal katalog. Tipografi ve fotoğrafın temiz beyaz yüzeylerde nefes aldığı, yazı tipi için siyah mürekkep ve markanın genel stilini yansıtan incelikli bir sans-serif yazı tipi (Favorit) kullanılan bir moda çekimi.
- Oura Ring — Yumuşak gün ışığıyla aydınlanmış, samimi bir yulaf ezmesi yapım atölyesi.
- Stykka — Beyaz ışık altında bir İskandinav atölyesi – tek sesin fotoğraf olduğu sessiz, el yapımı bir sergi salonu.
- DJI — Tek bir elektrik mavisi vurguya sahip havacılık siyahı kanvas
- Altitude Beverages — Tek renkli dergi sayfası. Sadece fotoğrafların kaldığı, metin ve beyaz alanın tüm hikayeyi anlattığı bir moda dergisi sayfasını hayal edin.
- AATHER — Açık bir avuç, tek bir alev - dinginliğin içinde saklı sessiz bir lüks.
- Cowboy — Kar beyazı porselen bir ortamda yer alan Belçikalı bir bisiklet galerisi. Mat yüzeylerin, yayın materyallerinde kullanılan büyük yazı tiplerinin ve neredeyse hiç dekorasyonun bulunmadığı bir teşhir salonu, gözü bisiklete ve içindekilere çekiyor.
- Refero — Beyaz mermer üzerine editoryal düzen - bir tipograf tarafından tasarlanmış, serif başlıklı başlığın markanın kartviziti olduğu ve diğer her şeyin göze batmayan bir şekilde sunulduğu bir ürün sayfası.
- Face Formula — İskandinav tarzı bir editoryal portre. Sakin, dergi formatında bir sayfa düzeni; modelin bakışları ve daraltılmış serif yazı tipinde yazılmış başlık, serin ve sisli bir arka plana karşı kendilerini anlatıyor.
- Shupatto — Beyaz mermerden müze vitrini