Spotify
Gece müzik kutusu kontrol odası
Spotify'ın web arayüzü, yoğun ve karanlık bir medya kontrol merkezidir: canlı albüm kapaklarıyla süslenmiş, neredeyse siyah bir tuval, tek bir imza niteliğindeki yeşil vurgu ve hap şeklinde kontroller. Tipografi kompakt ve kullanışlıdır; küçük boyutlu, özel olarak tasarlanmış geometrik bir sans-serif yazı tipi, albüm kapaklarının ve sanatçı fotoğraflarının görsel işin büyük kısmını yapmasına olanak tanır. Düzen, kare albüm kapakları ve yuvarlak avatarların bir ızgarasıyla sabit iki sütunlu bir kabuktur (yan çubuk + ana akış), bu da geometrik tiplerin ritmik bir şekilde dönüşümünü yaratır. Arayüz, yüksekliklerdeki keskin değişikliklerden kaçınır, ince yüzey farklılıklarına (#121212 kartlar #000000 tuval üzerinde) ve enerji için tek bir büyük degrade banner'a güvenir. Sonuç, bir DJ kabini hissi uyandırır: bilgi yoğun, akustik olarak karanlık ve bir bakışta çalmaya hazır.
Sabit iki sütunlu düzen, sol kenar çubuğu ("Kütüphaneniz") ve duyarlı bir ana içerik alanına sahiptir. Üst çubuk, solunda arama ve sağında hesap işlemleri bulunan tam genişlikte siyah bir çubuktur. Ana içerik dikey olarak kaydırılır ve yatay kart döngüleri içerir: 5 sütunlu kare ızgarada popüler şarkılar, 5 sütunlu dairesel ızgarada popüler sanatçılar ve bu deseni devam ettiren popüler albümler/tekli şarkılar. Bölümler arasındaki boşluk kompakttır (32 cm). Alt reklam banner'ı, görüntüleme alanının alt kısmına sabitlenmiştir. Gezinme yalnızca üst çubuk ve kenar çubuğu aracılığıyla yapılır; mega menüler veya ekmek kırıntıları yoktur. Ritim değişir: kare kartlar → yuvarlak kartlar → kare kartlar, bölümler arasında geometrik bir kontrast oluşturur.
Albüm kapakları ve sanatçı fotoğrafları, temel görsel içeriği oluşturuyor. Kapaklar, 6 piksel yarıçaplı yoğun kare parçalar (1:1 en boy oranı) olarak sunuluyor; bu da editoryal bir görünüm için yeterince net, ancak çağdaş bir hava katacak kadar yumuşak bir etki yaratıyor. Sanatçı fotoğrafları yuvarlak parçalar halinde olup, yüzü bir kimlik unsuru olarak vurguluyor. Ana arayüzde dekoratif fotoğraflar, yaşam tarzı görselleri veya soyut grafikler bulunmuyor. Tek fotoğraf dışı görsel unsur, markanın rengini temsil eden mor-mavi geçişli bir banner. Simgeler minimalist, tek çizgili, koyu bir arka plan üzerinde beyaz renkte; küçük ve işlevsel, asla dekoratif değil.
Palet
Marka
- Spotify Green
#1ed760— Yeşil, dekoratif detaylar için ikincil bir vurgu rengi olarak ve daha az sıklıkla kullanılan arama sorgularını öne çıkarmak için kullanılır. Eylem çağrıları için birincil renk olarak kullanılmamalıdır.
Doğal
- Pure White
#ffffff— Göze batmayan bir arka plan oluşturmak ve bölümleri ayırmak için kullanılan hafif bir destekleyici yüzeydir. Eylem çağrısı için ana renk olarak kullanılmamalıdır. - Signal Red
#b85850— Kırmızı, dekoratif detaylar için destekleyici bir vurgu rengi görevi görür ve alışılmadık renkleri öne çıkarır. Statü rengi olarak değil, destekleyici bir vurgu rengi olarak kullanın. - Void Black
#000000— Sayfa tuvali, üst gezinme arka planı, en derin yüzey katmanı - Carbon
#121212— Karton yüzeyler, yan paneller, tuval üzerine ikincil yüzey katmanı - Graphite
#1f1f1f— Yükseltilmiş yüzey - fareyle üzerine gelme durumları, giriş alanları, seçili gezinme öğeleri. - Smoke
#292929— Aktif gezinme arka planı, hafif arka ışık efekti.
Tipografi
11 ila 24 piksel arası · 4 adım
- SpotifyMixUI — yenisiyle değiştirme: Inter · ana hatlar 400, 600, 700 · Metin içeriği, gezinme menüsü, düğmeler, meta veriler, küçük alt yazılar—sanatsal unsurların ön plana çıkmasını sağlayacak şekilde tasarlanmış, kompakt ve bilgi açısından zengin, incelikli bir tasarım.
- SpotifyMixUITitle — yenisiyle değiştirme: Inter weight 700 · ana hatlar 700 · Bölüm başlıkları ("Popüler Şarkılar," "Popüler Sanatçılar") - orta büyüklükte, kalın bir yazı tipi, kart ızgarasını aşırı yüklemeden başlıkların öne çıkmasını sağlar.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | yoğun |
| Temel adım | 8-12px |
| Düğme yarıçapı | 9999px |
| Kart yarıçapı | 6px |
| Gölgeler | minimal |
| Bölümler arasında | 32-48px |
Yapay zeka, web sitenizi Spotify tarzında oluşturacak ve içeriğini dolduracak.
- Ürünlerinizi ve gönderilerinizi aşağıdaki bağlantılar aracılığıyla paylaşın: Instagram, TikTok, Facebook.
- Eski sitenizdeki içeriği aktarın; sadece adresi belirtmeniz yeterli.
- En iyi motor üzerinde modern tasarım: Sunucu tarafı işleme ve SEO optimizasyonu özellikleriyle birlikte React ( Next.js).
- Arama sonuçları için tamamen otomatik SEO optimizasyonu ve sinir ağı tabanlı öneriler.
Benzer stiller
- Resend — mor neon renkli siyah kadife
- Neon — Karanlık çöktükten sonra bir sunucu odası. Tamamen karanlık, tek ışık kaynağı veriler ve kullanıcı etkileşimleri.
- Discord — Oyun dünyası açılır bir sohbet penceresinin arkasında gizlidir; her bölüm kendi aydınlatması ve karakterleriyle bağımsız bir ortamdır.
- Idle Finance — Derin deniz terminallerinin neon ışıklı ticaret alanı, tek bir mavi ışığın karanlığı deldiği karanlık bir deniz terminalidir.
- Midjourney — Derin okyanusta biyolüminesans bir terminal. Zekanın ASCII akışları şeklinde görsel olarak kendini ürettiği ve kontrollerin hafifçe parlayan desenler olarak göründüğü bir derin deniz dünyası.
- Netflix — Sonsuz Dijital Raf. Zifiri karanlık, tiyatrovari bir arka plan önünde sonsuz bir içerik kütüphanesinin sunulduğu sinematik bir deneyim.
- Wope — Wope, mor bir ufuk arayüzüdür. Karanlık bir gözlem masasının altından mor bir ışığın yayıldığını hayal edin.
- basement — Saat gece 3'te bomboş bir matbaa – simsiyah zemine yayılmış devasa, sıkıştırılmış yazı tipleri, gezinme çubuğunda tek bir turuncu ışık parıltısı, geri kalan her şey beyaz veya hayalet gibi gri.
- Ori — Gece yarısı sunucu odası simsiyah bir boşluk, beyaz bir ışık, sadece bir düğme açık.
- Amaterasu — Göksel Turkuaz Tapınağı
- Stink Studios — Gece yarısı bir film stüdyosu - projektör vızıldıyor, oda karanlık, sadece film aydınlatılıyor.
- Obsidian — Kristal berraklığında bir bilgi deposu. Netlik ve odaklanma için tasarlanmış, etkileşimin ışıltılı mor damarlarıyla bezenmiş, berrak ve çok yönlü bir dijital alan.