Spotify
نائٹ جوک باکس کنٹرول روم
Spotify کا ویب انٹرفیس ایک گھنا، گہرا میڈیا کنٹرول سنٹر ہے: متحرک البم آرٹ، سنگل دستخطی سبز لہجہ، اور گولی کی شکل والے کنٹرولز سے مزین قریب کا سیاہ کینوس۔ نوع ٹائپ کمپیکٹ اور مفید ہے — ایک چھوٹے سائز میں حسب ضرورت ڈیزائن کردہ جیومیٹرک سینز سیرف ٹائپ فیس، البم آرٹ اور آرٹسٹ کی تصاویر کو زیادہ تر بصری کام کرنے کی اجازت دیتا ہے۔ لے آؤٹ ایک مقررہ دو کالم شیل (سائیڈ بار + مین فیڈ) ہے جس میں مربع البم آرٹ اور گول اوتار کا ایک گرڈ ہے، جس سے جیومیٹرک اقسام کا ایک تال میل تبدیل ہوتا ہے۔ انٹرفیس اونچائی میں تیز تبدیلیوں سے گریز کرتا ہے، ٹھیک ٹھیک سطحی امتیازات (#000000 کینوس پر #121212 کارڈز) اور توانائی کے لیے ایک بڑے گریڈینٹ بینر پر انحصار کرتا ہے۔ نتیجہ ایک DJ بوتھ کا احساس ہے: معلومات سے بھرپور، صوتی طور پر تاریک، اور ایک نظر میں کھیلنے کے لیے تیار۔
ایک مقررہ دو کالم لے آؤٹ میں بائیں سائڈبار ("آپ کی لائبریری") اور ایک ذمہ دار مرکزی مواد کا علاقہ ہوتا ہے۔ اوپری بار ایک پوری چوڑائی والی سیاہ بار ہے جس میں بائیں طرف تلاش اور دائیں طرف اکاؤنٹ کی کارروائیاں ہیں۔ مرکزی مواد عمودی طور پر اسکرول کرتا ہے، کارڈز کے افقی کیروسلز کے ساتھ — 5 کالم مربع گرڈ میں مقبول گانے، 5 کالم سرکلر گرڈ میں مشہور فنکار، اور مقبول البمز/ سنگلز اس طرز کو جاری رکھتے ہیں۔ حصوں کے درمیان فاصلہ کمپیکٹ (32 سینٹی میٹر) ہے۔ نیچے کا اشتہار بینر ویو پورٹ کے نیچے لنگر انداز ہوتا ہے۔ نیویگیشن کو خصوصی طور پر ٹاپ بار اور سائڈبار کے ذریعے ہینڈل کیا جاتا ہے—کوئی میگا مینوز یا بریڈ کرمبس نہیں۔ تال کا متبادل: مربع کارڈ → گول کارڈ → مربع کارڈ، حصوں کے درمیان ہندسی تضاد پیدا کرتے ہیں۔
البم کور اور آرٹسٹ کی تصاویر بنیادی بصری مواد ہیں۔ کور کو 6px رداس کے ساتھ گھنے مربع ٹکڑوں (1:1 پہلو تناسب) کے طور پر پیش کیا جاتا ہے — ادارتی نظر آنے کے لیے کافی کرکرا لیکن معاصر ہونے کے لیے کافی نرم۔ آرٹسٹ کی تصاویر گول ٹکڑوں کی ہوتی ہیں، شناخت کنندہ کے طور پر چہرے پر زور دیتی ہیں۔ مرکزی انٹرفیس آرائشی تصاویر، طرز زندگی کی تصاویر، یا تجریدی گرافکس سے پاک ہے۔ واحد غیر تصویری بصری عنصر نچلے حصے میں جامنی سے نیلے رنگ کا میلان بینر ہے، جو برانڈ کے رنگ کے واحد عنصر کے طور پر کام کرتا ہے۔ شبیہیں مرصع، مونولینیئر، سیاہ پس منظر پر سفید ہوتے ہیں—چھوٹے اور فعال، کبھی آرائشی نہیں ہوتے۔
پیلیٹ
برانڈ
- Spotify Green
#1ed760— سبز رنگ کو آرائشی تفصیلات کے لیے ایک ثانوی لہجے کے طور پر استعمال کیا جاتا ہے اور کم کثرت سے استعمال ہونے والے تلاش کے سوالات کو نمایاں کرنے کے لیے۔ اسے کال ٹو ایکشن کے لیے بنیادی رنگ کے طور پر استعمال نہیں کیا جانا چاہیے۔
غیر جانبدار
- Pure White
#ffffff— غیر متزلزل پس منظر بنانے اور حصوں کو الگ کرنے کے لئے ایک ہلکی مدد کرنے والی سطح۔ اسے کال ٹو ایکشن کے لیے بنیادی رنگ کے طور پر استعمال نہیں کیا جانا چاہیے۔ - Signal Red
#b85850— سرخ آرائشی تفصیلات اور غیر معمولی رنگوں کو نمایاں کرنے کے لیے معاون لہجے کے طور پر کام کرتا ہے۔ اسے ایک معاون لہجے کے طور پر استعمال کریں، حیثیت کے رنگ کے طور پر نہیں۔ - Void Black
#000000— صفحہ کینوس، سب سے اوپر نیویگیشن پس منظر، سب سے گہری سطح کی تہہ - Carbon
#121212— گتے کی سطحیں، سائیڈ پینلز، کینوس پر ثانوی سطح کی تہہ - Graphite
#1f1f1f— ابھری ہوئی سطح - ہوور اسٹیٹس، ان پٹ فیلڈز، منتخب نیویگیشن عناصر۔ - Smoke
#292929— فعال نیویگیشن پس منظر، ہلکا سا بیک لائٹ اثر۔
نوع ٹائپ
11 سے 24px تک · 4 مراحل
- SpotifyMixUI — متبادل: Inter · خاکہ 400, 600, 700 · باڈی کاپی، نیویگیشن، بٹن، میٹا ڈیٹا، چھوٹے کیپشنز—ایک کمپیکٹ، معلومات سے بھرپور ڈیزائن جو لطیف ہونے کے لیے ڈیزائن کیا گیا ہے، جس سے فنکارانہ عناصر کو غلبہ حاصل ہو سکتا ہے۔
- SpotifyMixUITitle — متبادل: Inter weight 700 · خاکہ 700 · سیکشن کی سرخیاں ("مقبول گانے،" "مقبول فنکار") - ایک بولڈ، اعتدال پسند سائز کا فونٹ کارڈ گرڈ کو اوور لوڈ کیے بغیر سرخیوں کو نمایاں کرتا ہے۔
وقفے اور شکل
| مقصد | مطلب |
|---|---|
| کثافت | گھنے |
| بنیادی قدم | 8-12px |
| بٹن کا رداس | 9999px |
| کارڈ کا رداس | 6px |
| سائے | کم سے کم |
| حصوں کے درمیان | 32-48px |
AI آپ کی ویب سائٹ کو Spotify کے انداز میں بنائے گا اور اسے بھرے گا۔
- لنک کے ذریعے پروڈکٹس اور پوسٹس بھریں - Instagram, TikTok, Facebook.
- اپنی پرانی سائٹ سے مواد منتقل کریں—بس پتہ کی وضاحت کریں۔
- بہترین انجن پر جدید ڈیزائن: سرور رینڈرنگ اور SEO آپٹیمائزیشن کے ساتھ React ( Next.js) باکس سے باہر۔
- تلاش کے نتائج اور نیورل نیٹ ورک کی سفارشات کے لیے مکمل طور پر خودکار SEO کی اصلاح۔
ملتے جلتے انداز
- Resend — جامنی نیین رنگ کے ساتھ سیاہ مخمل
- Neon — اندھیرے کے بعد ایک سرور روم۔ خالص اندھیرا، جہاں صرف روشنی ڈیٹا اور صارف کی بات چیت سے آتی ہے۔
- Discord — گیم کی دنیا ایک پاپ اپ چیٹ ونڈو کے پیچھے چھپی ہوئی ہے - ہر سیکشن ایک خود ساختہ ماحول ہے جس کی اپنی روشنی اور کرداروں کے سیٹ ہیں
- Idle Finance — گہرے سمندر کے ٹرمینلز کا نیون ٹریڈنگ فلور ایک گہرا بحری ٹرمینل ہے جہاں ایک ہی نیلی روشنی اداسی کو چھیدتی ہے۔
- Midjourney — گہرے سمندر میں ایک بائولومینسنٹ ٹرمینل۔ ایک گہرے سمندر کی دنیا جہاں ذہانت خود کو ASCII اسٹریمز میں بصری طور پر پیدا کرتی ہے، اور کنٹرول ہلکے سے چمکتے نمونوں کے طور پر ظاہر ہوتے ہیں۔
- Netflix — لامحدود ڈیجیٹل شیلف۔ ایک سنیما تجربہ جہاں مواد کی ایک نہ ختم ہونے والی لائبریری کو ایک سیاہ، تھیٹر کے پس منظر میں پیش کیا جاتا ہے۔
- Wope — ووپ ایک جامنی رنگ کا افق انٹرفیس ہے۔ ایک تاریک آبزرویٹری ٹیبل کا تصور کریں جس میں جامنی رنگ کی روشنی شیشے کے نیچے سے چمک رہی ہو۔
- basement — صبح 3 بجے ایک خالی پرنٹنگ پریس - بڑے بڑے، کمپریسڈ فونٹس سیاہ رنگ میں پھیل رہے ہیں، نیویگیشن بار پر نارنجی روشنی کی ایک جھلک، باقی سب کچھ سفید یا بھوت بھوری۔
- Ori — آدھی رات کو سرور روم ایک سیاہ خلا، سفید روشنی، ایک سوئچ آن ہے۔
- Amaterasu — آسمانی فیروزی پناہ گاہ
- Stink Studios — آدھی رات کو ایک فلم اسٹوڈیو - پروجیکٹر بجتا ہے، کمرہ اندھیرا ہے، صرف فلم جلتی ہے۔
- Obsidian — کرسٹلائن علم کا ذخیرہ۔ ایک واضح، کثیر جہتی ڈیجیٹل اسپیس جو وضاحت اور توجہ کے لیے ڈیزائن کی گئی ہے، جس میں تعامل کی چمکیلی جامنی رگیں ہیں۔