Nike
खेल उपलब्धियों की एक मोनोक्रोम गैलरी – सफेद दीवारें, कलाकृति के रूप में उत्पाद, पृष्ठभूमि में घुला हुआ क्रोम
Nike.com एक मोनोक्रोम, प्रोडक्ट-केंद्रित गैलरी के रूप में काम करता है: इसका यूजर इंटरफेस लगभग अदृश्य है, जिससे प्रोडक्ट की तस्वीरें हर स्क्रीन पर दिखाई देती हैं। पूरा इंटरफेस काले, सफेद और तीन तरह के ग्रे रंगों से बना है—इसमें कोई एक्सेंट कलर, सजावटी ग्रेडिएंट या क्रोम का इस्तेमाल नहीं किया गया है। Nike की सिग्नेचर स्टाइल गैलरी के लोगो और तस्वीरों में झलकती है, लेकिन यूजर इंटरफेस में नहीं। टाइपोग्राफी संक्षिप्त और उपयोगी है, जिसमें 12-20px के कस्टम-डिज़ाइन किए गए Helvetica Now फॉन्ट परिवार का उपयोग किया गया है, और हेडिंग के लिए 76px का एक बड़ा Nike Futura ND लोगो है। कंपोनेंट्स न्यूनतम हैं: 30px त्रिज्या वाले पिल-आकार के बटन, फ्लैट प्रोडक्ट कार्ड, पतले बॉर्डर और ऊंचाई में लगभग कोई अंतर नहीं। पेज पर सफेद रंग के प्रोडक्ट सेक्शन और आकर्षक, गहरे रंग के संपादकीय सेक्शन बारी-बारी से दिखाई देते हैं, जिससे सजावट के बजाय कंट्रास्ट के माध्यम से लय बनती है।
यह पेज एक सशक्त संपादकीय लय का अनुसरण करता है: एक आकर्षक, पूर्ण-चौड़ाई वाला, गहरे रंग का हेडर जिसमें एक उत्पाद और एक बड़ा शीर्षक है, उसके बाद पूर्ण-चौड़ाई वाला, 2x2 श्रेणी ग्रिड, 3 कॉलम में उत्पाद कार्डों का क्षैतिज रूप से स्क्रॉल करने वाला ग्रिड, और अंत में एक सघन, बहु-स्तंभ वाला फ़ूटर। सभी सामग्री ब्लॉक पूर्ण व्यूपोर्ट चौड़ाई में फैले हुए हैं, कंटेनर की अधिकतम चौड़ाई की कोई सीमा नहीं है; अधिकतम चौड़ाई की सीमा केवल नेविगेशन और फ़ूटर लिंक ग्रिड पर लागू होती है। अनुभागों के बीच संक्रमण स्पष्ट हैं: काला हेडर → सफेद श्रेणी ग्रिड → सफेद उत्पाद ग्रिड → सफेद फ़ूटर, जिसमें पतली ग्रे बॉर्डर एकमात्र दृश्य सीम का काम करती है। नेविगेशन एक न्यूनतम, दो-स्तरीय बार है (सहायक लिंक शीर्ष पर, प्राथमिक श्रेणियां केंद्र में) जिसमें कोई पिनिंग, कोई बैकग्राउंड फिल और कोई शैडो नहीं है। उत्पाद ग्रिड में सामग्री घनत्व सघन है (कार्डों के बीच कम दूरी) और हेडर में विशाल है (पूर्ण-चौड़ाई वाला व्यूपोर्ट)।
फोटोग्राफी प्रमुख दृश्य तत्व है और ब्रांड की संपूर्ण पहचान को परिभाषित करती है। सिस्टम में उच्च-गुणवत्ता वाली, फुल-फ्रेम उत्पाद तस्वीरों का उपयोग किया जाता है: एथलेटिक जूतों की तस्वीरें अलग-अलग गहरे या ग्रेडिएंट बैकग्राउंड के सामने खींची जाती हैं, जिन्हें फ्रेम में फिट करने के लिए क्रॉप किया जाता है, बिना किसी लाइफस्टाइल संदर्भ के। लाइफस्टाइल छवियां श्रेणियों के भीतर दिखाई देती हैं, जिनमें गतिमान एथलीटों के पैर और टांगें प्रदर्शित होती हैं। उच्च-कंट्रास्ट, संतृप्त रंग योजना का उपयोग किया जाता है—काले बैकग्राउंड पर लाल जूते, सफेद तलवों पर नियॉन एक्सेंट, और सामग्री को नाटकीय रूप देने के लिए गर्म और ठंडी रोशनी का उपयोग। किसी भी प्रकार के चित्र, अमूर्त ग्राफिक्स या 3डी रेंडरिंग का उपयोग नहीं किया जाता है। छवियों के किनारे हमेशा स्पष्ट होते हैं (फोटो कंटेनरों में कोई गोल कोने नहीं होते), वे हमेशा अपने ब्लॉक के भीतर पूरी जगह घेरती हैं, और हमेशा न्यूनतम टेक्स्ट ओवरले के साथ होती हैं। आइकनोग्राफी पूरी तरह से कार्यात्मक है: खोज, विशलिस्ट, कार्ट और खाते के लिए आउटलाइन आइकन ओब्सीडियन या स्टील रंगों में।
पैलेट
तटस्थ
- Obsidian
#111111— गहरे रंग तटस्थ टेक्स्ट और आइकनों के पूरक होते हैं और एक मजबूत कंट्रास्ट बनाते हैं। इसे कॉल टू एक्शन के लिए प्राथमिक रंग के रूप में उपयोग करने से बचें। - Paper White
#ffffff— पेज बैकग्राउंड, कार्ड की सतह, गहरे रंग की पृष्ठभूमि पर बटन का टेक्स्ट, आइकन की आउटलाइन—उत्पाद ग्रिड और श्रेणी अनुभागों के लिए डिफ़ॉल्ट कैनवास। - Concrete Gray
#e5e5e5— बॉर्डर, विभाजक, ग्रिड सेक्शन को अलग करने वाली पतली रेखाएं, इनपुट फ़ील्ड की सूक्ष्म रूपरेखा। - Soft Mist
#f5f5f5— द्वितीयक सतहों के लिए सूक्ष्म पृष्ठभूमि रंग, नेविगेशन में खोज फ़ील्ड भरना, टैग पृष्ठभूमि। - Steel
#707072— द्वितीयक पाठ, म्यूटेड हेल्पर टेक्स्ट, कम किए गए आइकन आउटलाइन, ब्रेडक्रम्ब लेबल, फुटर लिंक विभाजक। - Faint Gray
#9e9ea0— आइकन की रूपरेखा, छोटे यूआई तत्व और न्यूनतम हाइलाइटिंग वाले बॉर्डर अक्षम कर दिए गए हैं।
टाइपोग्राफी
12 से 76px तक · 6 चरण
- Helvetica Now Text Medium — प्रतिस्थापन: Inter · रूपरेखा 500 · हेलवेटिका नाउ टेक्स्ट मीडियम फॉन्ट - स्क्रैप किए गए डेटा में पाया गया लेकिन एआई द्वारा इसका वर्णन नहीं किया गया।
- Helvetica Now Text — प्रतिस्थापन: Inter or Helvetica Neue · रूपरेखा 400, 500 · उपयोगकर्ता इंटरफ़ेस का मुख्य पाठ - नेविगेशन लिंक, बटन लेबल, कार्ड शीर्षक, उत्पाद नाम, फ़ूटर सूची, सभी बॉडी टेक्स्ट।
- Helvetica Now Display Medium — प्रतिस्थापन: Inter Medium or Helvetica Neue Medium · रूपरेखा 500 · सेक्शन हेडिंग, कार्ड कैटेगरी लेबल, मध्यम आकार की हेडिंग - मध्यम फॉन्ट (20-24px) नाइकी की उन हेडिंग की खासियत है जो बड़े डिजाइन एलिमेंट नहीं होते: कभी बोल्ड नहीं, हमेशा संक्षिप्त।
अंतराल और रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | घना |
| बुनियादी कदम | 8px |
| बटन त्रिज्या | 30px |
| कार्ड त्रिज्या | 0px |
| छैया छैया | नहीं - छाया के बजाय बॉर्डर |
| अनुभागों के बीच | 48px |
| पृष्ठ की चौड़ाई | 1440px |
एआई आपकी वेबसाइट को Nike शैली में बनाएगा और उसमें डेटा भरेगा।
- इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
- अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
- सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
- खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।
समान शैलियाँ
- Airbnb — एक शांत सफेद गैलरी की दीवार जिस पर एक मूंगा लाल रंग का बुकमार्क लगा है।
- Apple (España) — सफेद गैलरी डिस्प्ले केस
- Silencio — तैरती हुई कलाकृतियों से सजा एक सफेद कमरा। गर्म कागज से बना एक गैलरी डिस्प्ले, जहां प्रत्येक तत्व खालीपन की पृष्ठभूमि में अपनी जगह लेता है, और खामोशी एक जानबूझकर लिया गया डिजाइन निर्णय है।
- Oakâme — धूप से सराबोर प्रोवेंसल कार्यशाला, गर्म पत्थर से तराशी गई।
- Arc — आधी रात के पानी के ऊपर औद्योगिक सफेद गैलरी
- Rivian — गैलरी की कंक्रीट की दीवार पर एक विद्युतीय विशालकाय संरचना। रिवियन प्रत्येक वाहन को एक विशाल सफेद स्थान के समक्ष एक मूर्ति के रूप में प्रस्तुत करते हैं, जिसमें टाइपोग्राफी इतनी बड़ी है कि वह एक वास्तुशिल्पीय तत्व बन जाती है, और एक गर्म पीला रंग एकरस वातावरण को तोड़ता है, जैसे किसी मैट सतह पर सूर्य की रोशनी।
- Analogue — काले रंग का गैलरी डिस्प्ले केस – सामान हवा में तैर रहा है
- ddna — बिना उपचारित लिनन पर बना गर्म संग्रहालय डिस्प्ले केस
- Zellerfeld — सफेद संगमरमर पर बनी एक मूर्तिकार की कार्यशाला—चबूतरे की अखंड सतहें, कोबाल्ट की एक अकेली चमक, फर्श से छत तक फैले छोटे अक्षरों की हल्की सी आभा।
- UY Studio — मठ की पत्थर की गैलरी कंक्रीट की दीवारों वाला एक शांत स्थान है, जहां सफेद चबूतरे पर इत्र की बोतलें रखी हैं, जो एक 400 वाट के लैंप और चार गर्म भूरे रंग के बल्बों से रोशन हैं।
- Basic.Space — सफेद संगमरमर पर क्यूरेटोरियल गैलरी
- COS — सफेद दीवारों वाली एक ट्रेंडी गैलरी