
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 |
AI നിങ്ങളുടെ വെബ്സൈറ്റ് Spotify ശൈലിയിൽ നിർമ്മിച്ച് അത് പൂരിപ്പിക്കും.
- Instagram, TikTok, Facebook ലിങ്കുകൾ വഴി ഉൽപ്പന്നങ്ങളും പോസ്റ്റുകളും പൂരിപ്പിക്കുക.
- നിങ്ങളുടെ പഴയ സൈറ്റിൽ നിന്ന് ഉള്ളടക്കം കൈമാറുക—വിലാസം മാത്രം വ്യക്തമാക്കുക.
- മികച്ച എഞ്ചിനിൽ ആധുനിക ഡിസൈൻ: സെർവർ റെൻഡറിംഗും SEO ഒപ്റ്റിമൈസേഷനും ഉള്ള React ( Next.js).
- തിരയൽ ഫലങ്ങൾക്കും ന്യൂറൽ നെറ്റ്വർക്ക് ശുപാർശകൾക്കുമായി പൂർണ്ണമായും ഓട്ടോമേറ്റഡ് SEO ഒപ്റ്റിമൈസേഷൻ.
സമാനമായ ശൈലികൾ
- Resend — പർപ്പിൾ നിയോൺ നിറമുള്ള കറുത്ത വെൽവെറ്റ്
- Neon — ഇരുട്ടിന് ശേഷം ഒരു സെർവർ റൂം. ഡാറ്റയിൽ നിന്നും ഉപയോക്തൃ ഇടപെടലുകളിൽ നിന്നും മാത്രം വെളിച്ചം വരുന്ന ഇരുട്ട്.
- Discord — ഗെയിം ലോകം ഒരു പോപ്പ്-അപ്പ് ചാറ്റ് വിൻഡോയ്ക്ക് പിന്നിൽ മറഞ്ഞിരിക്കുന്നു - ഓരോ വിഭാഗവും അതിന്റേതായ ലൈറ്റിംഗും കഥാപാത്രങ്ങളുടെ കൂട്ടവും ഉള്ള ഒരു സ്വയംപര്യാപ്തമായ പരിസ്ഥിതിയാണ്.
- Idle Finance — ആഴക്കടൽ ടെർമിനലുകളുടെ നിയോൺ വ്യാപാര നിലം ഒരു ഇരുണ്ട നാവിക ടെർമിനലാണ്, അവിടെ ഒരു നീല വെളിച്ചം ഇരുട്ടിനെ തുളച്ചുകയറുന്നു.
- Midjourney — ആഴക്കടലിലെ ഒരു ബയോലുമിനസെന്റ് ടെർമിനൽ. ASCII പ്രവാഹങ്ങളിൽ ബുദ്ധിശക്തി ദൃശ്യപരമായി സ്വയം സൃഷ്ടിക്കപ്പെടുകയും നിയന്ത്രണങ്ങൾ മങ്ങിയ തിളക്കമുള്ള പാറ്റേണുകളായി ദൃശ്യമാകുകയും ചെയ്യുന്ന ഒരു ആഴക്കടൽ ലോകം.
- Netflix — ഇൻഫിനിറ്റ് ഡിജിറ്റൽ ഷെൽഫ്. ഇരുണ്ട, നാടക പശ്ചാത്തലത്തിൽ അനന്തമായ ഉള്ളടക്കത്തിന്റെ ഒരു ലൈബ്രറി അവതരിപ്പിക്കുന്ന ഒരു സിനിമാറ്റിക് അനുഭവം.
- Wope — വോപ്പ് ഒരു പർപ്പിൾ ചക്രവാള ഇന്റർഫേസാണ്. ഗ്ലാസിന് താഴെ നിന്ന് പർപ്പിൾ വെളിച്ചം വരുന്ന ഒരു ഇരുണ്ട നിരീക്ഷണ മേശ സങ്കൽപ്പിക്കുക.
- basement — പുലർച്ചെ 3 മണിക്ക് ഒരു ഒഴിഞ്ഞ പ്രിന്റിംഗ് പ്രസ്സ് - കറുത്ത നിറത്തിൽ ചിതറിക്കിടക്കുന്ന വലിയ, കംപ്രസ് ചെയ്ത ഫോണ്ടുകൾ, നാവിഗേഷൻ ബാറിൽ ഓറഞ്ച് വെളിച്ചത്തിന്റെ ഒരു തിളക്കം, ബാക്കിയെല്ലാം വെള്ളയോ പ്രേത ചാരനിറമോ.
- Ori — അർദ്ധരാത്രിയിലെ സെർവർ മുറിയിൽ കറുത്ത ശൂന്യത, വെളുത്ത വെളിച്ചം, ഒരു സ്വിച്ച് ഓൺ.
- Amaterasu — സെലസ്റ്റിയൽ ടർക്കോയ്സ് സങ്കേതം
- Stink Studios — അർദ്ധരാത്രിയിൽ ഒരു ഫിലിം സ്റ്റുഡിയോ - പ്രൊജക്ടർ മൂളുന്നു, മുറി ഇരുട്ടാണ്, ഫിലിം മാത്രം പ്രകാശിക്കുന്നു.
- Obsidian — സ്ഫടികരൂപത്തിലുള്ള അറിവിന്റെ ഒരു കലവറ. വ്യക്തതയ്ക്കും ശ്രദ്ധയ്ക്കും വേണ്ടി രൂപകൽപ്പന ചെയ്തിരിക്കുന്ന വ്യക്തവും ബഹുമുഖവുമായ ഡിജിറ്റൽ ഇടം, തിളക്കമുള്ള പർപ്പിൾ നിറത്തിലുള്ള ഇടപെടലുകൾക്കൊപ്പം.