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— فعال نیویګیشن شالید، لږ بیک لایټ اغیز.
ټایپوګرافي
له ۱۱ څخه تر ۲۴ پکسله پورې · ۴ ګامونه
- 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 — د سهار په ۳ بجو یوه تشه چاپ خانه - لوی، کمپریس شوي فونټونه په تور رنګ کې خپریږي، د نیویګیشن بار کې د نارنجي رڼا یو څاڅکی، نور هرڅه سپین یا د وحشتناک خړ رنګ لري.
- Ori — د شپې په نیمه شپه کې د سرور خونه توره تشه ده، سپینه رڼا ده، یو سویچ چالان دی.
- Amaterasu — د آسماني فیروزي پټنځای
- Stink Studios — په نیمه شپه کې د فلم سټوډیو - پروجیکټر غږ کوي، خونه تیاره ده، یوازې فلم روښانه دی
- Obsidian — د کرسټال پوهې یوه زېرمه. یو روښانه، څو اړخیز ډیجیټل ځای چې د وضاحت او تمرکز لپاره ډیزاین شوی، د متقابل عمل روښانه ارغواني رګونو سره.