Spotify
Sala sterownicza nocnej szafy grającej
Interfejs internetowy Spotify to gęste, ciemne centrum sterowania multimediami: niemal czarne płótno ozdobione żywą grafiką albumu, pojedynczym zielonym akcentem i elementami sterującymi w kształcie pigułek. Typografia jest zwarta i praktyczna – specjalnie zaprojektowany geometryczny krój bezszeryfowy o niewielkim rozmiarze, dzięki czemu okładki albumu i zdjęcia artystów stanowią główną część wizualną. Układ to stała, dwukolumnowa powłoka (pasek boczny + główny kanał) z siatką kwadratowych okładek albumu i okrągłych awatarów, tworzących rytmiczną naprzemienność geometrycznych czcionek. Interfejs unika gwałtownych zmian wysokości, opierając się na subtelnych różnicach w powierzchni (karty #121212 na płótnie #000000) i pojedynczym, dużym, gradientowym banerze dodającym energii. Rezultatem jest wrażenie stanowiska DJ-a: gęstego w informacje, akustycznie ciemnego i gotowego do gry na pierwszy rzut oka.
Stały układ dwukolumnowy obejmuje lewy pasek boczny („Twoja biblioteka”) oraz responsywny obszar głównej zawartości. Górny pasek to czarny pasek o pełnej szerokości z wyszukiwaniem po lewej stronie i działaniami na koncie po prawej. Główna zawartość przewija się w pionie, z poziomymi karuzelami kart – popularne utwory w 5-kolumnowej siatce kwadratowej, popularni artyści w 5-kolumnowej siatce kołowej oraz popularne albumy/single kontynuują ten schemat. Odstępy między sekcjami są niewielkie (32 cm). Dolny baner reklamowy jest zakotwiczony u dołu okna widoku. Nawigacja odbywa się wyłącznie za pośrednictwem górnego paska i paska bocznego – bez rozbudowanych menu ani ścieżek nawigacyjnych. Rytm jest naprzemienny: karty kwadratowe → karty okrągłe → karty kwadratowe, tworząc geometryczny kontrast między sekcjami.
Okładki albumów i zdjęcia artystów stanowią podstawową treść wizualną. Okładki są prezentowane jako gęste, kwadratowe fragmenty (proporcje obrazu 1:1) o promieniu 6 pikseli – wystarczająco ostre, by wyglądać jak artykuły redakcyjne, a jednocześnie wystarczająco miękkie, by być współczesnymi. Zdjęcia artystów to okrągłe fragmenty, podkreślające twarz jako element identyfikujący. Główny interfejs jest wolny od zdjęć dekoracyjnych, zdjęć lifestylowych ani abstrakcyjnych grafik. Jedynym niefotograficznym elementem wizualnym jest baner gradientowy z odcieniami fioletu i błękitu u dołu, stanowiący jedyny element koloru marki. Ikony są minimalistyczne, monoliniowe, białe na ciemnym tle – małe i funkcjonalne, nigdy dekoracyjne.
Paleta
Marka
- Spotify Green
#1ed760— Zieleń jest używana jako drugorzędny akcent w przypadku detali dekoracyjnych i do wyróżnienia rzadziej używanych zapytań w wyszukiwarce. Nie powinna być używana jako kolor podstawowy w wezwaniach do działania.
Neutralny
- Pure White
#ffffff— Jasna powierzchnia nośna służąca do stworzenia dyskretnego tła i oddzielenia sekcji. Nie powinna być używana jako kolor podstawowy w wezwaniu do działania. - Signal Red
#b85850— Czerwień służy jako dodatkowy akcent dekoracyjny i podkreśla nietypowe kolory. Używaj jej jako dodatkowego akcentu, a nie jako koloru statusu. - Void Black
#000000— Płótno strony, tło nawigacji górnej, najgłębsza warstwa powierzchniowa - Carbon
#121212— Powierzchnie tekturowe, panele boczne, dodatkowa warstwa powierzchniowa na płótnie - Graphite
#1f1f1f— Podniesiona powierzchnia - stany najechania kursorem, pola wprowadzania danych, wybrane elementy nawigacji. - Smoke
#292929— Aktywne tło nawigacyjne, delikatny efekt podświetlenia.
Typografia
od 11 do 24px · 4 kroki
- SpotifyMixUI — wymiana: Inter · wytyczne 400, 600, 700 · Treść, nawigacja, przyciski, metadane, małe napisy — kompaktowy, bogaty w informacje projekt, który ma być subtelny, pozwalając, aby elementy artystyczne odgrywały dominującą rolę.
- SpotifyMixUITitle — wymiana: Inter weight 700 · wytyczne 700 · Nagłówki sekcji („Popularne piosenki”, „Popularni artyści”) – pogrubiona czcionka o umiarkowanej wielkości sprawia, że nagłówki wyróżniają się, nie przeciążając siatki karty.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 8-12px |
| Promień przycisku | 9999px |
| Promień karty | 6px |
| Cienie | minimalny |
| Między sekcjami | 32-48px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Spotify i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Resend — czarny aksamit z fioletowym neonowym kolorem
- Neon — Serwerownia po zmroku. Całkowita ciemność, gdzie jedynym światłem są dane i interakcje użytkowników.
- Discord — Świat gry ukryty jest za wyskakującym okienkiem czatu – każda sekcja to samodzielne środowisko z własnym oświetleniem i zestawem postaci
- Idle Finance — Neonowa sala handlowa terminali głębinowych to ciemny terminal morski, gdzie pojedyncze niebieskie światło przebija mrok.
- Midjourney — Bioluminescencyjny terminal w głębi oceanu. Głębinowy świat, w którym inteligencja generuje się wizualnie w strumieniach ASCII, a elementy sterujące pojawiają się jako delikatnie świecące wzory.
- Netflix — Nieskończona Cyfrowa Półka. Kinowe doświadczenie, w którym nieskończona biblioteka treści prezentowana jest na tle czarnej jak smoła, teatralnej scenerii.
- Wope — Wope to interfejs fioletowego horyzontu. Wyobraź sobie ciemny stół obserwacyjny z fioletowym światłem padającym spod szkła.
- basement — Pusta maszyna drukarska o trzeciej nad ranem – ogromne, skompresowane czcionki rozciągające się po czarnej smole, pojedynczy promyk pomarańczowego światła na pasku nawigacyjnym, wszystko inne białe lub upiornie szare.
- Ori — Serwerownia o północy jest czarną pustką, białym światłem, jednym włącznikiem.
- Amaterasu — Niebiańskie Sanktuarium Turkusowe
- Stink Studios — Studio filmowe o północy – projektor brzęczy, w pomieszczeniu jest ciemno, oświetlony jest tylko film
- Obsidian — Skarbnica krystalicznej wiedzy. Przejrzysta, wielopłaszczyznowa przestrzeń cyfrowa zaprojektowana z myślą o przejrzystości i skupieniu, ze świetlistymi, fioletowymi żyłami interakcji.