
Spotify
नाइट ज्यूकबॉक्स कंट्रोल रूम
Spotify का वेब इंटरफ़ेस एक सघन, गहरे रंग का मीडिया कंट्रोल सेंटर है: लगभग काले रंग का कैनवास जिस पर आकर्षक एल्बम आर्ट, एक खास हरा रंग और पिल के आकार के कंट्रोल्स हैं। टाइपोग्राफी संक्षिप्त और उपयोगी है—एक कस्टम-डिज़ाइन किया गया ज्योमेट्रिक सैन्स-सेरिफ़ फ़ॉन्ट छोटे आकार में है, जिससे एल्बम आर्ट और कलाकारों की तस्वीरें ही मुख्य दृश्य प्रभाव डालती हैं। लेआउट एक निश्चित दो-कॉलम वाला शेल (साइडबार + मुख्य फ़ीड) है जिसमें वर्गाकार एल्बम आर्ट और गोल अवतारों का ग्रिड है, जो ज्योमेट्रिक टाइप का एक लयबद्ध बदलाव बनाता है। इंटरफ़ेस ऊंचाई में अचानक बदलाव से बचता है, सूक्ष्म सतह भेदों (#000000 कैनवास पर #121212 कार्ड) और ऊर्जा के लिए एक बड़े ग्रेडिएंट बैनर पर निर्भर करता है। इसका परिणाम एक डीजे बूथ जैसा अनुभव है: जानकारी से भरपूर, ध्वनि के लिहाज़ से गहरा और एक नज़र में ही प्ले करने के लिए तैयार।
एक निश्चित दो-कॉलम लेआउट में बाईं ओर एक साइडबार ("आपकी लाइब्रेरी") और एक रिस्पॉन्सिव मुख्य कंटेंट एरिया है। टॉप बार पूरी चौड़ाई वाली काली पट्टी है, जिसके बाईं ओर सर्च और दाईं ओर अकाउंट संबंधी विकल्प हैं। मुख्य कंटेंट वर्टिकल रूप से स्क्रॉल होता है, और कार्ड्स के हॉरिजॉन्टल कैरोसेल भी हैं—5-कॉलम वर्गाकार ग्रिड में लोकप्रिय गाने, 5-कॉलम वृत्ताकार ग्रिड में लोकप्रिय कलाकार, और इसी पैटर्न को जारी रखते हुए लोकप्रिय एल्बम/सिंगल्स। सेक्शन के बीच की दूरी कम (32 सेमी) है। नीचे का विज्ञापन बैनर व्यूपोर्ट के निचले हिस्से में स्थित है। नेविगेशन केवल टॉप बार और साइडबार के माध्यम से होता है—कोई मेगा-मेनू या ब्रेडक्रम्ब्स नहीं हैं। कार्ड्स का क्रम बदलता रहता है: वर्गाकार कार्ड → गोल कार्ड → वर्गाकार कार्ड, जिससे सेक्शन के बीच ज्यामितीय कंट्रास्ट बनता है।
एल्बम कवर और कलाकारों की तस्वीरें मुख्य दृश्य सामग्री हैं। कवर को 6px त्रिज्या वाले सघन वर्गाकार टुकड़ों (1:1 आस्पेक्ट रेशियो) के रूप में प्रस्तुत किया गया है—जो संपादकीय दिखने के लिए पर्याप्त रूप से स्पष्ट हैं, फिर भी समकालीन होने के लिए पर्याप्त रूप से सौम्य हैं। कलाकारों की तस्वीरें गोल टुकड़ों के रूप में हैं, जो चेहरे को एक पहचान के रूप में प्रमुखता देती हैं। मुख्य इंटरफ़ेस सजावटी तस्वीरों, जीवनशैली छवियों या अमूर्त ग्राफिक्स से मुक्त है। एकमात्र गैर-फोटोग्राफिक दृश्य तत्व नीचे की ओर बैंगनी से नीले रंग का ग्रेडिएंट बैनर है, जो ब्रांड रंग का एकमात्र तत्व है। आइकन न्यूनतम, मोनोलाइनर, गहरे रंग की पृष्ठभूमि पर सफेद रंग के हैं—छोटे और कार्यात्मक, कभी भी सजावटी नहीं।
पैलेट
ब्रांड
- Spotify Green
#1ed760— हरे रंग का उपयोग सजावटी विवरणों के लिए द्वितीयक संकेत के रूप में और कम उपयोग होने वाले खोज प्रश्नों को उजागर करने के लिए किया जाता है। इसे कॉल टू एक्शन के लिए प्राथमिक रंग के रूप में उपयोग नहीं किया जाना चाहिए।
तटस्थ
- Pure White
#ffffff— यह एक हल्की सहायक सतह है जिसका उपयोग एक सहज पृष्ठभूमि बनाने और अनुभागों को अलग करने के लिए किया जाता है। इसे कॉल टू एक्शन के प्राथमिक रंग के रूप में उपयोग नहीं किया जाना चाहिए। - Signal Red
#b85850— लाल रंग सजावटी विवरणों के लिए एक सहायक रंग के रूप में और असामान्य रंगों को उभारने के लिए उपयुक्त है। इसे एक सहायक रंग के रूप में प्रयोग करें, न कि प्रतिष्ठा के प्रतीक के रूप में। - Void Black
#000000— पेज कैनवास, शीर्ष नेविगेशन पृष्ठभूमि, सबसे गहरी सतह परत - Carbon
#121212— कार्डबोर्ड की सतहें, साइड पैनल, कैनवास के ऊपर द्वितीयक सतह परत - Graphite
#1f1f1f— उभरी हुई सतह - होवर अवस्थाएँ, इनपुट फ़ील्ड, चयनित नेविगेशन तत्व। - Smoke
#292929— सक्रिय नेविगेशन पृष्ठभूमि, हल्का बैकलाइट प्रभाव।
टाइपोग्राफी
11 से 24px तक · 4 चरण
- SpotifyMixUI — प्रतिस्थापन: Inter · रूपरेखा 400, 600, 700 · बॉडी टेक्स्ट, नेविगेशन, बटन, मेटाडेटा, छोटे कैप्शन—एक कॉम्पैक्ट, सूचना-समृद्ध डिज़ाइन जिसे सूक्ष्मता से डिज़ाइन किया गया है, ताकि कलाकृति हावी हो सके।
- SpotifyMixUITitle — प्रतिस्थापन: Inter weight 700 · रूपरेखा 700 · अनुभाग शीर्षक ("लोकप्रिय गीत," "लोकप्रिय कलाकार") - एक बोल्ड, मध्यम आकार का फ़ॉन्ट शीर्षकों को कार्ड ग्रिड को ओवरलोड किए बिना अलग से दिखाता है।
अंतराल और रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | घना |
| बुनियादी कदम | 8-12px |
| बटन त्रिज्या | 9999px |
| कार्ड त्रिज्या | 6px |
| छैया छैया | न्यूनतम |
| अनुभागों के बीच | 32-48px |
एआई आपकी वेबसाइट को Spotify शैली में बनाएगा और उसमें डेटा भरेगा।
- इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
- अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
- सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
- खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।
समान शैलियाँ
- Resend — काले मखमली कपड़े पर बैंगनी नियॉन रंग
- Neon — अंधेरा होने के बाद एक सर्वर रूम। घोर अंधेरा, जहाँ एकमात्र रोशनी डेटा और उपयोगकर्ता की बातचीत से आती है।
- Discord — गेम की दुनिया एक पॉप-अप चैट विंडो के पीछे छिपी हुई है - प्रत्येक भाग अपने आप में एक अलग वातावरण है जिसमें अपनी अलग रोशनी और पात्रों का समूह है।
- Idle Finance — गहरे समुद्र के टर्मिनलों का नियॉन रोशनी से जगमगाता ट्रेडिंग फ्लोर एक अंधेरा नौसैनिक टर्मिनल है जहां एक अकेली नीली रोशनी अंधकार को चीरती है।
- Midjourney — गहरे समुद्र में एक जैव-प्रकाशित टर्मिनल। एक ऐसी गहरी समुद्री दुनिया जहाँ बुद्धिमत्ता स्वयं को ASCII स्ट्रीम में दृश्य रूप से उत्पन्न करती है, और नियंत्रण धुंधली चमकती आकृतियों के रूप में दिखाई देते हैं।
- Netflix — अनंत डिजिटल शेल्फ। एक सिनेमाई अनुभव जहां एक अंतहीन सामग्री पुस्तकालय को घोर अंधेरे, नाटकीय पृष्ठभूमि के सामने प्रस्तुत किया जाता है।
- Wope — वोप एक बैंगनी क्षितिज इंटरफ़ेस है। कल्पना कीजिए एक अंधेरी वेधशाला की मेज, जिसके कांच के नीचे से बैंगनी रोशनी निकल रही हो।
- basement — सुबह के 3 बजे एक खाली प्रिंटिंग प्रेस - घोर अंधेरे में फैले विशाल, संकुचित फ़ॉन्ट, नेविगेशन बार पर नारंगी रोशनी की एक हल्की सी चमक, बाकी सब कुछ सफेद या भूतिया धूसर रंग का।
- Ori — आधी रात को सर्वर रूम एक काला शून्य होता है, सफेद रोशनी होती है, और बस एक स्विच ऑन होता है।
- Amaterasu — आकाशीय फ़िरोज़ा अभयारण्य
- Stink Studios — आधी रात को एक फिल्म स्टूडियो - प्रोजेक्टर की हल्की आवाज़, कमरा अंधेरा, केवल फिल्म ही रोशन है
- Obsidian — क्रिस्टलीय ज्ञान का भंडार। स्पष्टता और एकाग्रता के लिए डिज़ाइन किया गया एक स्पष्ट, बहुआयामी डिजिटल स्थान, जिसमें अंतःक्रिया की चमकदार बैंगनी नसें हैं।