Spotify
Пакой кіравання начным музычным аўтаматам
Вэб-інтэрфейс Spotify – гэта шчыльны, цёмны цэнтр кіравання медыякантэнтам: амаль чорнае палатно, упрыгожанае яркімі вокладкамі альбомаў, адным фірмовым зялёным акцэнтам і элементамі кіравання ў форме таблетак. Друкарня кампактная і ўтылітарная - спецыяльна распрацаваны геаметрычны шрыфт без засечак невялікага памеру, які дазваляе вокладкам альбомаў і фатаграфіям выканаўцаў выконваць асноўную візуальную працу. Макет уяўляе сабой фіксаваную двухкалонкавую абалонку (бакавая панэль + асноўная стужка) з сеткай з квадратных вокладак і круглых аватараў, якія ствараюць рытмічнае чаргаванне геаметрычных тыпаў. Інтэрфейс пазбягае рэзкіх перападаў вышыні, належачы на тонкае адрозніванне паверхняў (карткі #121212 на палатне #000000) і адзін вялікі градыентны банэр для надання энергіі. У выніку ствараецца адчуванне дыджэйскай апаратнай: насычанай інфармацыяй, акустычна цёмнай і гатовай да прайгравання з першага погляду.
Фіксаваная двухкалонкавая абалонка: левая бакавая панэль («Ваша бібліятэка») і адаптыўная асноўная вобласць кантэнту. Верхняя панэль уяўляе сабой чорную паласу ва ўсю шырыню з пошукам злева і дзеяннямі з уліковым запісам справа. Асноўны кантэнт пракручваецца вертыкальна, з гарызантальнымі каруселямі-карткамі — папулярныя песні ў 5-калонкавай квадратнай сетцы, папулярныя выканаўцы ў 5-калонкавай круглай сетцы, папулярныя альбомы/сінглы працягваюць гэты шаблон. Адлегласць паміж раздзеламі кампактнае (32 см). Ніжні рэкламны банэр замацаваны на ўзроўні ніжняй часткі вобласці прагляду. Навігацыя ажыццяўляецца выключна з дапамогай верхняй панэлі і бакавой панэлі - без мега-меню і хлебных крошак. Рытм чаргуецца: квадратныя карткі → круглыя карткі → квадратныя карткі, ствараючы геаметрычны кантраст паміж раздзеламі.
Вокладкі альбомаў і фатаграфіі выканаўцаў з'яўляюцца асноўным візуальным кантэнтам. Вокладкі прадстаўлены ў выглядзе шчыльных квадратных фрагментаў (суадносіны бакоў 1:1) з радыусам 6px - дастаткова выразных, каб выглядаць як рэдакцыйныя матэрыялы, і дастаткова мяккіх, каб выглядаць сучасна. Фатаграфіі выканаўцаў уяўляюць сабой круглыя фрагменты, якія падкрэсліваюць твар як ідэнтыфікатар. У асноўным інтэрфейсе няма дэкаратыўных фатаграфій, малюнкаў у стылі лайфстайл, абстрактнай графікі. Адзіны нефатаграфічны візуальны элемент - гэта рэкламны банэр з градыентам ад пурпурнога да сіняга ўнізе, які служыць адзіным элементам фірмовага колеру. Абразкі мінімалістычныя, маналінейныя, белыя на цёмным фоне - маленькія і функцыянальныя, ніколі не дэкаратыўныя.
Палітра
Брэнд
- Spotify Green
#1ed760— Зялёны колер выкарыстоўваецца ў якасці дапаможнага акцэнту для дэкаратыўных дэталяў і акцэнтаванні ўвагі на нячастых запытах. Не варта вылучаць яго як асноўны колер закліку да дзеяння.
Нейтральныя
- Pure White
#ffffff— Лёгкая апорная паверхня для стварэння ненадакучлівага фону і падзелу раздзелаў. Не варта вылучаць яе як асноўны колер закліку да дзеяння. - Signal Red
#b85850— Чырвоны колер служыць дапаможным акцэнтам для дэкаратыўных дэталяў і акцэнтаванні ўвагі на нячастых колерах. Выкарыстоўвайце яго як дапаможны акцэнт, а не як колер статусу. - Void Black
#000000— Палатно старонкі, фон верхняй навігацыі, самы глыбокі павярхоўны пласт - Carbon
#121212— Кардонныя паверхні, бакавыя панэлі, другасны павярхоўны пласт па-над палатном - Graphite
#1f1f1f— Прыпаднятая паверхня - станы пры навядзенні курсора, палі ўводу, абраныя элементы навігацыі. - Smoke
#292929— Фон актыўнай навігацыі, лёгкі эфект падсветкі.
Друкарня
ад 11 да 24px · 4 прыступак
- SpotifyMixUI — замена: Inter · напісання 400, 600, 700 · Асноўны тэкст, рух, кнопкі, метададзеныя, невялікія подпісы - кампактны і насычаны інфармацыяй дызайн, закліканы стаць незаўважным, каб мастацкае афармленне дамінавала.
- SpotifyMixUITitle — замена: Inter weight 700 · напісання 700 · Загалоўкі раздзелаў ("Папулярныя песні", "Папулярныя выканаўцы") - тоўсты шрыфт умеранага памеру робіць загалоўкі выразнымі, не перагружаючы сетку картак.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | шчыльная |
| Базавы крок | 8-12px |
| Радыус кнопак | 9999px |
| Радыус картак | 6px |
| Цені | мінімальныя |
| Паміж секцыямі | 32-48px |
ІІ збярэ ваш сайт у стылі Spotify і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- Resend — чорны аксаміт з фіялетавым неонавым колерам
- Neon — Серверны пакой пасля наступлення цемры. Глыбокая цемра, дзе адзінымі крыніцамі святла з'яўляюцца дадзеныя і ўзаемадзеянне паміж карыстальнікамі
- Discord — Гульнявы свет скрыты за ўсплывальным акном чата - кожны раздзел уяўляе сабой самадастатковае асяроддзе са сваім уласным асвятленнем і наборам персанажаў.
- Idle Finance — Неонавая гандлёвая зала глыбакаводных тэрміналаў - цёмны ваенна-марскі тэрмінал, дзе адзінае блакітнае святло пранізвае змрок
- Midjourney — Біялюмінесцэнтны тэрмінал у глыбакаводных раёнах акіяна. Глыбакаводны свет, дзе інтэлект наглядна генеруе сябе ў патоках ASCII, а элементы кіравання выглядаюць як слаба свецяцца ўзоры
- Netflix — Бясконцая лічбавая паліца. Кінематаграфічны вопыт, дзе бясконцая бібліятэка кантэнту прадстаўлена на фоне абсалютна чорнага, тэатральнага задніка
- Wope — Wope - інтэрфейс фіялетавага гарызонту. Уявіце сабе цёмны стол у абсерваторыі, з-пад шкла якога паднімаецца фіялетавы светлавы струмень
- basement — Пустая друкарня ў 3 гадзіны ночы - велізарныя, сціснутыя шрыфты, якія расцякаюцца па апраметнай цемры, адзін пробліск аранжавага святла на навігацыйнай панэлі, усё астатняе белае або прывідна-шэрае
- Ori — Серверны пакой апоўначы - чорная пустата, белае святло, адзін уключаны выключальнік
- Amaterasu — Нябеснае бірузовае свяцілішча
- Stink Studios — Кінастудыя апоўначы - праектар гудзе, у пакоі цёмна, свеціцца толькі кінастужка
- Obsidian — Сховішча крышталёвых ведаў. Дакладная, шматгранная лічбавая прастора, створаная для яснасці і засяроджанасці, з зіготкімі фіялетавымі пражылкамі ўзаемадзеяння