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