Spotify
Kontrolna soba noćnog džuboksa
Spotifyjevo web sučelje je gusti, tamni centar za kontrolu medija: gotovo crno platno ukrašeno živopisnim omotom albuma, jednim prepoznatljivim zelenim naglaskom i kontrolama u obliku tablete. Tipografija je kompaktna i utilitarna - prilagođeno dizajniran geometrijski sans-serif font male veličine, koji omogućuje omotu albuma i fotografijama izvođača da obave većinu vizualnog posla. Izgled je fiksna ljuska s dva stupca (bočna traka + glavni feed) s mrežom kvadratnih omota albuma i okruglih avatara, stvarajući ritmičku izmjenu geometrijskih tipova. Sučelje 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: bogat informacijama, akustički mračan i spreman za sviranje na prvi pogled.
Fiksni raspored s dva stupca sadrži lijevu bočnu traku ("Vaša knjižnica") i responzivno područje glavnog sadržaja. Gornja traka je crna traka pune širine s pretraživanjem s lijeve strane i radnjama računa s desne strane. Glavni sadržaj se pomiče okomito, s horizontalnim vrtuljima 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 uzorak. Razmak između odjeljaka je kompaktan (32 cm). Donji oglasni banner usidren je 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 primarni su vizualni sadržaj. Omoti su prikazani kao gusti kvadratni fragmenti (omjer slike 1:1) s radijusom od 6px - dovoljno oštri da izgledaju urednički, a opet dovoljno mekani da budu suvremeni. Fotografije izvođača su okrugli fragmenti, koji naglašavaju lice kao identifikator. Glavno sučelje ne sadrži dekorativne fotografije, slike životnog stila ili apstraktnu grafiku. Jedini vizualni element koji nije fotografski je ljubičasto-plavi gradijentni banner 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
Robna marka
- 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 naglasak za dekorativne detalje i za isticanje neuobičajenih boja. Koristite je kao prateći naglasak, 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 navigacijski elementi. - Smoke
#292929— Aktivna navigacijska pozadina, blagi efekt pozadinskog osvjetljenja.
Tipografija
od 11 do 24px · 4 koraka
- SpotifyMixUI — zamjena: Inter · obrisi 400, 600, 700 · Tekst teksta, navigacija, gumbi, metapodaci, mali opisi - kompaktan, informacijama bogat dizajn osmišljen da bude suptilan, omogućujući dominaciju umjetničkih elemenata.
- 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 gumba | 9999px |
| Radijus kartice | 6px |
| Sjene | minimalno |
| Između odjeljaka | 32-48px |
Umjetna inteligencija će izraditi vašu web stranicu u Spotify stilu i ispuniti je
- Popunite proizvodima i objavama putem poveznice - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa svoje stare web-lokacije - samo navedite adresu.
- Moderan dizajn na najboljem engineu: React ( Next.js) s renderiranjem na serveru i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretraživanja 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 skriven je iza skočnog prozora za chat - svaki dio je samostalno okruženje s vlastitom rasvjetom i skupom likova.
- Idle Finance — Neonski trgovački prostor terminala za dubokomorsku plovidbu mračan je pomorski terminal gdje jedno plavo svjetlo probija tamu.
- Midjourney — Bioluminiscentni terminal u dubokom oceanu. Dubokomorski svijet u kojem 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 prikazuje uz mračnu, kino pozadinu.
- Wope — Wope je ljubičasto sučelje horizonta. Zamislite tamni stol promatračnice s ljubičastim svjetlom koje zrači ispod stakla.
- basement — Prazna tiskarska preša u 3 ujutro – ogromni, komprimirani fontovi šire se po mrklom mraku, jedan bljesak naranč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 svetiš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 žilama interakcije.