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

Electronic Materials Office

कोयले से सजी एक गैलरी में एक सुलगता हुआ अंगारा

इलेक्ट्रॉनिक मैटेरियल्स ऑफिस एक देर रात चलने वाली कार्यशाला जैसा है: एक मैट जेट-ब्लैक कैनवास, एक चमकता हुआ नारंगी अंगारा, और एक ऐसा फॉन्ट जो स्पष्ट रूप से कुछ कहने के बजाय धीरे से बोलता है। इंटरफ़ेस हर स्क्रीन को एक अंधेरे स्टूडियो की तरह मानता है—कीबोर्ड की तस्वीरें ही एकमात्र वास्तविक प्रकाश स्रोत हैं, और यूआई उसी के अनुरूप काम करता है। 200-वेट GT-Flexa फॉन्ट में सेट की गई हेडलाइनें विशाल खाली जगह में तैरती हुई प्रतीत होती हैं; बॉडी टेक्स्ट जानबूझकर छोटा और मानवीय है (टाइम्स)। रंगों का चयन संतुलित है: टाइप के लिए शुद्ध सफेद, लिंक के लिए हल्का बैंगनी (#9e9eff), और पेज पर एक नारंगी (#f45500) कॉल टू एक्शन जो अपनी 30px की चमक से दमकता है। कंपोनेंट्स 20px के दायरे में कसकर फिट होते हैं, बॉर्डर #9d9d9d रंग में मुश्किल से दिखाई देते हैं, और सिस्टम में एकमात्र छाया मुख्य क्रिया के चारों ओर दो रंगीन प्रभामंडल हैं।

एक पूर्ण-चौड़ाई वाला, चारकोल कैनवास जिसमें बीच में अधिकतम चौड़ाई (~1200px) का कंटेंट है। मुख्य स्क्रीन 20px त्रिज्या वाले मीडिया कार्ड से शुरू होती है जिसमें एक उत्पाद वीडियो होता है, जो व्यूपोर्ट की लगभग 80% चौड़ाई को कवर करता है, इसके तुरंत बाद एक बहु-पंक्ति GT-Flexa 200 हेडलाइन आती है जो लगभग पूरी कंटेंट चौड़ाई में फैल जाती है। सेक्शन का क्रम: टोबियास शैली में सभी बड़े अक्षरों में एक एकल उत्पाद विवरण सेक्शन, इसके बाद उत्पाद विवरण कार्डों का 2x2 ग्रिड (डेस्कटॉप पर) होता है। कार्डों में 1px #9d9d9d बॉर्डर और उनके बीच 24px का गैप होता है। पर्याप्त ऊर्ध्वाधर स्पेस—सेक्शन विभाजकों के बजाय 48–128px के चारकोल नेगेटिव स्पेस द्वारा अलग किए जाते हैं। नेविगेशन शीर्ष पर स्थित एक एकल, पारदर्शी पैनल है, जिसमें छिपे हुए लिंक का एक समूह और एक एम्बर कॉल-टू-एक्शन है। कोई साइडबार नहीं, कोई मेगा-मेनू नहीं, कोई द्वितीयक नेविगेशन नहीं।

ये चित्र केवल उत्पाद प्रदर्शन के लिए हैं—अल्टर I कीबोर्ड का एक क्लोज-अप मैक्रो शॉट, पूरी तरह से काले बैकग्राउंड के सामने, ऊपर से आती बैकलाइट के साथ, जिससे केस चमक रहा है और कीकैप्स किनारों से प्रकाश परावर्तित हो रहे हैं। कोई जीवनशैली, कोई मानवीय हाथ, कोई पर्यावरणीय संदर्भ नहीं। चित्र उच्च-कंट्रास्ट और गहरे रंग के हैं; मोनोक्रोम पैलेट के बाहर एकमात्र रंग कीबोर्ड पर लगा नारंगी पावर स्विच है, जो एम्बर ऑरेंज कॉल-टू-एक्शन को दर्शाता है। चित्र वर्गाकार या 16:9 अनुपात में हैं, हमेशा 20px त्रिज्या वाले कार्ड में रखे गए हैं और कार्ड के किनारों से बाहर तक फैले हुए हैं (फोटो के चारों ओर कोई पैडिंग नहीं है, और टेक्स्ट किनारे के नीचे है)। आइकन शैली: लोगो से पहले केवल एक छोटा भरा हुआ वृत्त (●) है—एक नारंगी बिंदु, लगभग 6px मोटा।

पैलेट

ब्रांड

  • Ember Orange #f45500 — फिल वाला प्राथमिक एक्शन बटन यूआई में एकमात्र रंगीन सतह है, जिसके चारों ओर हमेशा 30px का नारंगी प्रभामंडल होता है, जिससे यह एक फिलामेंट की तरह चमकता है; प्राथमिक कॉल बटन पर 30px की बाहरी चमक एम्बर ऑरेंज षट्भुज प्रतीक की प्रतिकृति है, लेकिन यह फिल के बजाय छाया के रूप में मौजूद है, जिससे बटन अंदर से प्रकाशित प्रतीत होता है।

तटस्थ

  • Studio Charcoal #202020 — कैनवास और कार्डबोर्ड की सतहें किसी अंधेरी गैलरी के फर्श की तरह हैं, जो कभी भी पूरी तरह से काली नहीं होतीं, ताकि आंखें मुलायम किनारों पर टिक सकें।
  • Bone White #ffffff — मुख्य पाठ, छवियों पर पतली बॉर्डर और एक दुर्लभ उलटी सतह। संपूर्ण फ़ॉन्ट पदानुक्रम को स्वतंत्र रूप से बनाए रखा जाता है।
  • Ash Gray #9d9d9d — म्यूट टेक्स्ट, सूक्ष्म कार्ड बॉर्डर और निष्क्रिय कैप्शन ही रंग योजना में मौजूद एकमात्र मध्यम-धूसर रंग हैं, जिनका उपयोग तब किया जाता है जब सफेद रंग बहुत भड़कीला होता है।
  • Mid Felt #eaeaea — उल्टे पैनलों या मोडल ग्रिड के लिए एक हल्का सरफेस वॉश - सफेद रंग की एक ऐसी छाया जो बेज और गहरे कैनवास के बीच आती है।
  • Carbon #000000 — सबसे उल्लेखनीय प्रभाव आइकन स्ट्रोक और विपरीत फ्रेम के लिए है जहां चारकोल कैनवास इतना हल्का है कि वह अपना आकार अच्छी तरह से बनाए नहीं रख पाता है।
  • Lavender Link #9e9eff — एम्बेडेड लिंक का रंग और अतिरिक्त एक्शन फ्रेम की रूपरेखा गर्म नारंगी रंग के विपरीत एक शांत, सौम्य रंग का संयोजन है, जिससे यह सुनिश्चित होता है कि क्रियाएं चारकोल पृष्ठभूमि के विरुद्ध स्पष्ट रूप से पठनीय हों।

टाइपोग्राफी

16 से 86px तक · 8 चरण

  • GT-Flexa — प्रतिस्थापन: Inter (200/400) or Manrope (200/400) · रूपरेखा 200, 400 · शीर्षकों और सजावटी तत्वों के लिए मुख्य फ़ॉन्ट। 200 वेट वाला फ़ॉन्ट 24px से ऊपर के सभी शीर्षकों के लिए उपयुक्त है—यह इसकी खास शैली है: 68px और 86px पर, अक्षर ऐसे लगते हैं मानो वातावरण में घुल-मिल गए हों, न कि चिल्ला रहे हों। 400 वेट वाला फ़ॉन्ट उपशीर्षकों और कार्ड कैप्शन के लिए उपयुक्त है, जहाँ अक्षर मुश्किल से सुनाई देते हैं। सबसे बड़े आकार में लाइन स्पेसिंग 1.0 तक कम हो जाती है, जिससे सजावटी फ़ॉन्ट के अक्षर एक दूसरे के ऊपर हवा के स्तंभ की तरह व्यवस्थित हो जाते हैं।
  • Tobias-light — प्रतिस्थापन: Söhne Buch or Inter Tight · रूपरेखा 400 · अनुभाग शीर्षकों और फ़ूटर लोगो के लिए एक द्वितीयक टाइपोग्राफ़ी शैली। टोनल कंट्रास्ट बनाने के लिए इसे GT-Flexa 200 से एक पायदान नीचे इस्तेमाल किया गया है—टोबियास में अधिक वास्तुशिल्पीय और अभिव्यंजक भाव है, जबकि GT-Flexa अधिक वायुमंडलीय है। नेगेटिव लेटर स्पेसिंग टोबियास लाइट के चौड़े अनुपात को कम करती है।
  • Times — प्रतिस्थापन: Source Serif 4 or PT Serif · रूपरेखा 400 · मुख्य पाठ और शीर्षक पैराग्राफ जानबूझकर ज्यामितीय, सजावटी फ़ॉन्ट के विपरीत सेरिफ़ का उपयोग करते हैं। ये सेरिफ़ मुख्य पाठ के आकार से अधिक हुए बिना उत्पाद विवरणों में गर्माहट और संपादकीय प्रभाव जोड़ते हैं।

अंतराल और रूप

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

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

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

समान शैलियाँ

  • OFFFICE : — एक मोनोलिथिक फॉन्ट में डूबी हुई एक नॉयर गैलरी
  • Bibliothèque — स्पॉटलाइट के नीचे एक काले घन के आकार की गैलरी – एक विशाल, अंधेरे हॉल में अकेली प्रकाशित प्लेट
  • 21 TSI — एक गहरा लाल शून्य, एक अकेली आकृति – एक हाई फैशन संपादकीय जहाँ यूजर इंटरफेस वातावरण में विलीन हो जाता है
  • Structured — प्लास्टिकिन जैसे कागज पर पुनर्जागरणकालीन गैलरी
  • CHAIBOY — एक काली गैलरी की दीवार जिस पर एक अकेली बैकलाइट वाली तस्वीर लगी है।
  • Holiday 100 — आधी रात को उपहारों की एक गैलरी - एक सेरिफ शीर्षक स्पॉटलाइट का काम करता है, एक गहरा कैनवास मखमली दीवार की तरह है, और प्रत्येक उत्पाद की छवि एक सावधानीपूर्वक चुने गए फ्रेम की तरह लटकी हुई है।
  • Apple (España) — दिन के हल्के प्रकाश में संग्रहालय की गैलरी एक एकल, मनमोहक, भारहीन सफेद स्थान है, जिसमें प्रत्येक प्रदर्शनी हल्के रंग की दीवार के सामने एक स्पॉटलाइट द्वारा प्रकाशित होती है।
  • Analogue — काले रंग का गैलरी डिस्प्ले केस – सामान हवा में तैर रहा है
  • Apple (España) — ऑब्सीडियन गैलरी का प्रदर्शन कक्ष एक अंधेरा प्रदर्शनी हॉल है जहां एक अकेली टाइटेनियम वस्तु घोर काले बैकग्राउंड के सामने चमकती है।
  • Studio Oker — गहरे लाल रंग के स्पर्श से सजी एक अंधेरी गैलरी—काली दीवारों वाला एक पोर्टफोलियो कक्ष, जहाँ सफेद अक्षर तैरते हुए प्रतीत होते हैं और एक अकेली लाल फुसफुसाहट सन्नाटे को चीर देती है।
  • 099 SUPPLY — एक गैलरी की दीवार जो काले और सफेद रंग की वस्तुओं से भरी हुई है
  • Retool — एक गर्म ओब्सीडियन कार्यशाला - सटीक औजारों के लिए एक सतह, सुलगते अंगारों से रोशन, जहाँ सब कुछ बनाया जाता है