Spotify
Kamar kontrol jukebox wengi
Antarmuka web Spotify kuwi pusat kontrol media sing kandhel lan peteng: kanvas sing meh ireng dihiasi seni album sing cerah, aksen ijo khas siji, lan kontrol awujud pil. Tipografine ringkes lan utilitarian—tipografi sans-serif geometris sing dirancang khusus kanthi ukuran cilik, saengga seni album lan foto artis bisa nindakake sebagian besar karya visual. Tata letake yaiku cangkang rong kolom tetep (sidebar + feed utama) kanthi kothak seni album kothak lan avatar bunder, nggawe pergantian ritmis saka jinis geometris. Antarmuka kasebut ngindhari owah-owahan dhuwur sing tajem, gumantung ing bedane permukaan sing alus (kertu #121212 ing kanvas #000000) lan spanduk gradien gedhe siji kanggo energi. Asilé yaiku rasa kaya bilik DJ: padhet informasi, peteng akustik, lan siap diputer kanthi cepet.
Tata letak rong kolom tetep nduweni bilah sisi kiwa ("Perpustakaan Sampeyan") lan area konten utama sing responsif. Bilah ndhuwur minangka bilah ireng amba kanthi telusuran ing sisih kiwa lan tumindak akun ing sisih tengen. Konten utama nggulung kanthi vertikal, kanthi komidi putar horisontal kertu—lagu populer ing kothak kothak 5 kolom, artis populer ing kothak bunder 5 kolom, lan album/single populer nerusake pola iki. Jarak antarane bagean kompak (32 cm). Spanduk iklan ngisor ditancepake ing sisih ngisor viewport. Navigasi ditangani khusus liwat bilah ndhuwur lan bilah sisi—ora ana mega-menu utawa remah roti. Irama ganti-ganti: kertu kothak → kertu bunder → kertu kothak, nggawe kontras geometris antarane bagean.
Sampul album lan foto artis minangka konten visual utama. Sampul kasebut ditampilake minangka fragmen kothak sing padhet (rasio aspek 1:1) kanthi radius 6px—cukup cetha kanggo katon editorial nanging cukup alus kanggo kontemporer. Foto artis minangka fragmen bunder, sing nandheske rai minangka pengenal. Antarmuka utama bebas saka foto dekoratif, gambar gaya urip, utawa grafis abstrak. Siji-sijine unsur visual non-fotografi yaiku spanduk gradien ungu-nganti biru ing sisih ngisor, sing dadi siji-sijine unsur warna merek. Ikon minimalis, monolinier, putih ing latar mburi peteng—cilik lan fungsional, ora tau dekoratif.
Palet
Merek
- Spotify Green
#1ed760— Ijo digunakake minangka aksen sekunder kanggo detail dekoratif lan kanggo nyorot pitakon telusuran sing arang digunakake. Ijo ora kena digunakake minangka warna utama kanggo ajakan tumindak.
Netral
- Pure White
#ffffff— Lumahing pendukung sing entheng kanggo nggawe latar mburi sing ora ngganggu lan misahake bagean. Lumahing iki ora kena digunakake minangka warna utama kanggo ajakan tumindak. - Signal Red
#b85850— Abang dadi aksen pendukung kanggo detail dekoratif lan kanggo nyorot warna-warna sing ora umum. Gunakna minangka aksen pendukung, dudu minangka warna status. - Void Black
#000000— Kanvas kaca, latar mburi navigasi ndhuwur, lapisan permukaan paling jero - Carbon
#121212— Permukaan kardus, panel samping, lapisan permukaan sekunder ing ndhuwur kanvas - Graphite
#1f1f1f— Lumahing sing diangkat - kahanan melayang, kolom input, elemen navigasi sing dipilih. - Smoke
#292929— Latar mburi navigasi aktif, efek lampu latar entheng.
Tipografi
saka 11 nganti 24px · 4 langkah
- SpotifyMixUI — panggantos: Inter · garis besar 400, 600, 700 · Body copy, navigasi, tombol, metadata, keterangan cilik—desain kompak lan sugih informasi sing dirancang supaya alus, saengga unsur artistik bisa dominan.
- SpotifyMixUITitle — panggantos: Inter weight 700 · garis besar 700 · Judhul bagean ("Lagu Populer," "Artis Populer") - font kandel sing ukurane sedheng ndadekake judhul katon mencolok tanpa ngebaki kothak kertu.
Interval lan wujud
| Tujuan | Tegese |
|---|---|
| Kapadhetan | padhet |
| Langkah dhasar | 8-12px |
| Radius tombol | 9999px |
| Radius kertu | 6px |
| Bayangan | minimal |
| Antarane bagean | 32-48px |
AI bakal mbangun situs web sampeyan nganggo gaya Spotify lan ngisi situs kasebut
- Isi nganggo produk lan kiriman liwat pranala - Instagram, TikTok, Facebook.
- Transfer konten saka situs lawasmu—cukup sebutna alamate.
- Desain modern nganggo mesin paling apik: React ( Next.js) nganggo rendering server lan optimasi SEO sing wis ana.
- Optimasi SEO otomatis kanggo asil panelusuran lan rekomendasi jaringan saraf.
Gaya sing padha
- Resend — beludru ireng nganggo warna neon ungu
- Neon — Kamar server sawise peteng. Peteng murni, ing ngendi mung cahya sing asale saka data lan interaksi pangguna.
- Discord — Donya game iki ndhelik ing mburi jendela obrolan pop-up - saben bagean minangka lingkungan sing mandiri kanthi cahya lan karakter dhewe-dhewe.
- Idle Finance — Lantai dagang neon ing terminal segara jero minangka terminal angkatan laut peteng ing ngendi cahya biru siji nembus peteng.
- Midjourney — Terminal bioluminescent ing samudra jero. Donya segara jero ing ngendi intelijensi visual ngasilake awake dhewe ing aliran ASCII, lan kontrol katon minangka pola sing sumunar samar.
- Netflix — Rak Digital Tanpa Wates. Pengalaman sinematik ing ngendi perpustakaan konten tanpa wates ditampilake kanthi latar mburi teater sing peteng ndhedhet.
- Wope — Wope kuwi antarmuka cakrawala ungu. Bayangna meja observatorium peteng kanthi cahya ungu sumunar saka ngisor kaca.
- basement — Mesin cetak kosong jam 3 esuk – font gedhe sing dipadhetke kasebar ing peteng ndhedhet, secercah cahya oranye ing bilah navigasi, liyane putih utawa abu-abu memedi.
- Ori — Kamar server ing tengah wengi kuwi kosong ireng, lampu putih, lan siji saklar urip.
- Amaterasu — Suaka Pirus Langit
- Stink Studios — Studio film ing tengah wengi - proyektor muni, kamar peteng, mung film sing murub
- Obsidian — Gudhang kawruh sing cetha. Ruang digital sing cetha lan maneka warna sing dirancang kanggo kajelasan lan fokus, kanthi urat interaksi ungu sing sumunar.