Spotify
Noční jubobox řídicí místnost
Webové rozhraní Spotify je husté, tmavé centrum pro ovládání médií: téměř černé plátno zdobené zářivými obaly alb, jediným charakteristickým zeleným akcentem a ovládacími prvky ve tvaru pilulky. Typografie je kompaktní a utilitární – speciálně navržené geometrické bezpatkové písmo malé velikosti, které umožňuje obalu alba a fotografiím interpretů odvést většinu vizuální práce. Rozvržení je tvořeno pevnou dvousloupcovou skořepinou (boční panel + hlavní kanál) s mřížkou čtvercových obrázků alb a kulatých avatarů, které vytvářejí rytmické střídání geometrických typů. Rozhraní se vyhýbá prudkým změnám výšky a spoléhá na jemné povrchové rozdíly (karty #121212 na plátně #000000) a jeden velký gradientní banner pro energii. Výsledkem je pocit z DJ pultu: informačně hustý, akusticky tmavý a připravený k přehrávání na první pohled.
Pevné dvousloupcové rozvržení obsahuje levý postranní panel („Vaše knihovna“) a responzivní oblast hlavního obsahu. Horní panel je černý panel na celou šířku s vyhledáváním vlevo a akcemi účtu vpravo. Hlavní obsah se posouvá svisle s horizontálními kartotékami karet – populární písně v pětisloupcové čtvercové mřížce, populární interpreti v pětisloupcové kruhové mřížce a populární alba/singly pokračující v tomto vzoru. Rozteče mezi sekcemi jsou kompaktní (32 cm). Spodní reklamní banner je ukotvený ve spodní části zobrazovací oblasti. Navigace probíhá výhradně přes horní panel a postranní panel – žádné mega menu ani navigace. Rytmus se střídá: čtvercové karty → kulaté karty → čtvercové karty, což vytváří geometrický kontrast mezi sekcemi.
Hlavním vizuálním obsahem jsou obaly alb a fotografie umělců. Obálky jsou prezentovány jako husté čtvercové fragmenty (poměr stran 1:1) s poloměrem 6px – dostatečně ostré, aby vypadaly redakčně, a zároveň dostatečně jemné, aby působily moderně. Fotografie umělců jsou kulaté fragmenty, které zdůrazňují obličej jako identifikátor. Hlavní rozhraní je bez dekorativních fotografií, lifestylových obrázků ani abstraktní grafiky. Jediným nefotografickým vizuálním prvkem je fialovomodrý přechodový banner ve spodní části, který slouží jako jediný prvek barvy značky. Ikony jsou minimalistické, monolineární, bílé na tmavém pozadí – malé a funkční, nikdy ne dekorativní.
Paleta
Značka
- Spotify Green
#1ed760— Zelená se používá jako sekundární akcent pro dekorativní detaily a ke zvýraznění méně často používaných vyhledávacích dotazů. Neměla by se používat jako primární barva pro výzvy k akci.
Neutrální
- Pure White
#ffffff— Lehký podpůrný povrch pro vytvoření nenápadného pozadí a oddělení sekcí. Neměl by být použit jako primární barva pro výzvu k akci. - Signal Red
#b85850— Červená slouží jako podpůrný akcent pro dekorativní detaily a pro zvýraznění neobvyklých barev. Používejte ji jako podpůrný akcent, ne jako barvu pro zvýšení statusu. - Void Black
#000000— Plátno stránky, pozadí horní navigace, nejhlubší povrchová vrstva - Carbon
#121212— Kartonové povrchy, boční panely, sekundární povrchová vrstva přes plátno - Graphite
#1f1f1f— Zvýšený povrch - stavy při najetí myší, vstupní pole, vybrané navigační prvky. - Smoke
#292929— Aktivní navigační pozadí, mírný efekt podsvícení.
Typografie
od 11 do 24 pixelů · 4 kroky
- SpotifyMixUI — nahrazení: Inter · obrysy 400, 600, 700 · Text textu, navigace, tlačítka, metadata, malé popisky – kompaktní, informačně bohatý design navržený tak, aby byl nenápadný a umožnil dominanci uměleckých prvků.
- SpotifyMixUITitle — nahrazení: Inter weight 700 · obrysy 700 · Nadpisy sekcí („Populární písně“, „Populární interpreti“) – tučné písmo střední velikosti zvýrazní nadpisy, aniž by zahltilo mřížku karet.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | hustý |
| Základní krok | 8-12px |
| Poloměr tlačítka | 9999px |
| Poloměr karty | 6px |
| Stíny | minimální |
| Mezi sekcemi | 32-48px |
Umělá inteligence vám vytvoří web ve stylu Spotify a naplní ho
- Doplňujte produkty a příspěvky přes odkaz - Instagram, TikTok, Facebook.
- Přeneste obsah ze starého webu – stačí zadat adresu.
- Moderní design na nejlepším enginu: React ( Next.js) s renderováním na serveru a SEO optimalizací ihned po vybalení.
- Plně automatizovaná SEO optimalizace pro výsledky vyhledávání a doporučení neuronových sítí.
Podobné styly
- Resend — černý samet s fialovou neonovou barvou
- Neon — Serverovna po setmění. Čistá tma, kde jediné světlo pochází z dat a interakcí uživatelů.
- Discord — Herní svět je skryt za vyskakovacím oknem chatu - každá sekce je samostatným prostředím s vlastním osvětlením a sadou postav.
- Idle Finance — Neonová obchodní plocha hlubinných terminálů je temným námořním terminálem, kde šero proráží jediné modré světlo.
- Midjourney — Bioluminiscenční terminál v hlubokém oceánu. Hlubokomořský svět, kde se inteligence vizuálně generuje v ASCII kódu a ovládací prvky se jeví jako slabě zářící vzory.
- Netflix — Nekonečná digitální police. Filmový zážitek, kde je nekonečná knihovna obsahu prezentována na pozadí temné, divadelní kulisy.
- Wope — Wope je rozhraní fialového horizontu. Představte si tmavý stůl v pozorovací místnosti, zpod kterého vyzařuje fialové světlo.
- basement — Prázdný tiskařský lis ve 3 hodiny ráno – obrovské, stlačené fonty rozprostírají se v černočerné tmě, jediný záblesk oranžového světla na navigační liště, všechno ostatní bílé nebo přízračně šedé.
- Ori — Serverovna je o půlnoci černá prázdnota, bílé světlo, jeden zapnutý vypínač.
- Amaterasu — Nebeská tyrkysová svatyně
- Stink Studios — Filmové studio o půlnoci - projektor hučí, místnost je tmavá, osvětlený je jen film
- Obsidian — Úložiště křišťálově krystalických znalostí. Jasný, mnohostranný digitální prostor navržený pro jasnost a soustředění, se zářivými fialovými žilkami interakce.