Spotify
اتاق کنترل جوکباکس شبانه
رابط کاربری وب اسپاتیفای یک مرکز کنترل رسانهای متراکم و تاریک است: یک بوم تقریباً سیاه که با طرح جلد آلبوم پر جنب و جوش، یک لهجه سبز منحصر به فرد و کنترلهای قرصی شکل تزئین شده است. تایپوگرافی جمع و جور و کاربردی است - یک فونت هندسی sans-serif با طراحی سفارشی در اندازه کوچک، که به طرح جلد آلبوم و عکسهای هنرمند اجازه میدهد بخش عمدهای از کار بصری را انجام دهند. طرحبندی یک پوسته ثابت دو ستونی (نوار کناری + فید اصلی) با شبکهای از طرح جلد آلبوم مربعی و آواتارهای گرد است که تناوبی ریتمیک از انواع هندسی ایجاد میکند. رابط کاربری از تغییرات شدید در ارتفاع جلوگیری میکند و بر تمایزات سطحی ظریف (کارتهای #121212 روی بوم #000000) و یک بنر گرادیان بزرگ برای انرژی تکیه میکند. نتیجه، حس یک غرفه دیجی است: اطلاعات متراکم، از نظر آکوستیک تاریک و آماده اجرا در یک نگاه.
یک طرح دو ستونی ثابت دارای یک نوار کناری سمت چپ ("کتابخانه شما") و یک ناحیه محتوای اصلی واکنشگرا است. نوار بالا یک نوار مشکی تمام عرض است که جستجو در سمت چپ و اقدامات حساب در سمت راست قرار دارد. محتوای اصلی به صورت عمودی اسکرول میشود، با چرخ فلکهای افقی کارتها - آهنگهای محبوب در یک شبکه مربعی 5 ستونی، هنرمندان محبوب در یک شبکه دایرهای 5 ستونی و آلبومها/تکآهنگهای محبوب که این الگو را ادامه میدهند. فاصله بین بخشها جمع و جور است (32 سانتیمتر). بنر تبلیغاتی پایین در پایین صفحه نمایش قرار دارد. پیمایش منحصراً از طریق نوار بالا و نوار کناری انجام میشود - بدون مگامنو یا بردکرامب. ریتم به طور متناوب تغییر میکند: کارتهای مربع → کارتهای گرد → کارتهای مربع، که تضاد هندسی بین بخشها ایجاد میکند.
جلد آلبومها و عکسهای هنرمندان، محتوای بصری اصلی هستند. جلدها به صورت قطعات مربعی متراکم (نسبت ابعاد ۱:۱) با شعاع ۶ پیکسل ارائه میشوند - به اندازه کافی واضح که برای مطالب سرمقالهای به نظر برسند، اما به اندازه کافی نرم که امروزی به نظر برسند. عکسهای هنرمندان قطعات گرد هستند و بر چهره به عنوان یک شناسه تأکید میکنند. رابط کاربری اصلی عاری از عکسهای تزئینی، تصاویر سبک زندگی یا گرافیک انتزاعی است. تنها عنصر بصری غیرعکاسی، یک بنر گرادیان بنفش به آبی در پایین است که به عنوان تنها عنصر رنگ برند عمل میکند. آیکونها مینیمالیستی، تکخطی، سفید روی پسزمینه تیره هستند - کوچک و کاربردی، هرگز تزئینی نیستند.
پالت
برند
- Spotify Green
#1ed760— سبز به عنوان یک رنگ ثانویه برای جزئیات تزئینی و برجسته کردن عبارات جستجوی کمتر استفاده شده استفاده میشود. نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (CTA) استفاده شود.
خنثی
- 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 |
هوش مصنوعی وبسایت شما را به سبک Spotify میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Resend — مخمل مشکی با رنگ نئونی بنفش
- Neon — یک اتاق سرور پس از تاریکی مطلق. تاریکی محض، جایی که تنها نور از دادهها و تعاملات کاربر میآید.
- Discord — دنیای بازی پشت یک پنجره چت پاپآپ پنهان شده است - هر بخش یک محیط مستقل با نورپردازی و مجموعه شخصیتهای خاص خود است.
- Idle Finance — تالار معاملات نئونی پایانههای اعماق دریا، یک ترمینال دریایی تاریک است که در آن یک نور آبی واحد، تاریکی را میشکافد.
- Midjourney — یک پایانه زیستتابی در اعماق اقیانوس. دنیایی در اعماق دریا که در آن هوش به صورت بصری خود را در جریانهای ASCII تولید میکند و کنترلها به صورت الگوهای کمنور ظاهر میشوند.
- Netflix — قفسه دیجیتال بینهایت. یک تجربه سینمایی که در آن مجموعهای بیپایان از محتوا در پسزمینهای کاملاً سیاه و سینمایی ارائه میشود.
- Wope — ووپ یک مرز بنفش رنگ است. یک میز رصدخانه تاریک را تصور کنید که نوری بنفش از زیر شیشه آن میدرخشد.
- basement — یک چاپخانه خالی در ساعت ۳ صبح - فونتهای بزرگ و فشردهای که در سراسر سیاهی مطلق پخش شدهاند، یک سوسوی نور نارنجی در نوار ناوبری، و هر چیز دیگری سفید یا خاکستری شبحوار.
- Ori — اتاق سرور در نیمهشب، یک فضای خالی سیاه، با نور سفید و یک کلید روشن است.
- Amaterasu — پناهگاه فیروزهای آسمانی
- Stink Studios — یک استودیوی فیلمسازی در نیمهشب - پروژکتور وزوز میکند، اتاق تاریک است، فقط فیلم روشن است
- Obsidian — مخزنی از دانش کریستالی. فضایی دیجیتال، شفاف و چندوجهی که برای وضوح و تمرکز طراحی شده است، با رگههای بنفش درخشان از تعامل.