Spotify
Gecə jukebox idarəetmə otağı
Spotify-ın veb interfeysi sıx, qaranlıq media idarəetmə mərkəzidir: canlı albom rəsmi, tək imzalı yaşıl vurğu və həb formalı idarəetmə elementləri ilə bəzədilmiş demək olar ki, qara rəngli bir kətan. Tipoqrafiya kompakt və utilitardır - kiçik ölçülü xüsusi hazırlanmış həndəsi sans-serif şrifti, albom rəsmi və sənətçi fotolarının vizual işin əsas hissəsini yerinə yetirməsinə imkan verir. Dizayn, kvadrat albom rəsmi və dəyirmi avatarlardan ibarət bir şəbəkə ilə sabit iki sütunlu bir qabıqdır (yan panel + əsas lent) və həndəsi tiplərin ritmik bir növbəsini yaradır. İnterfeys, incə səth fərqlərinə (#000000 kətan üzərində #121212 kartları) və enerji üçün tək böyük qradiyent bannerə əsaslanaraq hündürlükdə kəskin dəyişikliklərdən qaçınır. Nəticədə DJ kabinəsi hissi yaranır: məlumat sıxlığı, akustik cəhətdən qaranlıq və bir baxışda çalmağa hazırdır.
Sabit iki sütunlu düzülüş sol yan panelə ("Kitabxananız") və cavabdeh əsas məzmun sahəsinə malikdir. Üst panel, solda axtarış və sağda hesab hərəkətləri olan tam enli qara paneldir. Əsas məzmun şaquli olaraq fırlanır, üfüqi karusellər kartları ilə - 5 sütunlu kvadrat şəbəkədə populyar mahnılar, 5 sütunlu dairəvi şəbəkədə populyar sənətçilər və bu nümunəni davam etdirən populyar albomlar/sinqllar. Bölmələr arasındakı məsafə kompaktdır (32 sm). Alt reklam banneri görünüş portalının alt hissəsində lövbərlənib. Naviqasiya yalnız yuxarı panel və yan panel vasitəsilə idarə olunur - meqa menyular və ya çörək qırıntıları yoxdur. Ritm növbələşir: kvadrat kartlar → dəyirmi kartlar → kvadrat kartlar, bölmələr arasında həndəsi kontrast yaradır.
Albom üz qabıqları və rəssam fotoları əsas vizual məzmundur. Üz qabıqları 6 piksel radiuslu sıx kvadrat fraqmentlər (1:1 aspekt nisbəti) şəklində təqdim olunur - redaksiya baxımından kifayət qədər aydın, eyni zamanda müasir olmaq üçün kifayət qədər yumşaqdır. Rəssam fotoları üzü identifikator kimi vurğulayan dəyirmi fraqmentlərdir. Əsas interfeys dekorativ fotolardan, həyat tərzi şəkillərindən və ya mücərrəd qrafikadan azaddır. Yeganə qeyri-fotoqrafik vizual element, brend rənginin yeganə elementi kimi xidmət edən altındakı bənövşəyi-mavi rəngli qradiyent bannerdir. İkonlar minimalist, monoxətti, tünd fonda ağ rəngdədir - kiçik və funksionaldır, heç vaxt dekorativ deyil.
Palitra
Brend
- Spotify Green
#1ed760— Yaşıl rəng dekorativ detallar üçün ikinci dərəcəli vurğu və daha az istifadə olunan axtarış sorğularını vurğulamaq üçün istifadə olunur. Hərəkətə çağırışlar üçün əsas rəng kimi istifadə edilməməlidir.
Neytral
- Pure White
#ffffff— Gözə çarpmayan bir fon yaratmaq və hissələri ayırmaq üçün yüngül dəstəkləyici səth. Hərəkətə çağırış üçün əsas rəng kimi istifadə edilməməlidir. - Signal Red
#b85850— Qırmızı rəng dekorativ detallar üçün dəstəkləyici vurğu və qeyri-adi rəngləri vurğulamaq üçün xidmət edir. Onu status rəngi kimi deyil, dəstəkləyici vurğu kimi istifadə edin. - Void Black
#000000— Səhifə kətan, üst naviqasiya arxa planı, ən dərin səth təbəqəsi - Carbon
#121212— Karton səthlər, yan panellər, kətan üzərində ikinci dərəcəli səth təbəqəsi - Graphite
#1f1f1f— Qaldırılmış səth - hover vəziyyətləri, giriş sahələri, seçilmiş naviqasiya elementləri. - Smoke
#292929— Aktiv naviqasiya fonu, yüngül arxa işıq effekti.
Tipoqrafiya
11-dən 24 pikselə qədər · 4 addım
- SpotifyMixUI — əvəzetmə: Inter · konturlar 400, 600, 700 · Əsas mətn, naviqasiya, düymələr, metaməlumatlar, kiçik başlıqlar — incə olmaq üçün hazırlanmış kompakt, məlumatla zəngin dizayn, bədii elementlərin dominantlıq etməsinə imkan verir.
- SpotifyMixUITitle — əvəzetmə: Inter weight 700 · konturlar 700 · Bölmə başlıqları ("Populyar Mahnılar", "Populyar Sənətçilər") - qalın, orta ölçülü şrift, kart şəbəkəsini həddindən artıq yükləmədən başlıqları fərqləndirir.
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | sıx |
| Əsas addım | 8-12px |
| Düymə radiusu | 9999px |
| Kart radiusu | 6px |
| Kölgələr | minimal |
| Bölmələr arasında | 32-48px |
Süni intellekt veb saytınızı Spotify üslubunda quracaq və onu dolduracaq
- Məhsullar və paylaşımlar ilə Instagram, TikTok, Facebook linkləri vasitəsilə tanış olun.
- Köhnə saytınızdan məzmunu köçürün — sadəcə ünvanı göstərin.
- Ən yaxşı mühərrikdə müasir dizayn: Server render və SEO optimallaşdırması ilə React ( Next.js).
- Axtarış nəticələri və neyron şəbəkə tövsiyələri üçün tam avtomatlaşdırılmış SEO optimallaşdırması.
Oxşar üslublar
- Resend — bənövşəyi neon rəngli qara məxmər
- Neon — Qaranlıqdan sonra server otağı. Saf qaranlıqda, yalnız məlumatlardan və istifadəçi qarşılıqlı təsirlərindən işıq gəlir.
- Discord — Oyun dünyası açılan söhbət pəncərəsinin arxasında gizlənir - hər bölmə öz işıqlandırması və personaj dəsti ilə müstəqil bir mühitdir
- Idle Finance — Dərin dəniz terminallarının neon ticarət mərtəbəsi, tək bir mavi işığın qaranlığı deşdiyi qaranlıq bir dəniz terminalıdır.
- Midjourney — Dərin okeanda bioluminescent terminal. Zəkanın vizual olaraq ASCII axınlarında özünü yaratdığı və idarəetmənin zəif parıldayan naxışlar kimi göründüyü dərin dəniz dünyası.
- Netflix — Sonsuz Rəqəmsal Rəf. Sonsuz məzmun kitabxanasının qapqara, teatr fonunda təqdim olunduğu kinematoqrafik təcrübə.
- Wope — Wope bənövşəyi üfüq interfeysidir. Şüşənin altından bənövşəyi işıq şüası düşən qaranlıq bir rəsədxana masası təsəvvür edin.
- basement — Saat 3-də boş bir mətbəə – qara rəngdə nəhəng, sıxılmış şriftlər, naviqasiya panelində tək bir narıncı işıq, qalan hər şey ağ və ya xəyalət kimi boz.
- Ori — Gecəyarısı server otağı qara boşluqdur, ağ işıq var, bir düyməsi yanır.
- Amaterasu — Səma Firuzəyi Müqəddəs Yeri
- Stink Studios — Gecəyarısı kinostudiya - proyektor zümzümə edir, otaq qaranlıqdır, yalnız film işıqlandırılır
- Obsidian — Kristal biliklərin anbarı. Parlaq bənövşəyi qarşılıqlı təsir damarları ilə aydınlıq və diqqət üçün hazırlanmış aydın, çoxşaxəli rəqəmsal məkan.