Spotify
Kontrollrom for nattjukeboks
Spotifys nettgrensesnitt er et tett, mørkt mediekontrollsenter: et nesten svart lerret utsmykket med livlig albumgrafikk, en enkel grønn aksent og pilleformede kontroller. Typografien er kompakt og utilitaristisk – en spesialdesignet geometrisk sans-serif-skrifttype i liten størrelse, slik at albumgrafikken og artistbildene gjør mesteparten av det visuelle arbeidet. Layouten er et fast to-kolonnes skall (sidefelt + hovedfeed) med et rutenett av firkantet albumgrafikk og runde avatarer, noe som skaper en rytmisk veksling av geometriske typer. Grensesnittet unngår skarpe høydeendringer, og er avhengig av subtile overflateforskjeller (#121212-kort på et #000000-lerret) og et enkelt stort gradientbanner for energi. Resultatet er en følelse av en DJ-bås: informasjonstett, akustisk mørk og klar til å spilles med et blikk.
Et fast oppsett med to kolonner har en venstre sidefelt («Ditt bibliotek») og et responsivt hovedinnholdsområde. Den øverste linjen er en svart linje i full bredde med søk til venstre og kontohandlinger til høyre. Hovedinnholdet ruller vertikalt, med horisontale karuseller av kort – populære sanger i et firkantet rutenett med 5 kolonner, populære artister i et sirkulært rutenett med 5 kolonner, og populære album/singler som fortsetter dette mønsteret. Avstanden mellom seksjonene er kompakt (32 cm). Det nederste annonsebanneret er forankret nederst i visningsfeltet. Navigasjon håndteres utelukkende via den øverste linjen og sidefeltet – ingen megamenyer eller brødsmuler. Rytmen veksler: firkantede kort → runde kort → firkantede kort, noe som skaper geometrisk kontrast mellom seksjonene.
Albumomslag og artistbilder er det primære visuelle innholdet. Omslagene presenteres som tette firkantede fragmenter (1:1 sideforhold) med en radius på 6 piksler – skarpe nok til å se redaksjonelle ut, men likevel myke nok til å være moderne. Kunstnerbilder er runde fragmenter, som fremhever ansiktet som en identifikator. Hovedgrensesnittet er fritt for dekorative bilder, livsstilsbilder eller abstrakt grafikk. Det eneste ikke-fotografiske visuelle elementet er et lilla-til-blått gradientbanner nederst, som fungerer som det eneste elementet i merkevarens farge. Ikonene er minimalistiske, monolineære, hvite på en mørk bakgrunn – små og funksjonelle, aldri dekorative.
Palett
Merke
- Spotify Green
#1ed760— Grønt brukes som en sekundær aksent for dekorative detaljer og for å fremheve mindre ofte brukte søk. Det bør ikke brukes som primærfarge for handlingsfremmende oppfordringer.
Nøytral
- Pure White
#ffffff— En lett støtteflate for å lage en diskret bakgrunn og skille seksjoner. Den bør ikke brukes som primærfarge for handlingsfremmende oppfordring. - Signal Red
#b85850— Rødt fungerer som en støttende aksent for dekorative detaljer og for å fremheve uvanlige farger. Bruk det som en støttende aksent, ikke som en statusfarge. - Void Black
#000000— Sidelerret, toppnavigasjonsbakgrunn, dypeste overflatelag - Carbon
#121212— Pappoverflater, sidepaneler, sekundært overflatelag over lerret - Graphite
#1f1f1f— Hevet overflate - svevetilstander, inndatafelt, valgte navigasjonselementer. - Smoke
#292929— Aktiv navigasjonsbakgrunn, svak bakgrunnsbelysningseffekt.
Typografi
fra 11 til 24 piksler · 4 trinn
- SpotifyMixUI — erstatning: Inter · omriss 400, 600, 700 · Brødtekst, navigasjon, knapper, metadata, små bildetekster – et kompakt, informasjonsrikt design som er utformet for å være subtilt, slik at kunstverket dominerer.
- SpotifyMixUITitle — erstatning: Inter weight 700 · omriss 700 · Seksjonsoverskrifter («Populære sanger», «Populære artister») – en fet skrifttype i moderat størrelse gjør at overskriftene skiller seg ut uten å overbelaste kortrutenettet.
Intervaller og form
| Hensikt | Betydning |
|---|---|
| Tetthet | tett |
| Grunnleggende trinn | 8-12px |
| Knapperadius | 9999px |
| Kortradius | 6px |
| Skygger | minimal |
| Mellom seksjoner | 32-48px |
AI vil bygge nettstedet ditt i Spotify -stil og fylle det
- Fyll på med produkter og innlegg via lenken - Instagram, TikTok, Facebook.
- Overfør innhold fra det gamle nettstedet ditt – bare oppgi adressen.
- Moderne design på den beste søkemotoren: React ( Next.js) med serverrendering og SEO-optimalisering rett ut av boksen.
- Helautomatisk SEO-optimalisering for søkeresultater og anbefalinger fra nevrale nettverk.
Lignende stiler
- Resend — svart fløyel med lilla neonfarge
- Neon — Et serverrom etter mørkets frembrudd. Rent mørke, hvor det eneste lyset kommer fra data og brukerinteraksjoner.
- Discord — Spillverdenen er skjult bak et popup-chatvindu – hver seksjon er et selvstendig miljø med sin egen belysning og sett med figurer.
- Idle Finance — Neonhandelsgulvet på dyphavsterminalene er en mørk marineterminal der et enkelt blått lys gjennomtrenger halvmørket.
- Midjourney — En bioluminescerende terminal i dyphavet. En dyphavsverden hvor intelligens visuelt genererer seg selv i ASCII-strømmer, og kontroller fremstår som svakt glødende mønstre.
- Netflix — Uendelig digital hylle. En filmatisk opplevelse der et endeløst bibliotek av innhold presenteres mot et bekmørkt, teatralsk bakteppe.
- Wope — Wope er et lilla horisontgrensesnitt. Se for deg et mørkt observasjonsbord med et lilla lys som stråler fra under glasset.
- basement — En tom trykkpresse klokken 03.00 – enorme, komprimerte skrifttyper som sprer seg over bekmørket, et enkelt glimt av oransje lys på navigasjonslinjen, alt annet hvitt eller spøkelsesaktig grått.
- Ori — Serverrommet ved midnatt er et svart tomrom, hvitt lys, én bryter på.
- Amaterasu — Celestial Turquoise Sanctuary
- Stink Studios — Et filmstudio ved midnatt – projektoren summer, rommet er mørkt, bare filmen er opplyst
- Obsidian — Et arkiv av krystallklar kunnskap. Et klart, mangefasettert digitalt rom designet for klarhet og fokus, med lysende lilla årer av interaksjon.