Spotify
Kontrolna soba za noćni džuboks
Spotifyjev web interfejs je gusti, tamni centar za kontrolu medija: gotovo crno platno ukrašeno živopisnim omotom albuma, jednim prepoznatljivim zelenim akcentom i kontrolama u obliku tablete. Tipografija je kompaktna i utilitarna - prilagođeno dizajniran geometrijski sans-serif font male veličine, koji omogućava omotu albuma i fotografijama izvođača da obave najveći dio vizualnog posla. Raspored je fiksna ljuska s dvije kolone (bočna traka + glavni feed) s mrežom kvadratnih omota albuma i okruglih avatara, stvarajući ritmičku izmjenu geometrijskih tipova. Interfejs izbjegava nagle promjene visine, oslanjajući se na suptilne površinske razlike (kartice #121212 na platnu #000000) i jedan veliki gradijentni banner za energiju. Rezultat je osjećaj DJ kabine: gusta informacijama, akustično tamna i spremna za sviranje na prvi pogled.
Fiksni raspored s dva stupca sadrži lijevu bočnu traku ("Vaša biblioteka") i responzivno područje glavnog sadržaja. Gornja traka je crna traka pune širine s pretragom s lijeve strane i radnjama računa s desne strane. Glavni sadržaj se pomiče vertikalno, s horizontalnim vrtuljcima kartica - popularne pjesme u kvadratnoj mreži s 5 stupaca, popularni izvođači u kružnoj mreži s 5 stupaca i popularni albumi/singlovi koji nastavljaju ovaj obrazac. Razmak između odjeljaka je kompaktan (32 cm). Donji reklamni banner je usidren na dnu prikaza. Navigacija se vrši isključivo putem gornje trake i bočne trake - bez mega-izbornika ili navigacijskih mrvica. Ritam se izmjenjuje: kvadratne kartice → okrugle kartice → kvadratne kartice, stvarajući geometrijski kontrast između odjeljaka.
Omoti albuma i fotografije izvođača su primarni vizuelni sadržaj. Omoti su predstavljeni kao gusti kvadratni fragmenti (omjer stranica 1:1) sa radijusom od 6px - dovoljno oštri da izgledaju urednički, a opet dovoljno mekani da budu savremeni. Fotografije izvođača su okrugli fragmenti, koji naglašavaju lice kao identifikator. Glavni interfejs je bez dekorativnih fotografija, slika životnog stila ili apstraktne grafike. Jedini vizuelni element koji nije fotografski je ljubičasto-plavi gradijentni baner na dnu, koji služi kao jedini element boje brenda. Ikone su minimalističke, monolinearne, bijele na tamnoj pozadini - male i funkcionalne, nikada dekorativne.
Paleta
Brend
- Spotify Green
#1ed760— Zelena se koristi kao sekundarni naglasak za dekorativne detalje i za isticanje rjeđe korištenih upita za pretraživanje. Ne bi se trebala koristiti kao primarna boja za pozive na akciju.
Neutralno
- Pure White
#ffffff— Svijetla potporna površina za stvaranje neupadljive pozadine i odvajanje dijelova. Ne bi se trebala koristiti kao primarna boja za poziv na akciju. - Signal Red
#b85850— Crvena služi kao prateći akcenat za dekorativne detalje i za isticanje neuobičajenih boja. Koristite je kao prateći akcenat, a ne kao statusnu boju. - Void Black
#000000— Platno stranice, pozadina gornje navigacije, najdublji površinski sloj - Carbon
#121212— Kartonske površine, bočne ploče, sekundarni površinski sloj preko platna - Graphite
#1f1f1f— Podignuta površina - stanja lebdenja, polja za unos, odabrani elementi navigacije. - Smoke
#292929— Aktivna pozadina navigacije, blagi efekat pozadinskog osvjetljenja.
Tipografija
od 11 do 24px · 4 koraka
- SpotifyMixUI — zamjena: Inter · obrisi 400, 600, 700 · Tekst teksta, navigacija, dugmad, metapodaci, mali natpisi - kompaktan, informacijama bogat dizajn osmišljen da bude suptilan, omogućavajući umjetničkom djelu da dominira.
- SpotifyMixUITitle — zamjena: Inter weight 700 · obrisi 700 · Naslovi odjeljaka („Popularne pjesme“, „Popularni izvođači“) - podebljani font umjerene veličine ističe naslove bez preopterećenja mreže kartica.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | gust |
| Osnovni korak | 8-12px |
| Radijus dugmeta | 9999px |
| Radijus kartice | 6px |
| Sjene | minimalno |
| Između sekcija | 32-48px |
Vještačka inteligencija će izgraditi vašu web stranicu u Spotify stilu i popuniti je
- Popunite proizvodima i objavama putem linka - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa vaše stare stranice - samo navedite adresu.
- Moderan dizajn na najboljem engine-u: React ( Next.js) sa serverskim renderovanjem i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretrage i preporuke neuronskih mreža.
Slični stilovi
- Resend — crni baršun s ljubičastom neonskom bojom
- Neon — Serverska soba nakon mraka. Čisti mrak, gdje jedino svjetlo dolazi od podataka i korisničkih interakcija.
- Discord — Svijet igre je skriven iza iskačućeg prozora za chat - svaki dio je samostalno okruženje sa svojim vlastitim osvjetljenjem i skupom likova.
- Idle Finance — Neonski trgovački prostor terminala za dubokomorsku plovidbu je mračan pomorski terminal gdje jedno plavo svjetlo probija tamu.
- Midjourney — Bioluminiscentni terminal u dubokom okeanu. Dubokomorski svijet gdje se inteligencija vizualno generira u ASCII tokovima, a kontrole se pojavljuju kao slabo sjajni uzorci.
- Netflix — Beskonačna digitalna polica. Filmsko iskustvo u kojem se beskrajna biblioteka sadržaja predstavlja uz potpuno mračnu, pozorišnu pozadinu.
- Wope — Wope je ljubičasti horizontski interfejs. Zamislite tamni stol za osmatranje s ljubičastim svjetlom koje sija ispod stakla.
- basement — Prazna štamparija u 3 ujutro – ogromni, komprimirani fontovi šire se po mrklom mraku, jedan bljesak narandžastog svjetla na navigacijskoj traci, sve ostalo bijelo ili sablasno sivo.
- Ori — Serverska soba u ponoć je crna praznina, bijelo svjetlo, jedan uključen prekidač.
- Amaterasu — Nebesko tirkizno utočište
- Stink Studios — Filmski studio u ponoć - projektor zuji, soba je mračna, osvijetljen je samo film
- Obsidian — Spremište kristalnog znanja. Jasan, višeslojan digitalni prostor dizajniran za jasnoću i fokus, sa svjetlucavim ljubičastim venama interakcije.