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

Subframe

गर्म चर्मपत्र पर बना एक चित्र। डिज़ाइनर पेपर, जहाँ हर स्ट्रोक या तो ग्रेफाइट का होता है या इरेज़र का, पेंट का कभी नहीं—रेखाओं की मोटाई और विरल सेरिफ़ के माध्यम से गहराई प्राप्त की जाती है।

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

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

इसका विज़ुअल डिज़ाइन सरल और कार्यात्मक है। सिस्टम दो विज़ुअल मोड का उपयोग करता है: (1) 24px त्रिज्या वाले फ़्रेमों में फ़्रेमयुक्त उत्पाद स्क्रीनशॉट और UI मॉकअप - ये वास्तविक इंटरफ़ेस घटकों (टेबल, बटन, फ़ॉर्म) को एक ही मोनोक्रोम पैलेट में प्रदर्शित करते हैं, जिससे स्क्रीनशॉट पृष्ठ में सहज रूप से एकीकृत प्रतीत होते हैं; (2) ग्रेस्केल पार्टनर लोगो की एक पट्टी सामाजिक प्रमाण के रूप में कार्य करती है, जिसे बिना रंग या कंटेनर के सपाट रूप में प्रस्तुत किया गया है। इसमें कोई लाइफस्टाइल फ़ोटो, अमूर्त ग्रेडिएंट या 3D रेंडर नहीं हैं। एकमात्र सचित्र तत्व एक ब्रांड आइकन के साथ गर्म ग्रे पृष्ठभूमि पर केंद्रित एक गहरा उत्पाद "टाइल" है - इसे उत्पाद प्रदर्शन के रूप में देखा जाता है, न कि सजावट के रूप में। सभी छवियां टेक्स्ट-आधारित लेआउट में हैं, जहां दृश्य भार टेक्स्ट द्वारा वहन किया जाता है।

पैलेट

तटस्थ

  • Page Canvas #fafafa — पृष्ठ की पृष्ठभूमि, कैनवास पर बना पोस्टकार्ड, गहरे रंग की सतहों पर हल्के रंग का पाठ - एक गर्म सफेद रंग जो संपूर्ण मोनोक्रोम प्रणाली का आधार है।
  • Hairline Border #e5e7eb — डिवाइडर, कार्ड बॉर्डर, इमेज फ्रेम, आइकन आउटलाइन - सिस्टम में सबसे अधिक उपयोग किए जाने वाले आउटलाइन के प्रकार स्थानिक संरचना को परिभाषित करते हैं।
  • Card Surface #ededed — कार्डों के लिए उभरा हुआ बैकग्राउंड, एक अतिरिक्त सतह - कैनवास से एक पायदान ऊपर स्थित है, जिससे बिना छाया वाला समूह बनता है।
  • Divider Mid #dadada — मध्य स्वर विभाजक और खंडों के बीच संक्रमण
  • Graphite #242424 — हल्की सतहों पर प्राथमिक बटनों के लिए उच्च-कंट्रास्ट वाला तटस्थ रंग।
  • Ink Black #171717 — बॉडी टेक्स्ट, हेडिंग्स, आइकन आउटलाइन्स - ग्रेफाइट से थोड़ा बेहतर, सतहों के बजाय टाइपोग्राफी के लिए उपयोग किया जाता है।

टाइपोग्राफी

12 से 128px तक · 7 चरण

  • Inter — प्रतिस्थापन: Inter (Google Fonts) · रूपरेखा 500, 600, 700 · एक सेरिफ़-रहित सिस्टम इंटरफ़ेस—नेविगेशन, मुख्य पाठ, बटन, उपशीर्षक और अनुभाग शीर्षक। फ़ॉन्ट का वज़न: मुख्य पाठ और नियंत्रणों के लिए 500, उपशीर्षकों और नेविगेशन एक्सेंट के लिए 600, और अनुभाग शीर्षकों के लिए 700। कठोर नेगेटिव लेटर स्पेसिंग किसी भी आकार में ज्यामितीय आकृतियों को संकुचित करती है, जिससे इंटरफ़ेस को एक संक्षिप्त, तकनीकी रूप मिलता है।
  • Instrument Serif — प्रतिस्थापन: Playfair Display · रूपरेखा 400 · यह एक सेरिफ़ फ़ॉन्ट है जिसे विशेष रूप से हेडलाइन और संपादकीय सामग्री के लिए डिज़ाइन किया गया है। इसका 400 वेट और -0.025em का लेटर स्पेसिंग एक सुरुचिपूर्ण, इटैलिक लुक देता है जो इंटर की औद्योगिक ज्यामिति के विपरीत है—यह एक विशिष्ट तकनीक है: एक सेरिफ़ रहित पृष्ठ में एक अकेला शब्द या वाक्यांश, जो हेडलाइन शैली के बजाय दृश्य विराम चिह्न के रूप में कार्य करता है।
  • Fragment Mono — प्रतिस्थापन: JetBrains Mono · रूपरेखा 400 · इनलाइन कोड जैसे तत्वों, टैग लेबल और तकनीकी संदर्भों के लिए एक्सेंट मोनो का उपयोग किया जाता है। इसका प्रयोग सीमित मात्रा में किया जाता है और यह फ़ंक्शन सूचियों और इनलाइन एनोटेशन में दिखाई देता है जहाँ डिज़ाइन टूल यह दर्शाना चाहता है कि "यह मशीन द्वारा आउटपुट किया गया है।"

अंतराल और रूप

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

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

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

समान शैलियाँ

  • monopo saigon — संपादकीय चुप्पी के पीछे एक तरल, इंद्रधनुषी चमक—पिघली हुई रोशनी पर तैरती एक मोनोक्रोम संपादकीय गैलरी
  • Hyer Aviation — चर्मपत्र पर बने कॉकपिट में गोधूलि बेला छाई हुई है। धुंधली सुबह का आकाश विमान के धड़ के आकार के सेरिफ़ लोगो से मिलता है, और एक हल्का सा गर्म मिट्टी का स्पर्श एकरंगी रंग की सादगी को तोड़ता है।
  • OFF+BRAND. — गर्म चर्मपत्र पर इंद्रधनुषी गोला
  • Seed — प्रयोगशाला के कांच के नीचे एक जीवित जीव
  • Eindhoven Design District — सफेद कागज पर संपादकीय क्रूरता एक नगरपालिका डिजाइन घोषणापत्र है, जिसे बड़े अक्षरों में, न्यूनतम फोटोग्राफी और पूर्ण संयम के साथ निष्पादित किया गया है।
  • Miranda — हल्के क्रीम रंग की पृष्ठभूमि पर क्लासिक चौड़े आकार के अक्षर—डिजिटल युग के लिए एक समाचार पत्र का संपादकीय।
  • Monocle — क्रीम रंग के कागज पर छपा एक उच्च गुणवत्ता वाला, चौड़े आकार का समाचार पत्र। सावधानीपूर्वक तैयार किया गया संपादकीय, जिसमें प्रत्येक कॉलम का अपना महत्व है, और पृष्ठ पर केवल एक ही सार्थक रंग दिखाई देता है।
  • Agencja brandingowa — सफेद रंग में एक संपादकीय गैलरी जिसमें काले रंग की स्याही से टाइपोग्राफी की गई है।
  • Websmith Studio — क्रीम रंग के कागज पर सुबह की रोशनी
  • Aspelin Reitan — मोमबत्ती की रोशनी में वास्तुकला संग्रह - यह पृष्ठ निर्मित स्थानों के एक पोर्टफोलियो जैसा दिखता है, जिसे एक गर्म क्रीम रंग की दीवार पर पिन किया गया है, जिसमें प्रत्येक छवि के ऊपर सफेद रंग की एक पंक्ति पूरे पृष्ठ की चौड़ाई में तैरती हुई दिखाई देती है।
  • Public — ठंडे संगमरमर पर एक मोनोक्रोम संपादकीय - लगभग एक मोनोक्रोम कैनवास, जिसमें 300-पॉइंट सेरिफ फ़ॉन्ट और एक एकल बैंगनी रंग का स्पर्श सारा रंग का काम कर रहा है।
  • Motto — कागज पर बना एक विशाल चित्र – बर्फ जैसे सफेद कागज पर खुद को प्रकट करती एक अकेली, आत्मविश्वास से भरी आवाज