Spotify
Sala di controllo del jukebox notturno
L'interfaccia web di Spotify è un centro di controllo multimediale denso e scuro: una tela quasi nera adornata da vivaci copertine degli album, un unico accento verde distintivo e controlli a forma di pillola. La tipografia è compatta e funzionale: un carattere sans-serif geometrico progettato su misura, di piccole dimensioni, che lascia che le copertine degli album e le foto degli artisti svolgano la maggior parte del lavoro visivo. Il layout è una struttura fissa a due colonne (barra laterale + feed principale) con una griglia di copertine degli album quadrate e avatar rotondi, creando un'alternanza ritmica di caratteri geometrici. L'interfaccia evita bruschi cambiamenti di altezza, affidandosi a sottili distinzioni di superficie (schede #121212 su una tela #000000) e a un unico grande banner sfumato per dare energia. Il risultato è l'atmosfera di una cabina da DJ: densa di informazioni, acusticamente scura e pronta a riprodurre musica con un solo sguardo.
Il layout fisso a due colonne presenta una barra laterale sinistra ("La tua libreria") e un'area di contenuto principale responsiva. La barra superiore è una barra nera a tutta larghezza con la funzione di ricerca a sinistra e le azioni dell'account a destra. Il contenuto principale scorre verticalmente, con caroselli orizzontali di schede: brani popolari in una griglia quadrata a 5 colonne, artisti popolari in una griglia circolare a 5 colonne e album/singoli popolari che seguono questo schema. La spaziatura tra le sezioni è compatta (32 cm). Il banner pubblicitario in basso è ancorato nella parte inferiore della finestra di visualizzazione. La navigazione è gestita esclusivamente tramite la barra superiore e la barra laterale, senza mega-menu o breadcrumb. Il ritmo si alterna: schede quadrate → schede rotonde → schede quadrate, creando un contrasto geometrico tra le sezioni.
Le copertine degli album e le foto degli artisti costituiscono il contenuto visivo principale. Le copertine sono presentate come frammenti quadrati compatti (rapporto d'aspetto 1:1) con un raggio di 6 pixel: sufficientemente nitidi da sembrare editoriali, ma al contempo morbidi da risultare contemporanei. Le foto degli artisti sono frammenti rotondi, che enfatizzano il volto come elemento identificativo. L'interfaccia principale è priva di foto decorative, immagini di lifestyle o grafiche astratte. L'unico elemento visivo non fotografico è un banner con una sfumatura dal viola al blu nella parte inferiore, che rappresenta l'unico elemento del colore del marchio. Le icone sono minimaliste, monolineari, bianche su sfondo scuro: piccole e funzionali, mai decorative.
Tavolozza
Marca
- Spotify Green
#1ed760— Il verde viene utilizzato come colore secondario per dettagli decorativi e per evidenziare le query di ricerca meno frequenti. Non dovrebbe essere utilizzato come colore principale per le call to action.
Neutro
- Pure White
#ffffff— Una superficie di supporto leggera per creare uno sfondo discreto e separare le sezioni. Non deve essere utilizzata come colore principale per la call to action. - Signal Red
#b85850— Il rosso funge da accento di supporto per i dettagli decorativi e per evidenziare colori insoliti. Usalo come accento di supporto, non come colore che esprime status. - Void Black
#000000— Area di lavoro della pagina, sfondo della navigazione superiore, strato superficiale più profondo - Carbon
#121212— Superfici in cartone, pannelli laterali, strato superficiale secondario su tela - Graphite
#1f1f1f— Superficie in rilievo: stati al passaggio del mouse, campi di input, elementi di navigazione selezionati. - Smoke
#292929— Sfondo di navigazione attivo, leggero effetto di retroilluminazione.
Tipografia
da 11 a 24px · 4 passaggi
- SpotifyMixUI — sostituzione: Inter · contorni 400, 600, 700 · Testo principale, navigazione, pulsanti, metadati, didascalie: un design compatto e ricco di informazioni, pensato per essere discreto, in modo che gli elementi artistici siano protagonisti.
- SpotifyMixUITitle — sostituzione: Inter weight 700 · contorni 700 · Intestazioni di sezione ("Canzoni popolari", "Artisti popolari"): un carattere in grassetto di dimensioni moderate fa risaltare le intestazioni senza sovraccaricare la griglia delle schede.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | denso |
| Passo base | 8-12px |
| Raggio del pulsante | 9999px |
| Raggio della carta | 6px |
| Ombre | minimo |
| Tra le sezioni | 32-48px |
L'IA creerà il tuo sito web nello stile Spotify e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- Resend — velluto nero con dettagli viola neon
- Neon — Una sala server al calar della notte. Oscurità assoluta, dove l'unica luce proviene dai dati e dalle interazioni degli utenti.
- Discord — Il mondo di gioco è nascosto dietro una finestra di chat a comparsa: ogni sezione è un ambiente autonomo con una propria illuminazione e un proprio set di personaggi.
- Idle Finance — La sala contrattazioni illuminata al neon dei terminal sottomarini è un oscuro terminal navale dove un'unica luce blu squarcia l'oscurità.
- Midjourney — Un terminale bioluminescente nelle profondità oceaniche. Un mondo sottomarino dove l'intelligenza si genera visivamente in flussi ASCII e i comandi appaiono come motivi debolmente luminosi.
- Netflix — Scaffale Digitale Infinito. Un'esperienza cinematografica in cui una libreria infinita di contenuti viene presentata su uno sfondo teatrale completamente nero.
- Wope — Wope è un'interfaccia a orizzonte viola. Immaginate un tavolo scuro da osservatorio con una luce viola che filtra da sotto il vetro.
- basement — Una macchina da stampa vuota alle 3 del mattino: caratteri enormi e compressi si stagliano nel nero pece, un singolo barlume di luce arancione sulla barra di navigazione, tutto il resto bianco o di un grigio spettrale.
- Ori — La sala server a mezzanotte è un vuoto nero, illuminato da una luce bianca, con un solo interruttore acceso.
- Amaterasu — Santuario Turchese Celeste
- Stink Studios — Uno studio cinematografico a mezzanotte: il proiettore ronza, la stanza è buia, solo la pellicola è illuminata.
- Obsidian — Un deposito di conoscenza cristallina. Uno spazio digitale chiaro e sfaccettato, progettato per chiarezza e concentrazione, con luminose venature viola di interazione.