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— સક્રિય નેવિગેશન પૃષ્ઠભૂમિ, સહેજ બેકલાઇટ અસર.
ટાઇપોગ્રાફી
૧૧ થી ૨૪ પિક્સેલ સુધી · ૪ પગલાં
- SpotifyMixUI — રિપ્લેસમેન્ટ: Inter · રૂપરેખા 400, 600, 700 · બોડી કોપી, નેવિગેશન, બટનો, મેટાડેટા, નાના કૅપ્શન્સ—એક કોમ્પેક્ટ, માહિતીથી ભરપૂર ડિઝાઇન જે સૂક્ષ્મ રીતે ડિઝાઇન કરવામાં આવી છે, જે કલાત્મક તત્વોને પ્રભુત્વ આપવા દે છે.
- SpotifyMixUITitle — રિપ્લેસમેન્ટ: Inter weight 700 · રૂપરેખા 700 · વિભાગના શીર્ષકો ("લોકપ્રિય ગીતો," "લોકપ્રિય કલાકારો") - એક બોલ્ડ, મધ્યમ કદના ફોન્ટ કાર્ડ ગ્રીડને ઓવરલોડ કર્યા વિના શીર્ષકોને અલગ પાડે છે.
અંતરાલો અને સ્વરૂપ
| હેતુ | અર્થ |
|---|---|
| ઘનતા | ગાઢ |
| મૂળભૂત પગલું | 8-12px |
| બટન ત્રિજ્યા | 9999px |
| કાર્ડ ત્રિજ્યા | 6px |
| પડછાયાઓ | ન્યૂનતમ |
| વિભાગો વચ્ચે | 32-48px |
AI તમારી વેબસાઇટ Spotify શૈલીમાં બનાવશે અને તેને ભરી દેશે.
- લિંક દ્વારા ઉત્પાદનો અને પોસ્ટ્સ ભરો - Instagram, TikTok, Facebook.
- તમારી જૂની સાઇટ પરથી સામગ્રી ટ્રાન્સફર કરો—ફક્ત સરનામું સ્પષ્ટ કરો.
- શ્રેષ્ઠ એન્જિન પર આધુનિક ડિઝાઇન: સર્વર રેન્ડરિંગ અને SEO ઑપ્ટિમાઇઝેશન સાથે React ( Next.js).
- શોધ પરિણામો અને ન્યુરલ નેટવર્ક ભલામણો માટે સંપૂર્ણપણે સ્વચાલિત SEO ઑપ્ટિમાઇઝેશન.
સમાન શૈલીઓ
- Resend — જાંબલી નિયોન રંગ સાથે કાળો મખમલ
- Neon — અંધારા પછી સર્વર રૂમ. શુદ્ધ અંધકાર, જ્યાં એકમાત્ર પ્રકાશ ડેટા અને વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓમાંથી આવે છે.
- Discord — રમતની દુનિયા પોપ-અપ ચેટ વિન્ડો પાછળ છુપાયેલી છે - દરેક વિભાગ એક સ્વયં-સમાયેલ વાતાવરણ છે જેમાં તેની પોતાની લાઇટિંગ અને પાત્રોનો સમૂહ છે.
- Idle Finance — ઊંડા સમુદ્રી ટર્મિનલ્સનું નિયોન ટ્રેડિંગ ફ્લોર એક ઘેરો નૌકાદળ ટર્મિનલ છે જ્યાં એક જ વાદળી પ્રકાશ અંધકારને વીંધે છે.
- Midjourney — ઊંડા સમુદ્રમાં એક બાયોલ્યુમિનેસેન્ટ ટર્મિનલ. ઊંડા સમુદ્રની દુનિયા જ્યાં બુદ્ધિ ASCII સ્ટ્રીમ્સમાં દૃષ્ટિની રીતે પોતાને ઉત્પન્ન કરે છે, અને નિયંત્રણો આછા ચમકતા પેટર્ન તરીકે દેખાય છે.
- Netflix — અનંત ડિજિટલ શેલ્ફ. એક સિનેમેટિક અનુભવ જ્યાં કાળા, થિયેટર પૃષ્ઠભૂમિ સામે સામગ્રીની અનંત લાઇબ્રેરી રજૂ કરવામાં આવે છે.
- Wope — વોપ એ જાંબલી ક્ષિતિજ ઇન્ટરફેસ છે. કાચની નીચેથી જાંબલી પ્રકાશ આવતા ઘેરા વેધશાળાના ટેબલની કલ્પના કરો.
- basement — સવારે ૩ વાગ્યે ખાલી પ્રિન્ટિંગ પ્રેસ - કાળા રંગમાં વિશાળ, સંકુચિત ફોન્ટ્સ ફેલાયેલા, નેવિગેશન બાર પર નારંગી પ્રકાશનો એક ઝાંખો, બાકીનું બધું સફેદ કે ભૂરા રંગનું.
- Ori — મધ્યરાત્રિએ સર્વર રૂમમાં કાળો ખાલીપો, સફેદ પ્રકાશ, એક સ્વીચ ચાલુ.
- Amaterasu — આકાશી પીરોજ અભયારણ્ય
- Stink Studios — મધ્યરાત્રિએ એક ફિલ્મ સ્ટુડિયો - પ્રોજેક્ટર વાગે છે, ઓરડો અંધારું છે, ફક્ત ફિલ્મ જ પ્રકાશિત છે
- Obsidian — સ્ફટિકીય જ્ઞાનનો ભંડાર. સ્પષ્ટતા અને ધ્યાન કેન્દ્રિત કરવા માટે રચાયેલ એક સ્પષ્ટ, બહુપક્ષીય ડિજિટલ જગ્યા, જેમાં ક્રિયાપ્રતિક્રિયાની તેજસ્વી જાંબલી નસો છે.