INO — इस शैली में एक साइट का पूर्वावलोकन

INO

एक संग्रहालय का डिस्प्ले केस खामोशी से जगमगा रहा है – प्रत्येक प्रदर्शनी एक सफेद स्थान में तैरती हुई प्रतीत होती है, मानो कांच के पीछे रखी एक अकेली वस्तु हो, जो लगभग काले रंग के, मुश्किल से सुनाई देने वाले फ़ॉन्ट से घिरी हो।

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

बिना किसी अधिकतम कंटेंट चौड़ाई सीमा के एक पूर्ण-चौड़ाई वाला कैनवास। मुख्य स्क्रीन पूरे पृष्ठ की चौड़ाई में फैली हुई है, जिसमें फ़ोटोग्राफ़ी और ग्राफ़िक्स समान रूप से (50/50) विभाजित हैं। उत्पाद ग्रिड तीन-स्तंभ पंक्तियों के रूप में प्रदर्शित होते हैं, जिसमें व्यूपोर्ट के किनारे से पर्याप्त क्षैतिज मार्जिन होता है। निचला नेविगेशन केंद्र में स्थित है और पृष्ठ फ़ूटर से जुड़ा हुआ है, पिन नहीं किया गया है। अनुभाग विभाजन में या तो पूर्ण-स्क्रीन संपादकीय फ़ोटोग्राफ़ी या पूरी तरह से खाली स्थान का उपयोग किया जाता है—कभी भी रंगीन पट्टी, विभाजक रेखा या ग्रेडिएंट नहीं। ऊर्ध्वाधर लय स्वतंत्र है: प्रमुख अनुभागों के बीच 80/1/1 का अनुपात है, जिससे पृष्ठ कंटेंट से भरा होने के बजाय सांस ले सकता है। कोई साइडबार नहीं है, कोई मेगा-मेनू नहीं है, कोई शीर्ष हेडर बार नहीं है—"INO" लोगो केवल मुख्य स्क्रीन के ऊपरी बाएँ कोने में स्थित है।

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

ऑनलाइन स्टोर एक रंग का अधिमूल्य

https://ino.jewelry

पैलेट

तटस्थ

Obsidian Ink #212123 — तटस्थ प्रारूप, आइकन टेक्स्ट और विवेकपूर्ण यूआई फीडबैक जहां रंग योजनाएं अगोचर रहनी चाहिए।
Bone #ffffff — कैनवास के पन्ने, कार्डबोर्ड की सतहें, गहरे रंग की पृष्ठभूमि पर उलटा लिखा हुआ पाठ। यही प्रमुख सतह है; लगभग पूरी वेबसाइट यहीं स्थित है।
Carbon #000000 — आइकन फिल, सजावटी ग्राफिक आउटलाइन और नेविगेशन पॉइंट इंडिकेटर के लिए सक्रिय स्थिति फिल। "बोन" रंग के साथ अधिकतम टोनल कंट्रास्ट के लिए इनका सीमित उपयोग किया गया है।
Ash #999999 — मध्यम कंट्रास्ट बॉर्डर, कंट्रोल कंटूर और संरचनात्मक विभाजक।
Pebble #a6a6a7 — सहायक पाठ को हल्के रंग में रंगा गया है, मुख्य पाठ और द्वितीयक मेटाडेटा को अलग करने के लिए पतले विभाजकों का उपयोग किया गया है। मूल्य टैग और पृष्ठभूमि में घुलमिल जाने वाले संबंधित पाठ के लिए सबसे हल्के कार्यात्मक धूसर रंग का प्रयोग किया गया है।

टाइपोग्राफी

11 से 18px तक · 4 चरण

Sequel100Wide — प्रतिस्थापन: Jost (400 · रूपरेखा 400 · यह एकमात्र कॉर्पोरेट फॉन्ट है जिसका उपयोग नेविगेशन, बॉडी टेक्स्ट, हेडिंग, टाइटल, प्राइसिंग और कैप्शन सहित सभी संदर्भों में केवल 400 वेट में किया जाता है। पर्याप्त लेटर स्पेसिंग वाला यह ज्योमेट्रिक सिंबल पूरी कॉर्पोरेट शैली को दर्शाता है। बोल्ड वेट का अभाव जानबूझकर किया गया है: फॉन्ट वेट में बदलाव के बजाय कैपिटलाइज़ेशन, लेटर स्पेसिंग और पोजीशनिंग के माध्यम से पदानुक्रम स्थापित किया जाता है।
Arial — प्रतिस्थापन: system-ui · रूपरेखा 400 · पुराने सिस्टम में बटन प्रदर्शित करने के लिए एक सिस्टम-व्यापी फ़ॉलबैक। यह ब्रांडिंग का हिस्सा नहीं है—यह केवल तभी दिखाई देता है जब Sequel100Wide लोड होने में विफल रहता है।

अंतराल और रूप

उद्देश्य	अर्थ
घनत्व	घना
बुनियादी कदम	23px
बटन त्रिज्या	50px
कार्ड त्रिज्या	8px
छैया छैया	नहीं - छाया के बजाय बॉर्डर
अनुभागों के बीच	80-120px

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

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

इस शैली में एक वेबसाइट बनाएं

समान शैलियाँ

Airbnb — एक शांत सफेद गैलरी की दीवार जिस पर एक मूंगा लाल रंग का बुकमार्क लगा है।
Peak Design — गैलरी की दीवार, आंशिक रूप से प्रकाशित
099 SUPPLY — एक गैलरी की दीवार जो काले और सफेद रंग की वस्तुओं से भरी हुई है
Apple (España) — सफेद गैलरी डिस्प्ले केस
Apple (España) — सुबह की धुंध में एक गैलरी की खिड़की
Custo — गहरे लाल रंग की गैलरी जिसमें एक ही अक्षर का बड़ा फॉन्ट इस्तेमाल किया गया है। एक शोरूम जिसमें हल्के भूरे-हरे रंग के शेड्स हैं, जहां एक ही गहरे रंग की वस्तु और 57px का फॉन्ट खुद ही अपनी कहानी बयां करते हैं।
Silencio — तैरती हुई कलाकृतियों से सजा एक सफेद कमरा। गर्म कागज से बना एक गैलरी डिस्प्ले, जहां प्रत्येक तत्व खालीपन की पृष्ठभूमि में अपनी जगह लेता है, और खामोशी एक जानबूझकर लिया गया डिजाइन निर्णय है।
Oakâme — धूप से सराबोर प्रोवेंसल कार्यशाला, गर्म पत्थर से तराशी गई।
Nike — खेल उपलब्धियों की एक मोनोक्रोम गैलरी – सफेद दीवारें, कलाकृति के रूप में उत्पाद, पृष्ठभूमि में घुला हुआ क्रोम
Sociotype — सफेद कागज पर बना एक विशिष्ट संग्रहालय नमूना
Arc — आधी रात के पानी के ऊपर औद्योगिक सफेद गैलरी
Rivian — गैलरी की कंक्रीट की दीवार पर एक विद्युतीय विशालकाय संरचना। रिवियन प्रत्येक वाहन को एक विशाल सफेद स्थान के समक्ष एक मूर्ति के रूप में प्रस्तुत करते हैं, जिसमें टाइपोग्राफी इतनी बड़ी है कि वह एक वास्तुशिल्पीय तत्व बन जाती है, और एक गर्म पीला रंग एकरस वातावरण को तोड़ता है, जैसे किसी मैट सतह पर सूर्य की रोशनी।