
Spotify
रात्रीच्या ज्यूकबॉक्स नियंत्रण कक्ष
स्पॉटिफायचा वेब इंटरफेस हे एक दाट, गडद मीडिया कंट्रोल सेंटर आहे: जवळजवळ काळ्या रंगाचा कॅनव्हास, ज्यावर आकर्षक अल्बम आर्ट, एक खास हिरवा रंग आणि गोळीच्या आकाराची नियंत्रणे आहेत. टायपोग्राफी संक्षिप्त आणि उपयुक्त आहे—एक खास डिझाइन केलेला लहान आकाराचा भौमितिक सॅन्स-सेरिफ फॉन्ट, ज्यामुळे अल्बम आर्ट आणि कलाकारांचे फोटोच बहुतेक दृश्यात्मक काम करतात. लेआउट हा एक निश्चित दोन-स्तंभीय शेल (साइडबार + मुख्य फीड) आहे, ज्यामध्ये चौरस अल्बम आर्ट आणि गोल अवतारांची एक ग्रिड आहे, ज्यामुळे भौमितिक प्रकारांची लयबद्ध अदलाबदल होते. इंटरफेस उंचीमधील तीव्र बदल टाळतो आणि ऊर्जेसाठी सूक्ष्म पृष्ठभागीय फरकांवर (#000000 कॅनव्हासवर #121212 कार्ड्स) आणि एका मोठ्या ग्रेडियंट बॅनरवर अवलंबून असतो. याचा परिणाम म्हणजे डीजे बूथसारखा अनुभव: माहितीने दाट, ध्वनीच्या बाबतीत गडद आणि एका दृष्टिक्षेपात वाजवण्यासाठी तयार.
एका निश्चित दोन-स्तंभीय मांडणीमध्ये डावीकडे एक साइडबार ("तुमची लायब्ररी") आणि एक प्रतिसादात्मक मुख्य सामग्री क्षेत्र आहे. सर्वात वरचा बार हा पूर्ण-रुंदीचा काळा बार असून, त्याच्या डावीकडे शोध आणि उजवीकडे खात्याच्या क्रिया आहेत. मुख्य सामग्री उभ्या दिशेने स्क्रोल होते, आणि त्यासोबत कार्ड्सचे आडवे कॅरोसेल आहेत—५-स्तंभीय चौरस ग्रिडमध्ये लोकप्रिय गाणी, ५-स्तंभीय वर्तुळाकार ग्रिडमध्ये लोकप्रिय कलाकार, आणि याच क्रमाने लोकप्रिय अल्बम/सिंगल्स. विभागांमधील अंतर कमी (३२ सेमी) आहे. सर्वात खालचे जाहिरात बॅनर व्ह्यूपोर्टच्या तळाशी स्थिर केलेले आहे. नेव्हिगेशन केवळ वरच्या बार आणि साइडबारद्वारे हाताळले जाते—कोणतेही मेगा-मेनू किंवा ब्रेडक्रम्ब्स नाहीत. लय एकाआड एक बदलते: चौरस कार्ड्स → गोल कार्ड्स → चौरस कार्ड्स, ज्यामुळे विभागांमध्ये भौमितिक विरोधाभास निर्माण होतो.
अल्बम कव्हर्स आणि कलाकारांचे फोटो ही मुख्य दृश्य सामग्री आहे. कव्हर्स ६ पिक्सेल त्रिज्येच्या (१:१ गुणोत्तर) दाट चौरस तुकड्यांच्या स्वरूपात सादर केले आहेत—जे संपादकीय दिसण्याइतके सुस्पष्ट आणि तरीही समकालीन वाटण्याइतके मृदू आहेत. कलाकारांचे फोटो गोलाकार तुकड्यांच्या स्वरूपात आहेत, जे ओळख म्हणून चेहऱ्यावर जोर देतात. मुख्य इंटरफेस सजावटीचे फोटो, जीवनशैलीची चित्रे किंवा अमूर्त ग्राफिक्सपासून मुक्त आहे. एकमेव गैर-छायाचित्रात्मक दृश्य घटक म्हणजे तळाशी असलेला जांभळ्यापासून निळ्या रंगापर्यंतचा ग्रेडियंट बॅनर, जो ब्रँडच्या रंगाचा एकमेव घटक म्हणून काम करतो. आयकॉन्स किमानवादी, एकरेषीय, गडद पार्श्वभूमीवर पांढरे आहेत—लहान आणि कार्यात्मक, कधीही सजावटीचे नाहीत.
पॅलेट
ब्रँड
- Spotify Green
#1ed760— हिरव्या रंगाचा वापर सजावटीच्या तपशिलांसाठी दुय्यम रंग म्हणून आणि क्वचित वापरल्या जाणाऱ्या शोध प्रश्नांना (सर्च क्वेरीज) ठळक करण्यासाठी केला जातो. कृतीसाठी आवाहन (कॉल टू ॲक्शन) करण्याकरिता तो मुख्य रंग म्हणून वापरला जाऊ नये.
तटस्थ
- Pure White
#ffffff— एक सहज पार्श्वभूमी तयार करण्यासाठी आणि विभाग वेगळे करण्यासाठी वापरला जाणारा हलका आधारभूत पृष्ठभाग. याचा वापर 'कॉल टू ॲक्शन'साठी मुख्य रंग म्हणून करू नये. - Signal Red
#b85850— लाल रंग सजावटीच्या तपशिलांना पूरक रंग म्हणून आणि दुर्मिळ रंगांना उठाव देण्यासाठी वापरला जातो. त्याचा वापर पूरक रंग म्हणून करा, प्रतिष्ठेचा रंग म्हणून नव्हे. - Void Black
#000000— पृष्ठ कॅनव्हास, शीर्ष नेव्हिगेशन पार्श्वभूमी, सर्वात खोल पृष्ठभाग थर - Carbon
#121212— पुठ्ठ्याचे पृष्ठभाग, बाजूचे पॅनेल, कॅनव्हासवरील दुय्यम पृष्ठभागाचा थर - Graphite
#1f1f1f— उंचवलेला पृष्ठभाग - होव्हरची स्थिती, इनपुट फील्ड, निवडलेले नॅव्हिगेशन घटक. - Smoke
#292929— सक्रिय नॅव्हिगेशन पार्श्वभूमी, मंद बॅकलाइट प्रभाव.
टायपोग्राफी
११ ते २४ पिक्सेल · ४ टप्पे
- 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 — वोप (Wope) हा एक जांभळ्या क्षितिजाचा इंटरफेस आहे. कल्पना करा की एका अंधाऱ्या वेधशाळेच्या टेबलाच्या काचेखालून जांभळा प्रकाश बाहेर पडत आहे.
- basement — पहाटे ३ वाजता एक रिकामं छापखाना – काळोखात पसरलेले प्रचंड, दाटीवाटीचे फॉन्ट, नॅव्हिगेशन बारवर नारंगी प्रकाशाची एक पुसटशी झलक, बाकी सर्व काही पांढरं किंवा धूसर राखाडी.
- Ori — मध्यरात्री सर्व्हर रूम म्हणजे एक काळी पोकळी, पांढरा प्रकाश आणि फक्त एकच स्विच चालू.
- Amaterasu — स्वर्गीय फिरोजी अभयारण्य
- Stink Studios — मध्यरात्रीचा एक फिल्म स्टुडिओ - प्रोजेक्टरचा गुणगुणणारा आवाज, खोलीत अंधार, फक्त फिल्मचाच प्रकाश.
- Obsidian — स्फटिकासारख्या शुद्ध ज्ञानाचा खजिना. स्पष्टता आणि एकाग्रतेसाठी तयार केलेली एक सुस्पष्ट, बहुआयामी डिजिटल जागा, जिथे परस्परसंवादाच्या तेजस्वी जांभळ्या रेषा आहेत.