Spotify
Tungi jukebox boshqaruv xonasi
Spotify veb-interfeysi zich, qorong'u media boshqaruv markazidir: jonli albom rasmlari, bitta imzo yashil aksenti va tabletka shaklidagi boshqaruv elementlari bilan bezatilgan deyarli qora tuval. Tipografiya ixcham va utilitar - kichik o'lchamdagi maxsus ishlab chiqilgan geometrik sans-serif shrifti, albom rasmlari va rassomlarning fotosuratlari vizual ishning asosiy qismini bajarishga imkon beradi. Joylashuv kvadrat albom rasmlari va yumaloq avatarlar panjarasi bilan ikki ustunli qobiq (yon panel + asosiy lenta) bo'lib, geometrik turlarning ritmik almashinuvini yaratadi. Interfeys balandlikdagi keskin o'zgarishlardan qochadi, nozik sirt farqlariga (#000000 tuvaldagi #121212 kartalar) va energiya uchun bitta katta gradient bannerga tayanadi. Natijada DJ kabinasi hissi paydo bo'ladi: ma'lumotlarga boy, akustik jihatdan qorong'i va bir qarashda ijro etishga tayyor.
Ikki ustunli tartib chap yon panel ("Sizning kutubxonangiz") va moslashuvchan asosiy kontent maydoniga ega. Yuqori panel chap tomonda qidiruv va o'ng tomonda hisob harakatlari joylashgan to'liq kenglikdagi qora paneldir. Asosiy kontent vertikal ravishda aylantiriladi, gorizontal karusellar kartalari bilan - 5 ustunli kvadrat panjara ichida mashhur qo'shiqlar, 5 ustunli dumaloq panjara ichida mashhur ijrochilar va shu naqshni davom ettiruvchi mashhur albomlar/singllar. Bo'limlar orasidagi masofa ixcham (32 sm). Pastki reklama banneri ko'rish maydonining pastki qismida joylashgan. Navigatsiya faqat yuqori panel va yon panel orqali amalga oshiriladi - mega-menyular yoki non ushoqlari yo'q. Ritm almashinadi: kvadrat kartalar → dumaloq kartalar → kvadrat kartalar, bo'limlar o'rtasida geometrik kontrast yaratadi.
Albom muqovalari va rassomlarning fotosuratlari asosiy vizual kontent hisoblanadi. Muqovalar 6 piksel radiusli zich kvadrat bo'laklar (1:1 tomonlar nisbati) sifatida taqdim etiladi — tahririyatga mos keladigan darajada aniq, ammo zamonaviy ko'rinishga ega bo'lish uchun yetarlicha yumshoq. Rassomlarning fotosuratlari yumaloq bo'laklar bo'lib, yuzni identifikator sifatida ta'kidlaydi. Asosiy interfeys dekorativ fotosuratlar, turmush tarzi tasvirlari yoki mavhum grafikalardan xoli. Fotosuratga oid bo'lmagan yagona vizual element pastki qismidagi binafsha-ko'k gradient banner bo'lib, u brend rangining yagona elementi bo'lib xizmat qiladi. Piktogrammalar minimalist, monolinear, qorong'i fonda oq — kichik va funktsional, hech qachon dekorativ emas.
Palitra
Brend
- Spotify Green
#1ed760— Yashil rang dekorativ detallar uchun ikkinchi darajali urg'u va kamroq ishlatiladigan qidiruv so'rovlarini ta'kidlash uchun ishlatiladi. U harakatga chaqiruvlar uchun asosiy rang sifatida ishlatilmasligi kerak.
Neytral
- Pure White
#ffffff— Ko'zga tashlanmaydigan fon yaratish va qismlarni ajratish uchun yengil tayanch sirt. U harakatga chaqiruv uchun asosiy rang sifatida ishlatilmasligi kerak. - Signal Red
#b85850— Qizil rang dekorativ detallar uchun qo'llab-quvvatlovchi aksent bo'lib xizmat qiladi va noyob ranglarni ta'kidlaydi. Uni holat rangi sifatida emas, balki qo'llab-quvvatlovchi aksent sifatida foydalaning. - Void Black
#000000— Sahifa kanvasi, yuqori navigatsiya foni, eng chuqur sirt qatlami - Carbon
#121212— Karton yuzalar, yon panellar, tuval ustidagi ikkilamchi sirt qatlami - Graphite
#1f1f1f— Ko'tarilgan sirt - sichqonchani havoda ushlab turish holatlari, kiritish maydonlari, tanlangan navigatsiya elementlari. - Smoke
#292929— Faol navigatsiya foni, ozgina orqa yorug'lik effekti.
Tipografiya
11 dan 24 pikselgacha · 4 qadam
- SpotifyMixUI — almashtirish: Inter · konturlar 400, 600, 700 · Asosiy matn, navigatsiya, tugmalar, metama'lumotlar, kichik sarlavhalar — ixcham, ma'lumotlarga boy dizayn nozik tarzda yaratilgan bo'lib, badiiy asarning ustunlik qilishiga imkon beradi.
- SpotifyMixUITitle — almashtirish: Inter weight 700 · konturlar 700 · Bo'lim sarlavhalari ("Ommabop qo'shiqlar", "Ommabop ijrochilar") - qalin, o'rtacha o'lchamdagi shrift sarlavhalarni kartalar panjarasini ortiqcha yuklamasdan ajratib turadi.
Intervallar va shakl
| Maqsad | Ma'nosi |
|---|---|
| Zichlik | zich |
| Asosiy qadam | 8-12px |
| Tugma radiusi | 9999px |
| Karta radiusi | 6px |
| Soyalar | minimal |
| Bo'limlar orasida | 32-48px |
Sun'iy intellekt veb-saytingizni Spotify uslubida yaratadi va uni to'ldiradi
- Mahsulotlar va postlarni Instagram, TikTok, Facebook havolalari orqali to'ldiring.
- Eski saytingizdan kontentni o'tkazing — shunchaki manzilni ko'rsating.
- Eng yaxshi dvigatelda zamonaviy dizayn: React ( Next.js) server renderlash va SEO optimallashtirish bilan darhol.
- Qidiruv natijalari va neyron tarmoq tavsiyalari uchun to'liq avtomatlashtirilgan SEO optimallashtirish.
O'xshash uslublar
- Resend — binafsha neon rangli qora baxmal
- Neon — Qorong'i tushgandan keyingi server xonasi. Sof zulmat, bu yerda yorug'lik faqat ma'lumotlar va foydalanuvchilarning o'zaro ta'siridan keladi.
- Discord — O'yin dunyosi qalqib chiquvchi chat oynasi orqasida yashiringan - har bir bo'lim o'ziga xos yoritish va belgilar to'plamiga ega mustaqil muhitdir
- Idle Finance — Chuqur dengiz terminallarining neon savdo maydonchasi qorong'u dengiz terminali bo'lib, u yerda bitta ko'k chiroq zulmatni teshib o'tadi.
- Midjourney — Chuqur okeandagi biolyuminestsent terminal. Aql-idrok ASCII oqimlarida vizual ravishda o'zini yaratadigan va boshqaruv elementlari xira porlab turgan naqshlar sifatida ko'rinadigan chuqur dengiz dunyosi.
- Netflix — Cheksiz raqamli javon. Cheksiz kontent kutubxonasi tinimsiz, teatrlashtirilgan fonda taqdim etiladigan kinematografik tajriba.
- Wope — Wope binafsha ufq interfeysi. Shisha ostidan binafsha nur taralayotgan qorong'u rasadxona stolini tasavvur qiling.
- basement — Ertalab soat 3 da bo'sh bosmaxona – ulkan, siqilgan shriftlar qora rangda yoyilib yotibdi, navigatsiya panelida to'q sariq rangning bir parchasi, qolgan hamma narsa oq yoki sharpa kulrang.
- Ori — Yarim tunda server xonasi qora bo'shliq, oq chiroq, bitta tugma yoniq.
- Amaterasu — Samoviy firuza qo'riqxonasi
- Stink Studios — Yarim tunda kinostudiya - proyektor g'uvullaydi, xona qorong'i, faqat plyonka yoritilgan
- Obsidian — Kristalli bilimlar ombori. Aniqlik va diqqatni jamlash uchun mo'ljallangan, yorqin binafsha rangli o'zaro ta'sir tomirlari bilan yaratilgan tiniq, ko'p qirrali raqamli makon.