Spotify
Nachtelijke jukebox-controlekamer
De webinterface van Spotify is een compact, donker mediacenter: een bijna zwart canvas versierd met levendige albumhoezen, een kenmerkend groen accent en pilvormige bedieningselementen. De typografie is compact en functioneel – een speciaal ontworpen geometrisch schreefloos lettertype in een kleine lettergrootte, waardoor de albumhoezen en artiestenfoto's het grootste deel van het visuele werk doen. De lay-out bestaat uit een vaste structuur met twee kolommen (zijbalk + hoofdfeed) met een raster van vierkante albumhoezen en ronde avatars, wat zorgt voor een ritmische afwisseling van geometrische vormen. De interface vermijdt abrupte hoogteverschillen en vertrouwt op subtiele oppervlakteverschillen (kaarten van #121212 op een canvas van #000000) en een grote banner met kleurverloop voor een energieke uitstraling. Het resultaat is een gevoel van een dj-booth: vol informatie, akoestisch donker en direct klaar om te draaien.
Een vaste lay-out met twee kolommen bestaat uit een linkerzijbalk ("Je bibliotheek") en een responsief hoofdinhoudsgebied. De bovenste balk is een zwarte balk over de volledige breedte met links de zoekfunctie en rechts de accountacties. De hoofdinhoud scrollt verticaal, met horizontale carrousels van kaarten: populaire nummers in een vierkant raster van 5 kolommen, populaire artiesten in een cirkelvormig raster van 5 kolommen en populaire albums/singles die dit patroon voortzetten. De afstand tussen de secties is compact (32 cm). De onderste advertentiebanner is onderaan het scherm verankerd. Navigatie verloopt uitsluitend via de bovenste balk en de zijbalk – geen megamenu's of breadcrumbs. Het ritme wisselt af: vierkante kaarten → ronde kaarten → vierkante kaarten, waardoor een geometrisch contrast tussen de secties ontstaat.
Albumhoezen en artiestenfoto's vormen de belangrijkste visuele content. De hoezen worden gepresenteerd als compacte vierkante fragmenten (beeldverhouding 1:1) met een radius van 6px – scherp genoeg voor een redactionele uitstraling, maar zacht genoeg voor een eigentijdse look. Artiestenfoto's zijn ronde fragmenten, waarbij het gezicht centraal staat. De hoofdinterface is vrij van decoratieve foto's, lifestyle-afbeeldingen of abstracte graphics. Het enige niet-fotografische visuele element is een paars-blauwe kleurovergang onderaan, die de enige merkkleur vertegenwoordigt. De iconen zijn minimalistisch, monochroom, wit op een donkere achtergrond – klein en functioneel, nooit decoratief.
Palet
Merk
- Spotify Green
#1ed760— Groen wordt gebruikt als secundair accent voor decoratieve details en om minder vaak gebruikte zoektermen te benadrukken. Het mag niet als primaire kleur worden gebruikt voor call-to-action-knoppen.
Neutrale
- Pure White
#ffffff— Een lichte, ondersteunende ondergrond voor het creëren van een onopvallende achtergrond en het scheiden van secties. Deze kleur mag niet als hoofdkleur voor de call-to-action worden gebruikt. - Signal Red
#b85850— Rood dient als ondersteunend accent voor decoratieve details en om ongebruikelijke kleuren te benadrukken. Gebruik het als ondersteunend accent, niet als statuskleur. - Void Black
#000000— Pagina-canvas, achtergrond van de bovenste navigatiebalk, diepste oppervlaktelaag - Carbon
#121212— Kartonnen oppervlakken, zijpanelen, secundaire oppervlaktelaag over canvas - Graphite
#1f1f1f— Verhoogd oppervlak - hover-statussen, invoervelden, geselecteerde navigatie-elementen. - Smoke
#292929— Actieve navigatieachtergrond met een subtiel achtergrondlichteffect.
Typografie
van 11 tot 24px · 4 stappen
- SpotifyMixUI — vervanging: Inter · overzichten 400, 600, 700 · Tekst, navigatie, knoppen, metadata, kleine bijschriften: een compact, informatief ontwerp dat subtiel is, zodat het kunstwerk de boventoon voert.
- SpotifyMixUITitle — vervanging: Inter weight 700 · overzichten 700 · Sectietitels ("Populaire liedjes", "Populaire artiesten") - een gemiddeld groot, vet lettertype zorgt ervoor dat de titels opvallen zonder het kaartraster te overladen.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gespannen |
| Basisstap | 8-12px |
| Knopradius | 9999px |
| Kaartradius | 6px |
| Schaduwen | minimaal |
| Tussen secties | 32-48px |
AI bouwt je website in de stijl Spotify en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- Resend — zwart fluweel met paarse neonkleur
- Neon — Een serverruimte in het donker. Volledige duisternis, waar het enige licht afkomstig is van data en gebruikersinteracties.
- Discord — De spelwereld is verborgen achter een pop-up chatvenster; elk gedeelte is een op zichzelf staande omgeving met eigen belichting en personages.
- Idle Finance — De neonverlichte handelsvloer van de diepzeeterminals is een donkere marineterminal waar een enkel blauw licht de duisternis doorbreekt.
- Midjourney — Een bioluminescente terminal in de diepe oceaan. Een diepzeewereld waar intelligentie zichzelf visueel genereert in ASCII-stromen, en bedieningselementen verschijnen als zwak oplichtende patronen.
- Netflix — Oneindige digitale plank. Een filmische ervaring waarbij een eindeloze bibliotheek aan content wordt gepresenteerd tegen een pikzwarte, theatrale achtergrond.
- Wope — Wope is een paarse horizoninterface. Stel je een donkere observatoriumtafel voor met een paars licht dat van onder het glas schijnt.
- basement — Een lege drukpers om 3 uur 's nachts – enorme, samengeperste lettertypen die zich uitspreiden over de pikzwarte achtergrond, een enkel oranje lichtpuntje op de navigatiebalk, al het andere wit of spookachtig grijs.
- Ori — De serverruimte is om middernacht een pikzwarte leegte, met wit licht en één schakelaar aan.
- Amaterasu — Hemels Turkoois Heiligdom
- Stink Studios — Een filmstudio midden in de nacht - de projector zoemt, de ruimte is donker, alleen de film is verlicht.
- Obsidian — Een opslagplaats van kristalheldere kennis. Een heldere, veelzijdige digitale ruimte, ontworpen voor duidelijkheid en focus, met stralende paarse aderen van interactie.