Spotify
Төнге музыкабокс белән идарә итү бүлмәсе
Spotify веб-интерфейсы - тыгыз, караңгы медиа контроль үзәге: якты альбом бизәкләре, бер имзалы яшел акцент һәм таблетка формасындагы контроль элементлары белән бизәлгән кара төстәге полотно. Типография компакт һәм утилитар - кечкенә зурлыкта махсус эшләнгән геометрик sans-serif шрифты, альбом бизәкләре һәм рәссам фотоларына визуаль эшнең күп өлешен башкарырга мөмкинлек бирә. Макет - квадрат альбом бизәкләре һәм түгәрәк аватарлар челтәре белән билгеләнгән ике баганалы тышлык (ян панель + төп лента), геометрик типларның ритмик чиратлашуын булдыра. Интерфейс биеклектәге кискен үзгәрешләрдән кача, нечкә өслек аермаларына (#000000 полотносында #121212 карточкалары) һәм энергия өчен бер зур градиент баннерына таяна. Нәтиҗәдә, DJ кабинасы кебек хис туа: мәгълүматка бай, акустик яктан караңгы һәм бер карашта уйнарга әзер.
Ике баганалы макет сул яктагы ян панельне ("Сезнең китапханәгез") һәм җаваплы төп эчтәлек өлкәсен үз эченә ала. Өске панель - сулда эзләү һәм уңда хисап язмасы гамәлләре булган тулы киңлектәге кара панель. Төп эчтәлек вертикаль рәвештә әйләндерелә, горизонталь рәвештә карточкалар карусельләре белән - 5 баганалы квадрат челтәрдә популяр җырлар, 5 баганалы түгәрәк челтәрдә популяр артистлар һәм бу үрнәкне дәвам итүче популяр альбомнар/сингллар. Бүлекләр арасындагы ара тыгыз (32 см). Аскы реклама баннеры карау терезесенең аскы өлешенә беркетелгән. Навигация өске панель һәм ян панель аша гына башкарыла - мега-менюлар яки вакланган әйберләр юк. Ритм чиратлаша: квадрат карточкалар → түгәрәк карточкалар → квадрат карточкалар, бүлекләр арасында геометрик контраст тудыра.
Альбом тышлыклары һәм рәссам фотолары төп визуаль контент булып тора. Тышлыклар тыгыз квадрат фрагментлар (1:1 аспект нисбәте) һәм 6 пиксель радиусы белән тәкъдим ителә - редакция өчен җитәрлек ачык, шул ук вакытта заманча булырлык йомшак. Рәссам фотолары - түгәрәк фрагментлар, алар йөзне идентификацияләүче буларак ассызыклыйлар. Төп интерфейс декоратив фотолардан, яшәү рәвеше рәсемнәреннән яки абстракт графикадан азат. Фотографик булмаган бердәнбер визуаль элемент - аскы өлешендәге шәмәхә-зәңгәр төстәге градиент баннер, ул бренд төсенең бердәнбер элементы булып хезмәт итә. Иконалар минималист, монолиней, караңгы фонда ак - кечкенә һәм функциональ, беркайчан да декоратив түгел.
Палитра
Бренд
- 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 — Кристалл белемнәр саклагычы. Ачыклык һәм игътибар өчен эшләнгән, якты шәмәхә төстәге үзара бәйләнеш тамырлары белән ачык, күпкырлы санлы киңлек.