Spotify
Sala de control de jukebox nocturna
La interfície web de Spotify és un centre de control multimèdia dens i fosc: un llenç gairebé negre adornat amb una caràtula vibrant, un únic accent verd característic i controls en forma de píndola. La tipografia és compacta i utilitària: una tipografia sans-serif geomètrica de disseny personalitzat i de mida petita, que permet que la caràtula de l'àlbum i les fotos de l'artista facin la major part del treball visual. El disseny és una closca fixa de dues columnes (barra lateral + canal principal) amb una quadrícula de caràtula quadrada de l'àlbum i avatars rodons, creant una alternança rítmica de tipus geomètrics. La interfície evita canvis bruscos d'alçada, basant-se en distincions superficials subtils (targetes #121212 en un llenç #000000) i un únic bàner degradat gran per a l'energia. El resultat és la sensació d'una cabina de DJ: densa en informació, acústicament fosca i llesta per reproduir d'un cop d'ull.
Un disseny fix de dues columnes inclou una barra lateral esquerra ("La teva biblioteca") i una àrea de contingut principal responsiva. La barra superior és una barra negra d'amplada completa amb la cerca a l'esquerra i les accions del compte a la dreta. El contingut principal es desplaça verticalment, amb carrusels horitzontals de targetes: cançons populars en una quadrícula quadrada de 5 columnes, artistes populars en una quadrícula circular de 5 columnes i àlbums/sengles populars que continuen aquest patró. L'espai entre les seccions és compacte (32 cm). El bàner publicitari inferior està ancorat a la part inferior de la finestra gràfica. La navegació es gestiona exclusivament a través de la barra superior i la barra lateral, sense megamenús ni rutes de navegació. El ritme alterna: targetes quadrades → targetes rodones → targetes quadrades, creant un contrast geomètric entre les seccions.
Les portades dels àlbums i les fotos dels artistes són el contingut visual principal. Les portades es presenten com a fragments quadrats densos (relació d'aspecte 1:1) amb un radi de 6 px, prou nítids per semblar editorials però prou suaus per ser contemporànies. Les fotos dels artistes són fragments rodons, que emfatitzen la cara com a identificador. La interfície principal no conté fotos decoratives, imatges d'estil de vida ni gràfics abstractes. L'únic element visual no fotogràfic és un bàner degradat de color porpra a blau a la part inferior, que serveix com a únic element del color de la marca. Les icones són minimalistes, monolineals, blanques sobre un fons fosc, petites i funcionals, mai decoratives.
Paleta
Marca
- Spotify Green
#1ed760— El verd s'utilitza com a accent secundari per a detalls decoratius i per ressaltar consultes de cerca menys utilitzades. No s'hauria d'utilitzar com a color principal per a crides a l'acció.
Neutral
- Pure White
#ffffff— Una superfície de suport lleugera per crear un fons discret i separar seccions. No s'hauria d'utilitzar com a color principal per a la crida a l'acció. - Signal Red
#b85850— El vermell serveix com a complement per a detalls decoratius i per ressaltar colors poc comuns. Feu-lo servir com a complement, no com a color d'estatus. - Void Black
#000000— Llenç de la pàgina, fons de navegació superior, capa superficial més profunda - Carbon
#121212— Superfícies de cartró, panells laterals, capa superficial secundària sobre tela - Graphite
#1f1f1f— Superfície elevada: estats de pas del cursor, camps d'entrada, elements de navegació seleccionats. - Smoke
#292929— Fons de navegació actiu, lleuger efecte de retroiluminació.
Tipografia
d'11 a 24px · 4 passos
- SpotifyMixUI — reemplaçament: Inter · esquemes 400, 600, 700 · Cos del text, navegació, botons, metadades, subtítols petits: un disseny compacte i ric en informació dissenyat per ser subtil, permetent que els elements artístics dominin.
- SpotifyMixUITitle — reemplaçament: Inter weight 700 · esquemes 700 · Encapçalaments de secció ("Cançons populars", "Artistes populars"): una lletra en negreta i de mida moderada fa que els encapçalaments destaquin sense sobrecarregar la graella de la targeta.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | dens |
| Pas bàsic | 8-12px |
| Radi del botó | 9999px |
| Radi de la targeta | 6px |
| Ombres | mínim |
| Entre seccions | 32-48px |
La IA crearà el vostre lloc web a l'estil Spotify i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- Resend — vellut negre amb color neó morat
- Neon — Una sala de servidors després de la foscor. Foscor pura, on l'única llum prové de les dades i les interaccions dels usuaris.
- Discord — El món del joc està amagat darrere d'una finestra de xat emergent: cada secció és un entorn independent amb la seva pròpia il·luminació i conjunt de personatges.
- Idle Finance — La sala de negocis de neó de les terminals d'altura és una terminal naval fosca on una única llum blava perfora la penombra.
- Midjourney — Una terminal bioluminescent a les profunditats marines. Un món marí profund on la intel·ligència es genera visualment en fluxos ASCII i els controls apareixen com a patrons lleugerament brillants.
- Netflix — Prestatge digital infinit. Una experiència cinematogràfica on es presenta una biblioteca infinita de contingut amb un teló de fons teatral i fosc com la cúspide.
- Wope — Wope és una interfície d'horitzó porpra. Imagineu-vos una taula d'observatori fosca amb una llum porpra que irradia des de sota el vidre.
- basement — Una impremta buida a les 3 de la matinada: fonts enormes i comprimides que s'escampen per la foscor total, un únic lluïssor de llum taronja a la barra de navegació, tota la resta blanca o d'un gris fantasmagòric.
- Ori — La sala de servidors a mitjanit és un buit negre, llum blanca, un interruptor encès.
- Amaterasu — Santuari Turquesa Celestial
- Stink Studios — Un estudi de cinema a mitjanit: el projector brunzeix, l'habitació és fosca, només la pel·lícula està il·luminada
- Obsidian — Un repositori de coneixement cristal·lí. Un espai digital clar i polifacètic dissenyat per a la claredat i l'enfocament, amb venes lluminoses de color porpra d'interacció.