Spotify
salle de contrôle du jukebox de nuit
L'interface web de Spotify est un centre de contrôle multimédia dense et sombre: une toile presque noire ornée de pochettes d'albums éclatantes, d'une unique touche de vert et de commandes en forme de pilule. La typographie est compacte et fonctionnelle: une police sans empattement géométrique personnalisée, de petite taille, laissant la part belle aux pochettes et aux photos des artistes. La mise en page est une structure fixe à deux colonnes (barre latérale + flux principal) avec une grille de pochettes carrées et d'avatars ronds, créant une alternance rythmique de formes géométriques. L'interface évite les changements brusques de hauteur, misant sur des distinctions subtiles de surface (cartes #121212 sur un fond #000000) et une grande bannière dégradée pour dynamiser l'ensemble. Le résultat évoque une cabine de DJ: riche en informations, acoustiquement sombre et prête à l'emploi en un coup d'œil.
Une mise en page fixe à deux colonnes présente une barre latérale gauche (« Votre bibliothèque») et une zone de contenu principale adaptative. La barre supérieure, noire et pleine largeur, propose la recherche à gauche et les actions du compte à droite. Le contenu principal défile verticalement, avec des carrousels horizontaux de cartes: les chansons populaires dans une grille carrée à 5 colonnes, les artistes populaires dans une grille circulaire à 5 colonnes, et les albums/singles populaires, selon le même principe. L’espacement entre les sections est réduit (32 cm). La bannière publicitaire du bas est ancrée en bas de la fenêtre. La navigation s’effectue exclusivement via la barre supérieure et la barre latérale; pas de méga-menus ni de fil d’Ariane. L’alternance de cartes carrées et rondes crée un contraste géométrique entre les sections.
Les pochettes d'albums et les photos des artistes constituent l'essentiel du contenu visuel. Les pochettes sont présentées sous forme de fragments carrés denses (format 1:1) d'un rayon de 6 px: suffisamment nets pour un rendu éditorial, mais suffisamment doux pour une esthétique contemporaine. Les photos des artistes sont des fragments ronds, mettant l'accent sur le visage comme élément d'identification. L'interface principale est dépourvue de photos décoratives, d'images lifestyle ou de graphismes abstraits. Le seul élément visuel non photographique est une bannière dégradée du violet au bleu en bas de page, qui constitue l'unique élément de la couleur de la marque. Les icônes sont minimalistes, monolinéaires, blanches sur fond sombre: petites et fonctionnelles, jamais décoratives.
Palette
Marque
- Spotify Green
#1ed760— Le vert est utilisé comme couleur d'accent secondaire pour les détails décoratifs et pour mettre en évidence les requêtes de recherche moins fréquentes. Il ne doit pas être utilisé comme couleur principale pour les appels à l'action.
Neutre
- Pure White
#ffffff— Une surface claire servant de fond discret et à séparer les sections. Elle ne doit pas être utilisée comme couleur principale pour l'appel à l'action. - Signal Red
#b85850— Le rouge sert d'accentuation pour les détails décoratifs et pour mettre en valeur des couleurs moins courantes. Utilisez-le comme accentuation, et non comme couleur de prestige. - Void Black
#000000— canevas de page, arrière-plan de la navigation supérieure, couche de surface la plus profonde - Carbon
#121212— Surfaces en carton, panneaux latéraux, couche de surface secondaire sur toile - Graphite
#1f1f1f— Surface en relief - états de survol, champs de saisie, éléments de navigation sélectionnés. - Smoke
#292929— Fond de navigation actif, léger effet de rétroéclairage.
Typographie
de 11 à 24 px · 4 étapes
- SpotifyMixUI — remplacement: Inter · grandes lignes 400, 600, 700 · Texte principal, navigation, boutons, métadonnées, légendes courtes: un design compact et riche en informations, conçu pour être subtil et laisser la place aux éléments artistiques.
- SpotifyMixUITitle — remplacement: Inter weight 700 · grandes lignes 700 · Titres de section (« Chansons populaires», « Artistes populaires») - une police de caractères grasse et de taille moyenne permet aux titres de se démarquer sans surcharger la grille de cartes.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 8-12px |
| Rayon du bouton | 9999px |
| Rayon de la carte | 6px |
| Ombres | minimal |
| Entre les sections | 32-48px |
L'IA construira votre site web dans le style Spotify et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Resend — velours noir avec une couleur néon violette
- Neon — Une salle serveur à la nuit tombée. L'obscurité totale, où la seule lumière provient des données et des interactions des utilisateurs.
- Discord — Le monde du jeu est caché derrière une fenêtre de chat contextuelle; chaque section est un environnement autonome avec son propre éclairage et son ensemble de personnages.
- Idle Finance — La salle des marchés illuminée par des néons des terminaux en eaux profondes est un terminal naval sombre où une unique lumière bleue perce l'obscurité.
- Midjourney — Un terminal bioluminescent dans les profondeurs océaniques. Un monde sous-marin où l'intelligence se génère visuellement en flux ASCII, et où les commandes apparaissent sous forme de motifs faiblement lumineux.
- Netflix — Bibliothèque numérique infinie. Une expérience cinématographique où une bibliothèque de contenus sans fin est présentée sur un fond noir absolu, digne d'une salle de spectacle.
- Wope — Wope est une interface à horizon violet. Imaginez une table d'observatoire sombre avec une lumière violette qui jaillit de sous le verre.
- basement — Une presse à imprimer vide à 3 heures du matin – d'énormes caractères compressés s'étalant sur le noir absolu, une unique lueur orange sur la barre de navigation, tout le reste blanc ou gris fantomatique.
- Ori — La salle des serveurs à minuit est un vide noir, une lumière blanche, un interrupteur allumé.
- Amaterasu — Sanctuaire turquoise céleste
- Stink Studios — Un studio de cinéma à minuit – le projecteur bourdonne, la pièce est plongée dans l'obscurité, seule la pellicule est éclairée
- Obsidian — Un réservoir de connaissances cristallines. Un espace numérique clair et multifacettes, conçu pour la clarté et la concentration, avec des veines d'interaction d'un violet lumineux.