Spotify
Éjszakai zenegép vezérlőterem
A Spotify webes felülete egy sűrű, sötét médiavezérlő központ: egy közel fekete vászon, amelyet élénk albumborítók, egyetlen jellegzetes zöld díszítés és pirula alakú vezérlők díszítenek. A tipográfia kompakt és haszonelvű – egyedi tervezésű geometrikus sans-serif betűtípus kis méretben, lehetővé téve, hogy az albumborító és az előadó fotói végezzék a vizuális munka nagy részét. Az elrendezés egy fix kétoszlopos héj (oldalsáv + fő hírfolyam), négyzet alakú albumborítókból és kerek avatarokból álló ráccsal, amely a geometriai típusok ritmikus váltakozását hozza létre. A felület kerüli az éles magasságváltozásokat, finom felületi megkülönböztetésekre (#121212 kártyák egy #000000 vásznon) és egyetlen nagy, színátmenetes bannerre támaszkodik az energia érdekében. Az eredmény egy DJ-pult érzete: információsűrű, akusztikailag sötét, és egy pillantással játékra kész.
A fix, kétoszlopos elrendezés bal oldalsávot („Saját könyvtár”) és reszponzív fő tartalomterületet tartalmaz. A felső sáv egy teljes szélességű fekete sáv, bal oldalon kereséssel, jobb oldalon pedig fiókműveletekkel. A fő tartalom függőlegesen görgethető, vízszintesen kártyaforgatókkal – népszerű dalok egy 5 oszlopos négyzetrácsban, népszerű előadók egy 5 oszlopos körrácsban, és népszerű albumok/kislemezek, folytatva ezt a mintát. A szakaszok közötti távolság kompakt (32 cm). Az alsó hirdetési banner a nézetablak alján van rögzítve. A navigáció kizárólag a felső sávon és az oldalsávon keresztül történik – nincsenek mega-menük vagy navigációs útvonalak. A ritmus váltakozik: négyzet alakú kártyák → kerek kártyák → négyzet alakú kártyák, geometrikus kontrasztot hozva létre a szakaszok között.
Az albumborítók és az előadók fotói alkotják az elsődleges vizuális tartalmat. A borítók sűrű, négyzet alakú töredékekként jelennek meg (1:1 képarány), 6 képpontos sugarú körökben – elég élesek ahhoz, hogy szerkesztői hatásúak legyenek, mégis elég lágyak ahhoz, hogy kortársak legyenek. Az előadók fotói kerek töredékek, amelyek az arcot azonosítóként hangsúlyozzák. A fő felület mentes a dekoratív fotóktól, életstílus képektől vagy absztrakt grafikáktól. Az egyetlen nem fotografikus vizuális elem egy lilából kékbe színátmenetes banner alul, amely a márka színének egyetlen elemeként szolgál. Az ikonok minimalisták, monolineárisak, fehérek sötét háttéren – kicsik és funkcionálisak, soha nem dekoratívak.
Paletta
Márka
- Spotify Green
#1ed760— A zöld másodlagos hangsúlyként szolgál a díszítő részleteknél és a ritkábban használt keresési lekérdezések kiemelésére. Nem szabad elsődleges színként használni a cselekvésre ösztönzésekhez.
Semleges
- Pure White
#ffffff— Világos tartófelület egy diszkrét háttér létrehozásához és a részek elválasztásához. Nem szabad a cselekvésre ösztönzés elsődleges színeként használni. - Signal Red
#b85850— A piros kiegészítőként szolgál a díszítő részletekhez, és kiemeli a szokatlan színeket. Használd kiegészítőként, ne státuszszínként. - Void Black
#000000— Oldalvászon, felső navigációs háttér, legmélyebb felületi réteg - Carbon
#121212— Karton felületek, oldalpanelek, másodlagos felületi réteg a vászon felett - Graphite
#1f1f1f— Kiemelt felület – lebegési állapotok, beviteli mezők, kiválasztott navigációs elemek. - Smoke
#292929— Aktív navigációs háttér, enyhe háttérvilágítás-effektus.
Tipográfia
11-ről 24 képpontra · 4 lépésben
- SpotifyMixUI — csere: Inter · körvonalak 400, 600, 700 · Törzsszöveg, navigáció, gombok, metaadatok, kis feliratok – egy kompakt, információgazdag dizájn, amelyet visszafogottan terveztek, hogy a művészi elemek domináljanak.
- SpotifyMixUITitle — csere: Inter weight 700 · körvonalak 700 · Fejezetcímek („Népszerű dalok”, „Népszerű előadók”) – a félkövér, közepes méretű betűtípus kiemeli a címsorokat anélkül, hogy túlterhelné a kártyarácsot.
Intervallumok és forma
| Cél | Jelentés |
|---|---|
| Sűrűség | sűrű |
| Alapvető lépés | 8-12px |
| Gomb sugara | 9999px |
| Kártya sugara | 6px |
| Árnyékok | minimális |
| Szakaszok között | 32-48px |
A mesterséges intelligencia Spotify stílusban fogja elkészíteni a weboldaladat, és kitölti azt.
- Töltsd fel termékeidet és posztjaidat a linkeken keresztül - Instagram, TikTok, Facebook.
- Tartalom átvitele régi webhelyéről – csak adja meg a címet.
- Modern dizájn a legjobb keresőmotoron: React ( Next.js) szerveralapú rendereléssel és SEO optimalizálással, azonnal használható formában.
- Teljesen automatizált SEO optimalizálás a keresési eredményekhez és a neurális hálózati ajánlásokhoz.
Hasonló stílusok
- Resend — fekete bársony lila neon színnel
- Neon — Egy szerverszoba sötétedés után. Tiszta sötétség, ahol az egyetlen fény az adatokból és a felhasználói interakciókból származik.
- Discord — A játékvilág egy felugró csevegőablak mögött rejtőzik – minden részleg önálló környezet saját világítással és karakterkészlettel.
- Idle Finance — A mélytengeri terminálok neonfényes kereskedelmi területe egy sötét haditengerészeti terminál, ahol egyetlen kék fény hasítja át a félhomályt.
- Midjourney — Egy biolumineszcens terminál a mélyóceánban. Egy mélytengeri világ, ahol az intelligencia vizuálisan ASCII adatfolyamokban generálja magát, és a vezérlők halványan világító mintákként jelennek meg.
- Netflix — Végtelen Digitális Polc. Egy filmes élmény, ahol egy végtelen tartalomkönyvtár jelenik meg koromsötét, színházi háttér előtt.
- Wope — A Wope egy lila horizontú interfész. Képzelj el egy sötét csillagvizsgáló asztalt, amelynek üvege alól lila fény szűrődik ki.
- basement — Egy üres nyomdagép hajnali 3-kor – hatalmas, tömörített betűtípusok terültek el a koromsötétben, egyetlen narancssárga fény villanása a navigációs sávon, minden más fehér vagy szellemszürke.
- Ori — Éjfélkor a szerverszoba fekete űr, fehér fény, egyetlen kapcsoló ég.
- Amaterasu — Mennyei Türkiz Szentély
- Stink Studios — Egy filmstúdió éjfélkor - a vetítő búg, a szoba sötét, csak a film világít
- Obsidian — Kristálytiszta tudás tárháza. Egy letisztult, sokrétű digitális tér, amelyet az átláthatóság és a fókusz jegyében terveztek, élénklila interakciós erekkel.