Spotify
Nočná riadiaca miestnosť juboboxu
Webové rozhranie Spotify je husté, tmavé centrum ovládania médií: takmer čierne plátno ozdobené žiarivými obrázkami albumov, jedným charakteristickým zeleným akcentom a ovládacími prvkami v tvare tabletky. Typografia je kompaktná a utilitárna – geometrické písmo bez pätiek navrhnuté na mieru v malej veľkosti, ktoré umožňuje obrázkom albumov a fotografiám interpretov vykonávať väčšinu vizuálnej práce. Rozloženie je fixná dvojstĺpcová schránka (bočný panel + hlavný kanál) s mriežkou štvorcových obrázkov albumov a okrúhlych avatarov, čím sa vytvára rytmické striedanie geometrických typov. Rozhranie sa vyhýba prudkým zmenám výšky a spolieha sa na jemné povrchové rozdiely (karty #121212 na plátne #000000) a jeden veľký gradientný banner pre energiu. Výsledkom je pocit z DJ pultu: informačne hustý, akusticky tmavý a pripravený na hranie na prvý pohľad.
Pevné dvojstĺpcové rozloženie obsahuje ľavý bočný panel („Vaša knižnica“) a responzívnu oblasť hlavného obsahu. Horný panel je čierny panel na celú šírku s vyhľadávaním vľavo a akciami účtu vpravo. Hlavný obsah sa posúva vertikálne s horizontálnymi kartotékami kariet – populárne skladby v štvorcovej mriežke s 5 stĺpcami, populárni interpreti v kruhovej mriežke s 5 stĺpcami a populárne albumy/single pokračujú v tomto vzore. Rozstupy medzi sekciami sú kompaktné (32 cm). Spodný reklamný banner je ukotvený v dolnej časti zobrazovacej oblasti. Navigácia sa vykonáva výlučne prostredníctvom horného panela a bočného panela – žiadne mega ponuky ani navigácia. Rytmus sa strieda: štvorcové karty → okrúhle karty → štvorcové karty, čím sa vytvára geometrický kontrast medzi sekciami.
Obálky albumov a fotografie interpretov tvoria primárny vizuálny obsah. Obálky sú prezentované ako husté štvorcové fragmenty (pomer strán 1:1) s polomerom 6px – dostatočne ostré, aby vyzerali redakčne, ale zároveň dostatočne jemné, aby boli moderné. Fotografie interpretov sú okrúhle fragmenty, ktoré zdôrazňujú tvár ako identifikátor. Hlavné rozhranie neobsahuje dekoratívne fotografie, obrázky životného štýlu ani abstraktnú grafiku. Jediným nefotografickým vizuálnym prvkom je fialovomodrý prechodový banner v spodnej časti, ktorý slúži ako jediný prvok farby značky. Ikony sú minimalistické, monolineárne, biele na tmavom pozadí – malé a funkčné, nikdy nie dekoratívne.
Paleta
Značka
- Spotify Green
#1ed760— Zelená sa používa ako sekundárny akcent pre dekoratívne detaily a na zvýraznenie menej často používaných vyhľadávacích dopytov. Nemala by sa používať ako primárna farba pre výzvy na akciu.
Neutrálny
- Pure White
#ffffff— Svetlý nosný povrch na vytvorenie nenápadného pozadia a oddelenie sekcií. Nemal by sa používať ako primárna farba pre výzvu na akciu. - Signal Red
#b85850— Červená slúži ako podporný akcent pre dekoratívne detaily a na zvýraznenie nezvyčajných farieb. Používajte ju ako podporný akcent, nie ako statusovú farbu. - Void Black
#000000— Plátno stránky, pozadie hornej navigácie, najhlbšia povrchová vrstva - Carbon
#121212— Kartónové povrchy, bočné panely, sekundárna povrchová vrstva cez plátno - Graphite
#1f1f1f— Zvýšený povrch - stavy pri podržaní kurzora myši, vstupné polia, vybrané navigačné prvky. - Smoke
#292929— Aktívne navigačné pozadie, mierny efekt podsvietenia.
Typografia
od 11 do 24px · 4 kroky
- SpotifyMixUI — náhrada: Inter · obrysy 400, 600, 700 · Text textu, navigácia, tlačidlá, metadáta, malé popisky – kompaktný, informatívne bohatý dizajn navrhnutý tak, aby bol nenápadný a umožňoval dominovať umeleckým prvkom.
- SpotifyMixUITitle — náhrada: Inter weight 700 · obrysy 700 · Nadpisy sekcií („Populárne piesne“, „Populárni interpreti“) – tučné písmo strednej veľkosti zvýrazní nadpisy bez preťaženia mriežky kariet.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | hustý |
| Základný krok | 8-12px |
| Polomer tlačidla | 9999px |
| Polomer karty | 6px |
| Tiene | minimálny |
| Medzi sekciami | 32-48px |
Umelá inteligencia vytvorí vašu webovú stránku v štýle Spotify a naplní ju
- Doplňte produktmi a príspevkami cez odkaz - Instagram, TikTok, Facebook.
- Preneste obsah zo svojej starej stránky – stačí zadať adresu.
- Moderný dizajn na najlepšom engine: React ( Next.js) s vykresľovaním servera a SEO optimalizáciou hneď po vybalení.
- Plne automatizovaná SEO optimalizácia pre výsledky vyhľadávania a odporúčania neurónových sietí.
Podobné štýly
- Resend — čierny zamat s fialovou neónovou farbou
- Neon — Serverovňa po zotmení. Čistá tma, kde jediné svetlo pochádza z dát a interakcií používateľov.
- Discord — Herný svet je skrytý za vyskakovacím oknom chatu - každá sekcia je samostatné prostredie s vlastným osvetlením a sadou postáv.
- Idle Finance — Neónová obchodná plocha hlbokomorských terminálov je tmavý námorný terminál, kde šero preráža jediné modré svetlo.
- Midjourney — Bioluminiscenčný terminál v hlbokom oceáne. Hlbokomorský svet, kde sa inteligencia vizuálne generuje v ASCII kódoch a ovládacie prvky sa javia ako slabo žiariace vzory.
- Netflix — Nekonečná digitálna polica. Filmový zážitok, kde sa nekonečná knižnica obsahu prezentuje na pozadí úplne čierneho kinofilmu.
- Wope — Wope je rozhranie fialového horizontu. Predstavte si tmavý stôl observatória s fialovým svetlom vyžarujúcim spod skla.
- basement — Prázdny tlačiarenský stroj o 3:00 ráno – obrovské, stlačené písma rozprestierajúce sa v úplnej tme, jediný záblesk oranžového svetla na navigačnom paneli, všetko ostatné biele alebo strašidelne sivé.
- Ori — Serverovňa o polnoci je čierna prázdnota, biele svetlo, jeden zapnutý vypínač.
- Amaterasu — Nebeská tyrkysová svätyňa
- Stink Studios — Filmové štúdio o polnoci - projektor hučí, miestnosť je tmavá, svieti iba film
- Obsidian — Úložisko krištáľovo čistých vedomostí. Jasný, mnohostranný digitálny priestor navrhnutý pre jasnosť a sústredenie, so žiarivými fialovými žilami interakcie.