Spotify
غرف التحكم في آلات الموسيقى الليلية
واجهة سبوتيفاي على الويب عبارة عن مركز تحكم وسائط كثيف وداكن: لوحة سوداء تقريبًا مزينة بأغلفة ألبومات نابضة بالحياة، ولمسة خضراء مميزة، وأزرار تحكم بيضاوية الشكل. يتميز الخط المستخدم بالبساطة والعملية - خط هندسي مصمم خصيصًا بدون زوائد بحجم صغير، مما يسمح لأغلفة الألبومات وصور الفنانين بأداء الجزء الأكبر من العمل البصري. التصميم عبارة عن هيكل ثابت من عمودين (شريط جانبي + موجز رئيسي) مع شبكة من أغلفة الألبومات المربعة والصور الرمزية الدائرية، مما يخلق تناوبًا إيقاعيًا للأنواع الهندسية. تتجنب الواجهة التغييرات الحادة في الارتفاع، معتمدة على اختلافات سطحية دقيقة (بطاقات #121212 على لوحة #000000) وشعار متدرج كبير واحد لإضفاء الحيوية. والنتيجة هي إحساس بمنصة منسق موسيقى: غنية بالمعلومات، داكنة صوتيًا، وجاهزة للتشغيل بنظرة خاطفة.
يتميز التصميم الثابت ذو العمودين بشريط جانبي أيسر ("مكتبتك") ومنطقة محتوى رئيسية متجاوبة. الشريط العلوي عبارة عن شريط أسود كامل العرض، يحتوي على زر البحث على اليسار وإجراءات الحساب على اليمين. يتم تمرير المحتوى الرئيسي عموديًا، مع عرض دوار أفقي للبطاقات - الأغاني الشائعة في شبكة مربعة من 5 أعمدة، والفنانون المشهورون في شبكة دائرية من 5 أعمدة، والألبومات/الأغاني المنفردة الشائعة، مع استمرار هذا النمط. المسافة بين الأقسام صغيرة (32 سم). يتم تثبيت لافتة الإعلان السفلية في أسفل نافذة العرض. تتم إدارة التنقل حصريًا عبر الشريط العلوي والشريط الجانبي - لا توجد قوائم رئيسية أو مسارات تنقل. يتناوب النمط: بطاقات مربعة ← بطاقات دائرية ← بطاقات مربعة، مما يخلق تباينًا هندسيًا بين الأقسام.
تُشكّل أغلفة الألبومات وصور الفنانين المحتوى المرئي الأساسي. تُعرض الأغلفة على شكل مربعات متراصة (بنسبة عرض إلى ارتفاع 1:1) بنصف قطر 6 بكسل، ما يمنحها وضوحًا كافيًا لإضفاء طابع تحريري، مع نعومة كافية لإضفاء طابع عصري. أما صور الفنانين، فتُعرض على شكل مربعات دائرية، تُبرز الوجه كعنصر تعريف. تخلو الواجهة الرئيسية من الصور الزخرفية، أو صور نمط الحياة، أو الرسومات التجريدية. العنصر المرئي الوحيد غير الفوتوغرافي هو شريط متدرج من البنفسجي إلى الأزرق في الأسفل، والذي يُمثّل العنصر الوحيد للون العلامة التجارية. أما الأيقونات، فهي بسيطة، أحادية الخط، بيضاء على خلفية داكنة، صغيرة وعملية، وليست زخرفية على الإطلاق.
لوحة الألوان
ماركة
- Spotify Green
#1ed760— يُستخدم اللون الأخضر كلون ثانوي لإبراز التفاصيل الزخرفية ولتسليط الضوء على عبارات البحث الأقل استخدامًا. ولا ينبغي استخدامه كلون أساسي لعبارات الحث على اتخاذ إجراء.
حيادي
- Pure White
#ffffff— سطح داعم خفيف لإنشاء خلفية غير بارزة وفصل الأقسام. لا ينبغي استخدامه كلون أساسي لدعوة المستخدم لاتخاذ إجراء. - Signal Red
#b85850— يُستخدم اللون الأحمر كلون ثانوي لإبراز التفاصيل الزخرفية ولتسليط الضوء على الألوان غير المألوفة. استخدمه كلون ثانوي، وليس كلون يدل على المكانة الاجتماعية. - Void Black
#000000— لوحة الصفحة، خلفية التنقل العلوي، أعمق طبقة سطحية - Carbon
#121212— أسطح من الورق المقوى، ألواح جانبية، طبقة سطحية ثانوية فوق القماش - Graphite
#1f1f1f— السطح المرتفع - حالات التمرير، حقول الإدخال، عناصر التنقل المحددة. - Smoke
#292929— خلفية تصفح نشطة، مع تأثير إضاءة خلفية طفيف.
الطباعة
من 11 إلى 24 بكسل · 4 خطوات
- 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 — Wope عبارة عن واجهة أفق أرجوانية. تخيل طاولة مرصد مظلمة ينبعث منها ضوء أرجواني من أسفل الزجاج.
- basement — مطبعة فارغة في الساعة الثالثة صباحاً – خطوط ضخمة مضغوطة تنتشر عبر الظلام الدامس، وميض واحد من الضوء البرتقالي على شريط التنقل، وكل شيء آخر أبيض أو رمادي باهت.
- Ori — غرفة الخوادم في منتصف الليل عبارة عن فراغ أسود، ضوء أبيض، مفتاح واحد مضاء.
- Amaterasu — ملاذ الفيروز السماوي
- Stink Studios — استوديو تصوير سينمائي في منتصف الليل - جهاز العرض يُصدر أزيزًا، الغرفة مظلمة، والفيلم وحده مضاء
- Obsidian — مستودع للمعرفة البلورية. مساحة رقمية واضحة ومتعددة الأوجه مصممة من أجل الوضوح والتركيز، مع عروق أرجوانية متوهجة للتفاعل.