Spotify
Kwarto sa pagkontrol sa jukebox sa gabii
Ang web interface sa Spotify usa ka dasok ug ngitngit nga sentro sa pagkontrol sa media: usa ka hapit itom nga canvas nga gidayandayanan og mahayag nga album art, usa ka signature green accent, ug mga kontrol nga porma og pildoras. Ang tipograpiya kay compact ug utilitarian—usa ka custom-designed nga geometric sans-serif typeface sa gamay nga gidak-on, nga nagtugot sa album art ug mga litrato sa artist nga mohimo sa kadaghanan sa biswal nga trabaho. Ang layout usa ka fixed two-column shell (sidebar + main feed) nga adunay grid sa square album art ug round avatars, nga nagmugna og rhythmic alternation sa geometric types. Ang interface naglikay sa mga kalit nga pagbag-o sa gitas-on, nga nagsalig sa gagmay nga mga kalainan sa ibabaw (#121212 cards sa usa ka #000000 canvas) ug usa ka dako nga gradient banner para sa enerhiya. Ang resulta usa ka pagbati sa usa ka DJ booth: dasok sa impormasyon, ngitngit sa tunog, ug andam nga patugtugon sa usa ka pagtan-aw.
Ang usa ka pirmi nga duha ka kolum nga layout adunay wala nga sidebar ("Imong Library") ug usa ka responsive nga main content area. Ang ibabaw nga bar usa ka full-width nga itom nga bar nga adunay search sa wala ug account actions sa tuo. Ang main content mo-scroll nga patindog, nga adunay pinahigda nga mga carousel sa mga kard—mga sikat nga kanta sa 5-kolum nga square grid, mga sikat nga artista sa 5-kolum nga circular grid, ug mga sikat nga album/single nga nagpadayon niini nga sumbanan. Ang gilay-on tali sa mga seksyon kay compact (32 cm). Ang ubos nga ad banner gi-angkla sa ubos sa viewport. Ang nabigasyon gidumala lamang pinaagi sa ibabaw nga bar ug sidebar—walay mega-menu o breadcrumbs. Ang ritmo nagpuli-puli: square cards → round cards → square cards, nga nagmugna og geometric contrast tali sa mga seksyon.
Ang mga hapin sa album ug mga litrato sa artista mao ang pangunang biswal nga sulod. Ang mga hapin gipresentar isip dasok nga kuwadrado nga mga tipik (1:1 aspect ratio) nga adunay 6px radius—igo nga klaro aron tan-awon nga editoryal apan igo nga humok aron mahimong kontemporaryo. Ang mga litrato sa artista mga lingin nga tipik, nga nagpasiugda sa nawong isip usa ka identifier. Ang pangunang interface walay mga pangdekorasyon nga litrato, mga imahe sa estilo sa kinabuhi, o abstract graphics. Ang bugtong dili-photographic nga elemento sa biswal mao ang usa ka purple-to-blue gradient banner sa ubos, nga nagsilbing bugtong elemento sa kolor sa brand. Ang mga icon minimalist, monolinear, puti sa usa ka ngitngit nga background—gamay ug magamit, dili gyud pangdekorasyon.
Paleta
Brand
- Spotify Green
#1ed760— Ang berde gigamit isip ikaduhang kolor para sa mga pangdekorasyon nga detalye ug para i-highlight ang mga search query nga dili kaayo kanunay gigamit. Dili kini angay gamiton isip pangunang kolor para sa mga call to action.
Neutral
- Pure White
#ffffff— Usa ka gaan nga nagsuporta nga nawong para sa paghimo og dili makahasol nga background ug pagbulag sa mga seksyon. Dili kini angay gamiton isip pangunang kolor para sa panawagan sa aksyon. - Signal Red
#b85850— Ang pula nagsilbing suportang accent para sa mga dekorasyon ug aron ipasiugda ang dili kasagaran nga mga kolor. Gamita kini isip suportang accent, dili isip kolor sa status. - Void Black
#000000— Kanbas sa panid, background sa ibabaw nga nabigasyon, pinakalawom nga layer sa nawong - Carbon
#121212— Mga karton nga nawong, mga panel sa kilid, ikaduhang layer sa nawong ibabaw sa canvas - Graphite
#1f1f1f— Gipataas nga nawong - mga estado sa pag-hover, mga input field, pinili nga mga elemento sa nabigasyon. - Smoke
#292929— Aktibong background sa nabigasyon, gamay nga epekto sa backlight.
Tipograpiya
gikan sa 11 ngadto sa 24px · 4 ka lakang
- SpotifyMixUI — kapuli: Inter · mga balangkas 400, 600, 700 · Body copy, nabigasyon, mga butones, metadata, gagmay nga mga caption—usa ka compact, puno sa impormasyon nga disenyo nga gidisenyo nga dili kaayo delikado, nga nagtugot sa mga artistikong elemento nga modominar.
- SpotifyMixUITitle — kapuli: Inter weight 700 · mga balangkas 700 · Mga ulohan sa seksyon ("Mga Popular nga Kanta," "Mga Popular nga Artista") - usa ka maisugon ug kasarangan nga gidak-on sa font ang naghimo sa mga ulohan nga talagsaon nga dili mapuno ang grid sa kard.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | dasok |
| Batakang lakang | 8-12px |
| Radius sa butones | 9999px |
| Radius sa kard | 6px |
| Mga anino | gamay ra |
| Taliwala sa mga seksyon | 32-48px |
Ang AI motukod sa imong website sa estilo sa Spotify ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- Resend — itom nga velvet nga adunay kolor nga neon nga purpura
- Neon — Usa ka server room kon gabii na. Kangitngit gyud, diin ang bugtong kahayag gikan sa datos ug interaksyon sa tiggamit.
- Discord — Ang kalibutan sa dula natago sa luyo sa usa ka pop-up chat window - ang matag seksyon usa ka kaugalingon nga sulud nga palibot nga adunay kaugalingon nga suga ug hugpong sa mga karakter
- Idle Finance — Ang neon trading floor sa mga terminal sa lawom nga dagat usa ka itom nga terminal sa barko diin ang usa ka asul nga kahayag mitusok sa kangitngit.
- Midjourney — Usa ka bioluminescent terminal sa lawom nga kadagatan. Usa ka kalibutan sa lawom nga kadagatan diin ang intelihensiya biswal nga nagmugna sa iyang kaugalingon sa mga ASCII stream, ug ang mga kontrol makita isip hinay nga nagdan-ag nga mga sumbanan.
- Netflix — Walay Kinutobang Digital Shelf. Usa ka kasinatian sa sinehan diin ang walay kinutuban nga librarya sa sulud gipresentar batok sa ngitngit nga talan-awon sa teatro.
- Wope — Ang Wope usa ka purpura nga kapunawpunawan. Handurawa ang usa ka ngitngit nga lamesa sa obserbatoryo nga adunay purpura nga kahayag nga nagsidlak gikan sa ilawom sa bildo.
- basement — Usa ka walay sulod nga imprenta sa alas 3 sa kaadlawon – dagko, gidip-ot nga mga font nga nagkatag sa ngitngit nga kangitngit, usa ka kidlap sa orange nga kahayag sa navigation bar, ang tanan puti o abohon nga daw multo.
- Ori — Ang server room sa tungang gabii kay itom nga haw-ang, puti nga suga, ug usa ra ka switch ang naka-on.
- Amaterasu — Langitnon nga Santuwaryo sa Turkesa
- Stink Studios — Usa ka studio sa pelikula sa tungang gabii - ang projector naghahum, ang kwarto ngitngit, ang pelikula ra ang nagsiga
- Obsidian — Usa ka tipiganan sa kristal nga kahibalo. Usa ka klaro, daghang aspeto nga digital nga wanang nga gidisenyo alang sa katin-aw ug pokus, nga adunay hayag nga purpura nga mga ugat sa interaksyon.