Spotify
Kontrollraum für die Nachtjukebox
Spotifys Web-Oberfläche präsentiert sich als kompaktes, dunkles Medien-Kontrollzentrum: eine fast schwarze Leinwand, verziert mit lebendigen Albumcovern, einem markanten grünen Akzent und pillenförmigen Bedienelementen. Die Typografie ist kompakt und funktional – eine eigens entworfene geometrische serifenlose Schriftart in kleiner Größe, die den Albumcovern und Künstlerfotos die Hauptrolle überlässt. Das Layout besteht aus einer festen zweispaltigen Struktur (Seitenleiste + Hauptfeed) mit einem Raster aus quadratischen Albumcovern und runden Avataren, wodurch ein rhythmischer Wechsel geometrischer Formen entsteht. Die Oberfläche vermeidet abrupte Höhenunterschiede und setzt stattdessen auf subtile Oberflächenstrukturen (z. B. Karten mit der Nummer 121212 auf einer schwarzen Leinwand) und ein einzelnes großes Banner mit Farbverlauf, das für Dynamik sorgt. Das Ergebnis ist der Eindruck eines DJ-Pults: informationsreich, akustisch ruhig und auf einen Blick spielbereit.
Das feste zweispaltige Layout umfasst eine linke Seitenleiste („Ihre Bibliothek“) und einen responsiven Hauptinhaltsbereich. Die obere Leiste ist ein schwarzer Balken in voller Breite mit der Suchfunktion links und Kontoaktionen rechts. Der Hauptinhalt scrollt vertikal, während horizontale Kartenkarussells angezeigt werden: Beliebte Songs in einem 5-spaltigen quadratischen Raster, beliebte Künstler in einem 5-spaltigen kreisförmigen Raster und beliebte Alben/Singles, die dieses Muster fortsetzen. Der Abstand zwischen den Abschnitten ist kompakt (32 cm). Das untere Werbebanner ist am unteren Rand des Viewports verankert. Die Navigation erfolgt ausschließlich über die obere Leiste und die Seitenleiste – ohne Mega-Menüs oder Breadcrumbs. Die Anordnung der Karten wechselt: quadratische Karten → runde Karten → quadratische Karten, wodurch ein geometrischer Kontrast zwischen den Abschnitten entsteht.
Albumcover und Künstlerfotos bilden den visuellen Schwerpunkt. Die Cover werden als dichte, quadratische Fragmente (Seitenverhältnis 1:1) mit einem Radius von 6 Pixeln präsentiert – scharf genug für einen redaktionellen Look, aber gleichzeitig weich genug für ein modernes Erscheinungsbild. Die Künstlerfotos sind runde Fragmente, die das Gesicht als Erkennungsmerkmal hervorheben. Die Benutzeroberfläche verzichtet auf dekorative Fotos, Lifestyle-Bilder oder abstrakte Grafiken. Das einzige nicht-fotografische visuelle Element ist ein Banner mit einem Farbverlauf von Lila zu Blau am unteren Rand, das gleichzeitig die Markenfarbe darstellt. Die Icons sind minimalistisch, einlinig und weiß auf dunklem Hintergrund – klein und funktional, niemals dekorativ.
Palette
Marke
- Spotify Green
#1ed760— Grün dient als sekundäre Akzentfarbe für dekorative Details und zur Hervorhebung weniger häufig verwendeter Suchanfragen. Es sollte nicht als Hauptfarbe für Handlungsaufforderungen verwendet werden.
Neutral
- Pure White
#ffffff— Eine helle, stützende Oberfläche, die einen unaufdringlichen Hintergrund bildet und Abschnitte voneinander trennt. Sie sollte nicht als Hauptfarbe für den Handlungsaufruf verwendet werden. - Signal Red
#b85850— Rot dient als unterstützende Akzentfarbe für dekorative Details und zur Hervorhebung ungewöhnlicher Farben. Verwenden Sie es als unterstützende Akzentfarbe, nicht als Statusfarbe. - Void Black
#000000— Seiten-Canvas, Hintergrund der oberen Navigation, tiefste Oberflächenebene - Carbon
#121212— Kartonoberflächen, Seitenwände, zweite Oberflächenschicht über Leinwand - Graphite
#1f1f1f— Erhöhte Oberfläche – Hover-Zustände, Eingabefelder, ausgewählte Navigationselemente. - Smoke
#292929— Hintergrund mit aktiver Navigation, leichter Hintergrundbeleuchtungseffekt.
Typografie
von 11 auf 24 Pixel · 4 Schritte
- SpotifyMixUI — Ersatz: Inter · Umrisse 400, 600, 700 · Fließtext, Navigation, Schaltflächen, Metadaten, kleine Bildunterschriften – ein kompaktes, informationsreiches Design, das dezent sein soll, damit die künstlerischen Elemente dominieren können.
- SpotifyMixUITitle — Ersatz: Inter weight 700 · Umrisse 700 · Abschnittsüberschriften („Populäre Lieder“, „Populäre Künstler“) – eine fette, mittelgroße Schriftart sorgt dafür, dass die Überschriften hervorstechen, ohne das Kartenraster zu überladen.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | dicht |
| Grundlegender Schritt | 8-12px |
| Radius der Schaltfläche | 9999px |
| Kartenradius | 6px |
| Schatten | minimal |
| Zwischen den Abschnitten | 32-48px |
KI erstellt Ihre Website im Spotify -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- Resend — schwarzer Samt mit violetter Neonfarbe
- Neon — Ein Serverraum nach Einbruch der Dunkelheit. Absolute Dunkelheit, in der das einzige Licht von Daten und Benutzerinteraktionen stammt.
- Discord — Die Spielwelt ist hinter einem Pop-up-Chatfenster verborgen – jeder Abschnitt ist eine in sich abgeschlossene Umgebung mit eigener Beleuchtung und eigenen Charakteren.
- Idle Finance — Der neonbeleuchtete Handelssaal der Tiefseeterminals ist ein dunkles Marineterminal, in dem ein einzelnes blaues Licht die Dunkelheit durchbricht.
- Midjourney — Ein biolumineszentes Terminal in der Tiefsee. Eine Tiefseewelt, in der Intelligenz sich visuell in ASCII-Strängen selbst erzeugt und Bedienelemente als schwach leuchtende Muster erscheinen.
- Netflix — Unendliches digitales Regal. Ein filmisches Erlebnis, bei dem eine endlose Inhaltsbibliothek vor einem pechschwarzen, theatralischen Hintergrund präsentiert wird.
- Wope — Wope ist eine Benutzeroberfläche mit violettem Horizont. Stellen Sie sich einen dunklen Observatoriumstisch vor, aus dessen Glas ein violettes Licht strahlt.
- basement — Eine leere Druckmaschine um 3 Uhr morgens – riesige, gequetschte Schriftarten, die sich über das pechschwarze Licht ausbreiten, ein einzelner orangefarbener Lichtschein auf der Navigationsleiste, alles andere weiß oder geisterhaft grau.
- Ori — Der Serverraum um Mitternacht ist eine schwarze Leere, weißes Licht, ein Schalter ist eingeschaltet.
- Amaterasu — Himmlisches Türkis-Heiligtum
- Stink Studios — Ein Filmstudio um Mitternacht – der Projektor brummt, der Raum ist dunkel, nur der Film ist beleuchtet.
- Obsidian — Ein Speicher kristallinen Wissens. Ein klarer, facettenreicher digitaler Raum, der auf Klarheit und Fokus ausgelegt ist, mit leuchtend violetten Adern der Interaktion.