Spotify
Silid ng kontrol ng jukebox sa gabi
Ang web interface ng Spotify ay isang siksik at madilim na sentro ng kontrol ng media: isang halos itim na canvas na pinalamutian ng matingkad na album art, isang natatanging berdeng accent, at mga kontrol na hugis-pill. Ang tipograpiya ay siksik at praktikal—isang custom-designed na geometric sans-serif typeface sa maliit na sukat, na nagbibigay-daan sa album art at mga larawan ng artist na gawin ang karamihan ng visual na gawain. Ang layout ay isang nakapirming two-column shell (sidebar + main feed) na may grid ng parisukat na album art at mga bilog na avatar, na lumilikha ng isang ritmikong pagpapalit-palit ng mga geometric na uri. Iniiwasan ng interface ang mga biglaang pagbabago sa taas, umaasa sa mga banayad na pagkakaiba sa ibabaw (#121212 card sa isang #000000 canvas) at isang malaking gradient banner para sa enerhiya. Ang resulta ay isang pakiramdam ng isang DJ booth: siksik sa impormasyon, madilim sa tunog, at handang tumugtog sa isang sulyap.
Ang isang nakapirming layout na may dalawang hanay ay nagtatampok ng kaliwang sidebar ("Iyong Library") at isang responsive na pangunahing lugar ng nilalaman. Ang itaas na bar ay isang full-width na itim na bar na may paghahanap sa kaliwa at mga aksyon sa account sa kanan. Ang pangunahing nilalaman ay nag-ii-scroll nang patayo, na may mga pahalang na carousel ng mga card—mga sikat na kanta sa isang 5-column square grid, mga sikat na artista sa isang 5-column circular grid, at mga sikat na album/single na nagpapatuloy sa ganitong pattern. Ang pagitan sa pagitan ng mga seksyon ay siksik (32 cm). Ang banner ng ad sa ibaba ay naka-angkla sa ilalim ng viewport. Ang nabigasyon ay eksklusibong pinangangasiwaan sa pamamagitan ng itaas na bar at sidebar—walang mega-menu o breadcrumbs. Ang ritmo ay nagpapalitan: mga square card → mga round card → mga square card, na lumilikha ng geometric contrast sa pagitan ng mga seksyon.
Ang mga pabalat ng album at mga larawan ng artista ang pangunahing biswal na nilalaman. Ang mga pabalat ay inihaharap bilang siksik na parisukat na mga piraso (1:1 aspect ratio) na may 6px radius—sapat na malinaw upang magmukhang editoryal ngunit sapat na malambot upang maging kontemporaryo. Ang mga larawan ng artista ay mga bilog na piraso, na nagbibigay-diin sa mukha bilang isang pagkakakilanlan. Ang pangunahing interface ay walang mga pandekorasyon na larawan, mga larawan ng pamumuhay, o mga abstract graphics. Ang tanging hindi potograpiyang elemento ng biswal ay isang lila-hanggang-asul na gradient banner sa ibaba, na nagsisilbing tanging elemento ng kulay ng brand. Ang mga icon ay minimalist, monolinear, puti sa isang madilim na background—maliit at praktikal, hindi kailanman pandekorasyon.
Paleta
Tatak
- Spotify Green
#1ed760— Ginagamit ang berde bilang pangalawang kulay para sa mga detalyeng pandekorasyon at upang i-highlight ang mga hindi gaanong madalas gamiting query sa paghahanap. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon.
Neutral
- Pure White
#ffffff— Isang magaan na sumusuportang ibabaw para sa paglikha ng hindi mahahalatang background at paghihiwalay ng mga seksyon. Hindi ito dapat gamitin bilang pangunahing kulay para sa panawagan para sa aksyon. - Signal Red
#b85850— Ang pula ay nagsisilbing pantulong na accent para sa mga detalyeng pandekorasyon at upang i-highlight ang mga hindi pangkaraniwang kulay. Gamitin ito bilang pantulong na accent, hindi bilang kulay na nagpapakita ng katayuan. - Void Black
#000000— Kanbas ng pahina, background sa itaas na nabigasyon, pinakamalalim na layer ng ibabaw - Carbon
#121212— Mga ibabaw na karton, mga panel sa gilid, pangalawang patong ng ibabaw sa ibabaw ng canvas - Graphite
#1f1f1f— Nakataas na ibabaw - mga estado ng pag-hover, mga input field, mga napiling elemento ng nabigasyon. - Smoke
#292929— Aktibong background sa nabigasyon, bahagyang epekto ng backlight.
Tipograpiya
mula 11 hanggang 24px · 4 na hakbang
- SpotifyMixUI — kapalit: Inter · mga balangkas 400, 600, 700 · Body copy, nabigasyon, mga buton, metadata, maliliit na caption—isang siksik at mayaman sa impormasyong disenyo na idinisenyo upang maging banayad, na nagpapahintulot sa mga artistikong elemento na mangibabaw.
- SpotifyMixUITitle — kapalit: Inter weight 700 · mga balangkas 700 · Mga Pamagat ng Seksyon ("Mga Sikat na Kanta," "Mga Sikat na Artista") - ang isang naka-bold at katamtamang laki ng font ay nagpapatingkad sa mga pamagat nang hindi napupuno ang grid ng card.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 8-12px |
| Radius ng buton | 9999px |
| Radius ng card | 6px |
| Mga anino | minimal |
| Sa pagitan ng mga seksyon | 32-48px |
Gagawa ang AI ng website mo sa estilong Spotify at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Resend — itim na pelus na may lilang kulay neon
- Neon — Isang silid ng server pagkagabi. Purong kadiliman, kung saan ang tanging liwanag ay nagmumula sa data at mga interaksyon ng user.
- Discord — Ang mundo ng laro ay nakatago sa likod ng isang pop-up chat window - ang bawat seksyon ay isang self-contained na kapaligiran na may sarili nitong ilaw at hanay ng mga karakter.
- Idle Finance — Ang neon trading floor ng mga deep-sea terminal ay isang madilim na naval terminal kung saan ang isang asul na liwanag ay tumatagos sa kadiliman.
- Midjourney — Isang bioluminescent terminal sa malalim na karagatan. Isang mundo sa malalim na dagat kung saan ang katalinuhan ay biswal na bumubuo ng sarili nito sa mga ASCII stream, at ang mga kontrol ay lumilitaw bilang mahinang kumikinang na mga pattern.
- Netflix — Infinite Digital Shelf. Isang karanasang sinematiko kung saan ang isang walang katapusang koleksyon ng nilalaman ay inihaharap sa isang madilim at teatro na kapaligiran.
- Wope — Ang Wope ay isang lilang interface ng horizon. Isipin ang isang madilim na mesa ng obserbatoryo na may lilang liwanag na sumisikat mula sa ilalim ng salamin.
- basement — Isang walang laman na palimbagan ng alas-3 ng umaga – malalaki at naka-compress na mga font na nakakalat sa madilim na lugar, isang kislap ng kulay kahel na ilaw sa navigation bar, lahat ng iba ay puti o parang multo na kulay abo.
- Ori — Ang silid ng server sa hatinggabi ay isang itim na kawalan, puting ilaw, at isang switch lang ang nakabukas.
- Amaterasu — Selestial na Santuwaryo ng Turkesa
- Stink Studios — Isang studio ng pelikula sa hatinggabi - umuugong ang projector, madilim ang silid, tanging ang pelikula lang ang naiilawan
- Obsidian — Isang imbakan ng mala-kristal na kaalaman. Isang malinaw, maraming aspeto ng digital na espasyo na idinisenyo para sa kalinawan at pokus, na may makinang na lilang mga ugat ng interaksyon.