टेलीग्राम, WhatsApp+380637610482
वैलेरी डैन्युक
वैलेरी डैन्युकडेवलपरव्यवसायों के लिए एआई उपकरण विकसित करना। उच्च गुणवत्ता। किफायती।Telegram पर लिखें
Glossier — इस शैली में एक साइट का पूर्वावलोकन

Glossier

धूप में फोटोशूट - सफेद कागज, काली स्याही, एक चमकीला पीला रंग।

ग्लॉसियर एक डिजिटल ब्यूटी मैगज़ीन की तरह काम करता है: सफ़ेद और काले रंग का लगभग मोनोक्रोम कैनवास, जिस पर एक चमकीला पीला रंग है जो ब्रांड के लोगो और एकमात्र कॉल टू एक्शन का काम करता है। संपादकीय रूप से यह प्रणाली संयमित है—बड़े-बड़े संक्षिप्त शीर्षक, पर्याप्त टेक्स्ट स्पेस, पूरे पेज की लाइफस्टाइल फोटोग्राफी जो भावनात्मक प्रभाव को बखूबी दर्शाती है—और क्रियान्वयन में व्यावहारिक: सपाट प्रोडक्ट कार्ड, पतले बॉर्डर और सजावट का पूर्ण अभाव। पीला रंग ब्रांड का गौण रंग नहीं है; यह स्वयं ब्रांड है, जिसका उपयोग संयम से किया गया है, ताकि हर बार दिखने पर ऐसा लगे जैसे कैमरा फ्लैश चमक रहा हो। बाकी सब कुछ पृष्ठभूमि में घुलमिल जाने के लिए बनाया गया है: न्यूट्रल रंग हल्के गुलाबी रंग के साथ गर्म ग्रे हैं, बॉर्डर सूक्ष्म हैं और टाइप सघन और संकुचित है। परिणाम स्वरूप, यह स्टोरफ्रंट आत्मविश्वास से भरा, सहज और बेजोड़ रूप से आधुनिक प्रतीत होता है।

इस पेज पर लंबवत रूप से व्यवस्थित पूर्ण-स्क्रीन अनुभागों की एक श्रृंखला है, जिनमें से प्रत्येक को एक स्वतंत्र संपादकीय स्प्रेड के रूप में डिज़ाइन किया गया है। मुख्य अनुभाग में एक पूर्ण-चौड़ाई वाली तस्वीर है जिसके ऊपर एक सफेद ओवरले (ऊपर बाईं ओर) है और पेज के निचले भाग में एक विशाल पीला लोगो है। मुख्य अनुभाग के नीचे, पूर्ण-स्क्रीन छवियों और व्यक्तिगत कार्डों के ग्रिड के बीच बारी-बारी से अनुभाग आते हैं। श्रेणियों (स्किनकेयर/मेकअप) का विभाजन दो कॉलम में समान अनुपात (50/50) छवियों के साथ बिना किसी स्पष्ट बॉर्डर के किया गया है—केवल छवियों को जोड़ने वाली एक रेखा ही उन्हें अलग करती है। उत्पाद कैटलॉग में #f7f7f7 कैनवास पर वर्गाकार कार्डों का चार-कॉलम ग्रिड उपयोग किया गया है। नेविगेशन एक न्यूनतम शीर्ष बार है जिसके ऊपर एक द्वितीयक विज्ञापन पट्टी है। अनुभागों के बीच का अंतराल काफी बड़ा (64px) है, लेकिन अनुभागों के बीच संक्रमण सहज है—गर्म फुटर को छोड़कर, बिना किसी विभाजक या वैकल्पिक पृष्ठभूमि रंगों के। समग्र लय है: तस्वीर, पाठ, तस्वीर, ग्रिड, तस्वीर – जैसे किसी फैशन पत्रिका के पन्ने पलट रहे हों।

फोटोग्राफी प्रमुख दृश्य भाषा है। पूरा दृश्य क्षेत्र जीवनशैली से जुड़ी छवियों और पोर्ट्रेट से भरा हुआ है—सुनहरे सुनहरे प्रकाश में नहाए हुए, त्वचा के कोमल क्लोज-अप, धूप की चकाचौंध के बीच उत्पाद की बोतलों को पकड़े हुए हाथ। तस्वीरों में रंगों का संयोजन गर्म और मंद है: आड़ू रंग का आसमान, टेराकोटा रंग की त्वचा, गहरा समुद्री नीला। सफेद टेक्स्ट कार्ड या पीले लोगो को छोड़कर, छवियां हमेशा पूरे पृष्ठ पर फैली होती हैं, जिनमें गोल कोने, फ्रेम या ओवरले नहीं होते। कैटलॉग कार्ड पर उत्पाद की तस्वीरें एक शुद्ध सफेद निर्बाध पृष्ठभूमि पर समतल, एकसमान प्रकाश में खींची जाती हैं। छवि-पाठ अनुपात लगभग 70/30 है—छवियां भावना व्यक्त करती हैं, पाठ कार्य को। कोई चित्र नहीं, कोई अमूर्त ग्राफिक्स नहीं, कोई 3डी रेंडरिंग नहीं।

पैलेट

ब्रांड

  • Glossier Yellow #fff116 — पीले रंग का उपयोग सजावटी विवरणों के लिए द्वितीयक रंग के रूप में और कम उपयोग होने वाले खोज प्रश्नों को उजागर करने के लिए किया जाता है। इसे किसी कॉल टू एक्शन के प्राथमिक रंग के रूप में उपयोग नहीं किया जाना चाहिए।

तटस्थ

  • Ink #000000 — बॉडी टेक्स्ट, नेविगेशन लिंक, प्राथमिक टेक्स्ट, फुटर टेक्स्ट, आइकन की रूपरेखा, पतली बॉर्डर; प्रमुख टाइपोग्राफिक और संरचनात्मक रंग।
  • Paper #ffffff — उत्पाद कार्ड की सतहें, भरने वाले क्षेत्र, उभरे हुए पैनल; स्टैक में सबसे चमकदार सतह स्तर।
  • Fog #f7f7f7 — पेज कैनवास, सेक्शन बैकग्राउंड, पेज पर मौजूद छवियों के बीच ट्रांज़िशन; वह आधार सतह जिस पर पूरी वेबसाइट स्थित है।
  • Blush #faf2f4 — फ़ूटर की पृष्ठभूमि, कोमल और गर्म अनुभाग विभाजक; हल्का गुलाबी-सफेद रंग पृष्ठों के निचले भाग में गर्माहट का एहसास कराता है।
  • Mist #f0f0f0 — यह एक हल्की सहायक सतह है जिसका उपयोग एक सहज पृष्ठभूमि बनाने और अनुभागों को अलग करने के लिए किया जाता है। इसे कॉल टू एक्शन के प्राथमिक रंग के रूप में उपयोग नहीं किया जाना चाहिए।
  • Ash #e8e8e8 — इनपुट फ़ील्ड बॉर्डर, आइकन बैकग्राउंड, पतली विभाजक रेखाएँ; कार्ड और फ़ॉर्म तत्वों के लिए संरचनात्मक बॉर्डर रंग।

टाइपोग्राफी

12 से 32px तक · 5 चरण

  • Apercu — प्रतिस्थापन: Inter · रूपरेखा 400, 500, 700 · मुख्य फ़ॉन्ट का उपयोग पूरे उपयोगकर्ता इंटरफ़ेस में किया गया है—बॉडी टेक्स्ट 16px/400, नेविगेशन और कैप्शन 12–14px/500, उपशीर्षक 20px/500 और संपादकीय शीर्षक 32px/700 पर। Apercu का ज्यामितीय, मानवीय डिज़ाइन ब्रांड को एक सघन, आधुनिक शैली प्रदान करता है; लगभग शून्य अक्षर रिक्ति (0.002–0.003em) फ़ॉन्ट को हवादार या मैत्रीपूर्ण के बजाय सघन और पत्रिका जैसा बनाती है। 700 वज़न संपादकीय में डिस्प्ले तत्वों के लिए आरक्षित है, न कि UI तत्वों के लिए।
  • Apercu Mono — प्रतिस्थापन: JetBrains Mono or IBM Plex Mono · रूपरेखा 400 · ऑर्डर मेटाडेटा, ट्रैकिंग नंबर और कोड के बगल में लेबल के लिए सूक्ष्म-उपयोगी टाइपोग्राफी; मोनोस्पेस्ड संस्करण आनुपातिक बॉडी टाइप के विपरीत एक तकनीकी बनावट बनाता है।
  • GTStandard-M — प्रतिस्थापन: Inter · रूपरेखा 400 · GTStandard-M - निकाले गए डेटा में पाया गया लेकिन AI द्वारा इसका वर्णन नहीं किया गया।

अंतराल और रूप

उद्देश्यअर्थ
घनत्वऔसत
बुनियादी कदम8px
बटन त्रिज्या0px
कार्ड त्रिज्या0px
छैया छैयानहीं - छाया के बजाय बॉर्डर
अनुभागों के बीच64px
पृष्ठ की चौड़ाई1440px

एआई आपकी वेबसाइट को Glossier शैली में बनाएगा और उसमें डेटा भरेगा।

  • इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
  • अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
  • सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
  • खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।

समान शैलियाँ

  • Lightship — खुली सड़क का एक सिनेमाई दृश्य। गर्म क्रीम रंग की गैलरी की दीवारें बड़े-बड़े भूदृश्य चित्रों से सजी हैं, जिन्हें पास-पास लगाया गया है, फ्रेम पर पतले काले अक्षर मुश्किल से दिखाई दे रहे हैं, और एक चमकीला नारंगी रंग इस एकरसता को ऐसे तोड़ रहा है जैसे किसी घास के मैदान में जलती हुई आग।
  • Faire ES — गर्म क्रीम का थोक कैटलॉग
  • Adanola — सफेद कागज पर छपी एक संपादकीय लुकबुक। एक फैशन शूट जिसमें साफ सफेद सतहों पर टाइपोग्राफी और फोटोग्राफी जीवंत हो उठती है, टाइपफेस के लिए काली स्याही और ब्रांड की समग्र शैली को प्रतिबिंबित करने वाला एक सूक्ष्म सिग्नेचर सैन्स-सेरिफ फॉन्ट (फेवरिट) का उपयोग किया गया है।
  • Oura Ring — धूप से जगमगाती एक आरामदायक ओटमील बनाने की कार्यशाला।
  • Stykka — सफेद रोशनी में एक स्कैंडिनेवियाई कार्यशाला – एक शांत, हस्तनिर्मित शोरूम जहाँ केवल फोटोग्राफी की ही आवाज सुनाई देती है।
  • DJI — एयरोस्पेस ब्लैक कैनवास, जिसमें एक इलेक्ट्रिक ब्लू हाईलाइट है।
  • Altitude Beverages — मोनोक्रोम पत्रिका का पृष्ठ। कल्पना कीजिए एक फैशन पत्रिका के पृष्ठ की जिसमें स्थिर तस्वीरों के अलावा कोई रंग नहीं है—पाठ और खाली स्थान ही पूरी कहानी बयां करते हैं।
  • AATHER — खुली हथेली, एक अकेली लौ - शांति में समाहित एक शांत विलासिता
  • Cowboy — बर्फ़ जैसे सफ़ेद चीनी मिट्टी के बर्तनों से सजी एक बेल्जियम की साइकिल गैलरी। एक ऐसा शोरूम जहाँ मैट सतहें, संपादकीय सामग्री में प्रयुक्त बड़े फ़ॉन्ट और सजावट की लगभग अनुपस्थिति साइकिल और उसके अंदर रखी वस्तुओं पर ध्यान केंद्रित करती है।
  • Refero — सफेद संगमरमर पर संपादकीय लेआउट - एक टाइपोग्राफर द्वारा बनाया गया उत्पाद पृष्ठ, जहाँ सेरिफ़ फ़ॉन्ट में लिखी गई हेडलाइन ब्रांड की पहचान है, और बाकी सब कुछ सादा है।
  • Face Formula — एक स्कैंडिनेवियाई संपादकीय चित्र। एक शांत, पत्रिका-शैली का स्प्रेड, जहाँ मॉडल की निगाहें और शीर्षक, जो एक सघन सेरिफ़ फ़ॉन्ट में लिखे गए हैं, एक ठंडे, धुंधले पृष्ठभूमि के सामने खुद ही सब कुछ बयां करते हैं।
  • Shupatto — सफेद संगमरमर पर संग्रहालय का प्रदर्शन केस