Spotify
Gaueko jukebox kontrol gela
Spotify-ren web interfazea multimedia kontrol zentro trinko eta ilun bat da: mihise ia beltza, albumaren azal biziekin apaindua, azentu berde bereizgarri bakarra eta pilula itxurako kontrolak. Tipografia trinkoa eta utilitarioa da: tamaina txikiko sans-serif letra-tipo geometriko pertsonalizatua, albumaren azalak eta artisten argazkiek lan bisualaren zatirik handiena egiteko aukera emanez. Diseinua bi zutabeko oskola finko bat da (alboko barra + jario nagusia), albumaren azal karratuen eta avatar biribilduen sareta batekin, mota geometrikoen txandakatze erritmikoa sortuz. Interfazeak altueraren aldaketa zorrotzak saihesten ditu, gainazaleko bereizketa sotiletan oinarrituz (#121212 txartelak #000000 mihise batean) eta energia lortzeko gradiente banner handi bakar batean. Emaitza DJ kabina baten sentsazioa da: informazioz betea, akustikoki iluna eta begirada batean jotzeko prest.
Bi zutabeko diseinu finko batek ezkerreko alboko barra bat ("Zure liburutegia") eta eduki nagusiaren eremu moldakor bat ditu. Goiko barra zabalera osoko barra beltza da, bilaketa ezkerrean eta kontuaren ekintzak eskuinean dituela. Eduki nagusia bertikalki mugitzen da, txartelen karrusel horizontalekin: abesti ezagunak 5 zutabeko sareta karratu batean, artista ezagunak 5 zutabeko sareta zirkular batean eta album/single ezagunak eredu horri jarraituz. Atalen arteko tartea trinkoa da (32 cm). Beheko iragarki-bannerra ikuspegiaren behealdean ainguratuta dago. Nabigazioa goiko barraren eta alboko barraren bidez soilik kudeatzen da; ez dago mega-menurik edo ogi-apurrik. Erritmoa txandakatzen da: txartel karratuak → txartel biribilak → txartel karratuak, atalen arteko kontraste geometrikoa sortuz.
Diskoen azalak eta artisten argazkiak dira ikus-entzunezko eduki nagusia. Azalak 6 pixeleko erradioko zati karratu trinko gisa aurkezten dira (1:1 alderdi-erlazioa), —editorial itxura izateko bezain garbiak, baina garaikideak izateko bezain leunak. Artisten argazkiak zati biribilak dira, aurpegia identifikatzaile gisa azpimarratuz. Interfaze nagusian ez dago argazki apaingarririk, bizimodu irudirik edo grafiko abstrakturik. Elementu bisual ez-fotografiko bakarra beheko more-urdin gradienteko pankarta bat da, markaren kolorearen elementu bakarra dena. Ikonoak minimalistak, monolinealak, zuriak dira atzealde ilun batean —txikiak eta funtzionalak, inoiz ez apaingarriak.
Paleta
Marka
- Spotify Green
#1ed760— Berdea bigarren mailako azentu gisa erabiltzen da xehetasun apaingarrietarako eta gutxiago erabiltzen diren bilaketa-kontsultak nabarmentzeko. Ez da erabili behar ekintzarako deietarako kolore nagusi gisa.
Neutroa
- Pure White
#ffffff— Atzeko plano diskretu bat sortzeko eta atalak bereizteko gainazal arin bat. Ez da erabili behar ekintzarako deiaren kolore nagusi gisa. - Signal Red
#b85850— Gorriak xehetasun apaingarrietarako eta kolore ezohikoak nabarmentzeko balio du. Erabili osagarri gisa, ez estatus-kolore gisa. - Void Black
#000000— Orriaren mihisea, goiko nabigazio-atzeko planoa, gainazaleko geruza sakonena - Carbon
#121212— Kartoizko gainazalak, alboko panelak, mihise gaineko bigarren mailako gainazal geruza - Graphite
#1f1f1f— Gainazal altxatua - gainetik pasatzean egoerak, sarrera eremuak, hautatutako nabigazio elementuak. - Smoke
#292929— Nabigazio aktiboaren atzeko planoa, atzeko argi efektu txikia.
Tipografia
11tik 24px-ra · 4 urrats
- SpotifyMixUI — ordezkapena: Inter · eskemak 400, 600, 700 · Gorputzaren testua, nabigazioa, botoiak, metadatuak, azpititulu txikiak: diseinu trinkoa eta informazioz aberatsa, sotila izateko diseinatua, elementu artistikoek nagusi izan daitezen.
- SpotifyMixUITitle — ordezkapena: Inter weight 700 · eskemak 700 · Atalen izenburuak ("Abesti ezagunak", "Artista ezagunak") - letra-tipo lodi eta tamaina ertainekoak izenburuak nabarmentzen ditu txartel-sareta gainkargatu gabe.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | trinko |
| Oinarrizko urratsa | 8-12px |
| Botoiaren erradioa | 9999px |
| Txartelaren erradioa | 6px |
| Itzalak | minimoa |
| Atalen artean | 32-48px |
Adimen artifizialak zure webgunea Spotify estiloan eraikiko du eta beteko du
- Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
- Transferitu edukia zure gune zaharretik: zehaztu helbidea.
- Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
- Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.
Estilo antzekoak
- Resend — belusezko beltza neon more kolorearekin
- Neon — Zerbitzari-gela bat iluntzean. Iluntasun hutsa, non argi bakarra datuetatik eta erabiltzaileen interakzioetatik datorren.
- Discord — Jokoaren mundua txat leiho baten atzean ezkutatuta dago: atal bakoitza ingurune independente bat da, bere argiztapen eta pertsonaia multzo propioarekin.
- Idle Finance — Itsas sakoneko terminalen neon koloreko merkataritza-solairua itsas terminal ilun bat da, non argi urdin bakar batek iluntasuna zulatu egiten duen.
- Midjourney — Ozeano sakoneko terminal bioluminiszente bat. Itsaso sakoneko mundu bat, non adimena bisualki ASCII jarioetan sortzen den, eta kontrolak distira ahuleko eredu gisa agertzen diren.
- Netflix — Apal Digital Infinitua. Esperientzia zinematografiko bat, non edukien liburutegi amaigabe bat aurkezten den atzealde ilun eta teatral baten aurrean.
- Wope — Wope horizonte morearen interfazea da. Imajinatu behatoki-mahaia ilun bat, kristalaren azpitik argi more bat ateratzen dela.
- basement — Inprenta huts bat goizeko 3etan – letra-tipo konprimitu erraldoiak beltzean zehar zabaltzen, argi laranja distira bakarra nabigazio-barran, beste guztia zuria edo gris mamutsua.
- Ori — Zerbitzarien gela gauerdian hutsune beltza da, argi zuria, etengailu bakarra piztuta.
- Amaterasu — Zeruko Turkesa Santutegia
- Stink Studios — Zinema estudio bat gauerdian - proiektorea burrunba egiten du, gela ilun dago, filma bakarrik dago argiztatuta
- Obsidian — Ezagutza kristalinoaren biltegi bat. Argitasunerako eta fokurako diseinatutako espazio digital argi eta anitzekoa, interakzio-zain more distiratsuekin.