Spotify
Kontrolrum for natjukeboks
Spotifys webgrænseflade er et tæt, mørkt mediekontrolcenter: et næsten-sort lærred prydet med levende albumcovers, en enkelt grøn accent og pilleformede kontroller. Typografien er kompakt og funktionel – en specialdesignet geometrisk sans-serif-skrifttype i en lille størrelse, der tillader albumcovers og kunstnerbilleder at udføre størstedelen af det visuelle arbejde. Layoutet er en fast to-kolonnes skal (sidebjælke + hovedfeed) med et gitter af firkantet albumcover og runde avatarer, hvilket skaber en rytmisk vekslen af geometriske typer. Grænsefladen undgår skarpe højdeændringer og bruger subtile overfladeforskelle (#121212-kort på et #000000-lærred) og et enkelt stort gradientbanner for energi. Resultatet er en fornemmelse af en DJ-boks: informationstæt, akustisk mørk og klar til at spille med det samme.
Et fast layout med to kolonner har en venstre sidebjælke ("Dit bibliotek") og et responsivt hovedindholdsområde. Den øverste bjælke er en sort bjælke i fuld bredde med søgning til venstre og kontohandlinger til højre. Hovedindholdet ruller lodret med vandrette karruseller af kort - populære sange i et firkantet gitter med 5 kolonner, populære kunstnere i et cirkulært gitter med 5 kolonner og populære albums/singler, der fortsætter dette mønster. Afstanden mellem sektionerne er kompakt (32 cm). Det nederste annoncebanner er forankret i bunden af visningsfeltet. Navigation håndteres udelukkende via den øverste bjælke og sidebjælken - ingen megamenuer eller breadcrumbs. Rytmen skifter: firkantede kort → runde kort → firkantede kort, hvilket skaber geometrisk kontrast mellem sektionerne.
Albumcovers og kunstnerfotos er det primære visuelle indhold. Coverene præsenteres som tætte, firkantede fragmenter (1:1 billedformat) med en radius på 6px – skarpe nok til at se redaktionelle ud, men alligevel bløde nok til at være moderne. Kunstnerfotos er runde fragmenter, der fremhæver ansigtet som en identifikator. Hovedgrænsefladen er fri for dekorative fotos, livsstilsbilleder eller abstrakt grafik. Det eneste ikke-fotografiske visuelle element er et lilla-til-blåt gradientbanner nederst, der fungerer som det eneste element i brandfarven. Ikonerne er minimalistiske, monolineære, hvide på en mørk baggrund – små og funktionelle, aldrig dekorative.
Palet
Mærke
- Spotify Green
#1ed760— Grøn bruges som en sekundær accent til dekorative detaljer og til at fremhæve mindre hyppigt anvendte søgeforespørgsler. Den bør ikke bruges som den primære farve til opfordringer til handling.
Neutral
- Pure White
#ffffff— En let, støttende overflade til at skabe en diskret baggrund og adskille sektioner. Den bør ikke bruges som primærfarve til handlingsopfordringen. - Signal Red
#b85850— Rød fungerer som en understøttende accent til dekorative detaljer og til at fremhæve usædvanlige farver. Brug den som en understøttende accent, ikke som en statusfarve. - Void Black
#000000— Sidelærred, øverste navigationsbaggrund, dybeste overfladelag - Carbon
#121212— Papoverflader, sidepaneler, sekundært overfladelag over lærred - Graphite
#1f1f1f— Hævet overflade - svævetilstande, inputfelter, valgte navigationselementer. - Smoke
#292929— Aktiv navigationsbaggrund, let baggrundsbelysningseffekt.
Typografi
fra 11 til 24px · 4 trin
- SpotifyMixUI — udskiftning: Inter · konturer 400, 600, 700 · Brødtekst, navigation, knapper, metadata, små billedtekster – et kompakt, informationsrigt design designet til at være subtilt, så de kunstneriske elementer kan dominere.
- SpotifyMixUITitle — udskiftning: Inter weight 700 · konturer 700 · Sektionsoverskrifter ("Populære sange", "Populære kunstnere") - en fed skrifttype i moderat størrelse får overskrifterne til at skille sig ud uden at overbelaste kortgitteret.
Intervaller og form
| Formål | Mening |
|---|---|
| Tæthed | tæt |
| Grundlæggende trin | 8-12px |
| Knapradius | 9999px |
| Kortradius | 6px |
| Skygger | minimal |
| Mellem sektioner | 32-48px |
AI vil bygge din hjemmeside i Spotify -stil og udfylde den
- Fyld med produkter og opslag via linket - Instagram, TikTok, Facebook.
- Overfør indhold fra dit gamle websted – angiv blot adressen.
- Moderne design på den bedste søgemotor: React ( Next.js) med serverrendering og SEO-optimering lige fra starten.
- Fuldautomatiseret SEO-optimering til søgeresultater og anbefalinger til neurale netværk.
Lignende stilarter
- Resend — sort fløjl med lilla neonfarve
- Neon — Et serverrum efter mørkets frembrud. Rent mørke, hvor det eneste lys kommer fra data og brugerinteraktioner.
- Discord — Spilverdenen er skjult bag et pop-up-chatvindue - hver sektion er et selvstændigt miljø med sin egen belysning og sæt af figurer.
- Idle Finance — Neonhandelsgulvet på dybhavsterminalerne er en mørk flådeterminal, hvor et enkelt blåt lys gennembryder halvmørket.
- Midjourney — En bioluminescerende terminal i det dybe hav. En dybhavsverden, hvor intelligens visuelt genererer sig selv i ASCII-strømme, og kontroller fremstår som svagt glødende mønstre.
- Netflix — Infinite Digital Shelf. En filmisk oplevelse, hvor et uendeligt bibliotek af indhold præsenteres mod en kulsort, teatralsk baggrund.
- Wope — Wope er en lilla horisontgrænseflade. Forestil dig et mørkt observationsbord med et lilla lys, der stråler ud under glasset.
- basement — En tom trykpresse klokken 3 om natten – enorme, komprimerede skrifttyper, der spreder sig hen over det kulsorte, et enkelt glimt af orange lys på navigationslinjen, alt andet hvidt eller spøgelsesagtigt gråt.
- Ori — Serverrummet ved midnat er et sort tomrum, hvidt lys, én kontakt tændt.
- Amaterasu — Celestial Turquoise Sanctuary
- Stink Studios — Et filmstudie ved midnat - projektoren summer, rummet er mørkt, kun filmen er oplyst
- Obsidian — Et opbevaringssted for krystalklar viden. Et klart, mangesidet digitalt rum designet til klarhed og fokus, med lysende lilla interaktionsårer.