Superlist
مساحة عمل ليلية مزينة بجمر مرجاني - سطح تطبيق هادئ بلون الباذنجان حيث تشير شرارة برتقالية دافئة واحدة إلى كل إجراء
يستخدم تطبيق Superlist لغة إنتاجية بألوان أرجوانية داكنة: لون باذنجاني غامق، ومرجاني دافئ كلون أساسي وحيد، وعناوين كبيرة بخط sans-serif تعكس الأجواء العامة. تستحضر واجهة المستخدم شعور العمل المركز في وقت متأخر من الليل - هادئة، ومتعددة الطبقات، وواثقة، مع استخدام اللون فقط كعلامات ترقيم وظيفية على دعوات اتخاذ الإجراءات، والحالات النشطة، والنقاط الرئيسية. تتكون الأسطح من طبقات من درجات داكنة خفيفة مع مسحة أرجوانية (#181824 → #26253b)، مع تجنب اللون الأسود الصريح لضمان أن يكون العمق دافئًا بدلاً من أن يكون جافًا. تتميز المكونات بأشكال دائرية واسعة (بطاقات 20 بكسل، أزرار دائرية)، وظلال ناعمة، و"تتنفس" من خلال فجوات مريحة من 10-16 بكسل بدلاً من الشبكات الضيقة. صوت العنوان هو كل شيء: وزن 600 نقطة عند 70-88 بكسل مع تباعد ضيق بين الأحرف يبلغ -0.02em يعامل النص كنص طباعي بدلاً من واجهة مستخدم - إنه أقرب إلى نص تحريري منه إلى SaaS.
تمتد الأقسام الداكنة على كامل عرض الصفحة، مع حاويات محتوى مركزية بأقصى عرض. القسم الرئيسي مركزي عموديًا ويحتوي على عنوان رئيسي، ونص فرعي، وعبارة تحث المستخدم على اتخاذ إجراء، يليه لقطة شاشة كبيرة للمنتج تتداخل مع القسم التالي. تتناوب الأقسام اللاحقة بين كتل نصية مركزية وشبكات بطاقات. يستخدم قسم المراجعات شبكة من ثلاثة أعمدة مع بطاقات مراجعة و16 فاصلًا بينها. تتكون قائمة التنقل من شريط علوي واحد مع شعار على اليسار، وروابط مركزية، وإجراءات تسجيل الدخول على اليمين - بدون شريط جانبي ثابت أو قائمة رئيسية ضخمة. الفواصل بين الأقسام واسعة (16 فاصلًا)، مما يخلق إيقاعًا تحريريًا رحبًا بدلاً من شبكة منتجات كثيفة.
تهيمن لقطات شاشة المنتج على المساحة البصرية، حيث يملأ إطار كبير ذو زوايا مستديرة، يعرض واجهة التطبيق الفعلية، القسمين الرئيسي والثانوي. الصور قليلة، وتُستخدم فقط كصور رمزية للمستخدمين أو معاينات للوسائط داخل التطبيق (على سبيل المثال، صورة الحفل الموسيقي في اللوحة اليمنى من نموذج المنتج). الشعارات الموجودة على شريط الثقة عبارة عن رموز نصية بيضاء باهتة. لا توجد رسومات توضيحية زخرفية، ولا رسومات تجريدية، ولا صور ثلاثية الأبعاد. تتمثل الاستراتيجية البصرية في عرض المنتج بحجمه الكامل، وترك الكتابة تؤدي الدور العاطفي، واستخدام اللون المرجاني كلون مميز وحيد.
لوحة الألوان
ماركة
- Coral Ember
#ff4a36— يُستخدم اللون البرتقالي كلون ثانوي لإبراز التفاصيل الزخرفية ولتسليط الضوء على الإشارات غير المتكررة. ولا ينبغي استخدامه كلون أساسي لدعوات اتخاذ إجراء.
حيادي
- Aubergine Canvas
#181824— خلفية الصفحة، وهي اللوحة الرئيسية، عبارة عن لون دافئ وداكن يحل محل اللون الأسود النقي، مما يجعل واجهة المستخدم تبدو متعددة الطبقات بدلاً من أن تكون مسطحة. - Elevated Plum
#26253b— أسطح البطاقات، وحقول الإدخال، وحاويات التنقل - خطوة أسهل من اللوحة القماشية لإنشاء عمق بدون حدود مرئية. - Pure White
#ffffff— العناوين الرئيسية، ونصوص الأزرار، ومخططات الأيقونات - أقصى تباين على خلفية داكنة. - Fog Text
#696f81— يتميز النص الرئيسي والعناوين الفرعية والحدود الباهتة بنسبة تباين 7:1 لقراءة مريحة على خلفية بلون الباذنجان. - Ash Text
#8e8da0— يُدعم استخدام لون محايد لعناصر واجهة المستخدم الثانوية، والفواصل، والتسميات الخافتة. ولا ينبغي استخدامه كلون أساسي لعبارات الحث على اتخاذ إجراء. - Mist Highlight
#a3a3a7— تخلق الحدود الدقيقة والفواصل وعناصر التنقل غير النشطة نغمة محايدة دقيقة لا تزال بارزة على خلفية اللوحة.
الطباعة
من 12 إلى 88 بكسل · 9 خطوات
- sans-serif — الاستبدال: Inter · الخطوط العريضة 400 · sans-serif - تم العثور عليه في البيانات المستخرجة ولكن لم يتم وصفه بواسطة الذكاء الاصطناعي.
- Haffer XH SemiBold — الاستبدال: Inter Tight · الخطوط العريضة 400, 600 · الخط الأساسي للعرض والعناوين. يُستخدم بحجم 70-88 بكسل للعناوين الرئيسية، مع تباعد أحرف -0.02em ووزن 600. يمنح تباعد الأحرف الضيق وارتفاعها الكبير العناوين طابعًا تحريريًا، مما يجعل الواجهة الداكنة تبدو أقرب إلى غلاف مجلة منها إلى لوحة تحكم. استبدله بخط Inter Tight أو General Sans بوزن عريض.
- Jersey 10 — الاستبدال: Anybody · الخطوط العريضة 400 · خط كبير مزخرف للأرقام المميزة والتمييزات. يُستخدم باعتدال في الأحجام الكبيرة جدًا لإضفاء لمسات طباعية مميزة. يمكن استبداله بخط Anybody أو Cabinet Grotesk.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | متوسط |
| الخطوة الأساسية | 10-16px |
| نصف قطر الزر | 100px |
| نصف قطر البطاقة | 20px |
| الظلال | ظلال ناعمة |
| بين الأقسام | 80px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Superlist وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- DNA — مرصد منتصف الليل كما يُرى من خلال عدسة الجسيمات
- Abetterlou — شرارات على جلد السرج - خط دافئ كريمي يتوهج على خلفية سوداء داكنة بلون القهوة، مع أزرار ذهبية كهرمانية تبدو وكأنها معدن ساخن مضغوط في الصفحة.
- Galileo-ft — غرفة قيادة في الفضاء السحيق مزودة بإشارات زرقاء كهربائية
- Decide AI — المرصد عند منتصف الليل - إشارة النعناع
- Redis Agency — ورشة التحرير، المفتوحة بعد ساعات العمل، هي مكان شديد الظلام حيث يتم إنجاز جميع أعمال العلامة التجارية باستخدام خطوط serif وفجل أحمر واحد.
- Spellbook — قاعة محكمة في منتصف الليل مضاءة بحبر مرجاني - سطح تحريري داكن حيث الصوت الوحيد هو صوت ضربة القلم البرتقالي الدافئ
- Linear — أداة دقيقة في منتصف الليل
- Origin Financial — معرض ليلي للفخامة الهادئة. غرفة هادئة، تكاد تكون مظلمة، حيث تخلق الخطوط الكبيرة ذات الزخارف وبعض اللوحات الملونة المضيئة شعوراً بأن التمويل عمل فني منتقى بعناية.
- Hyperstudio — التصميم محفور على حجر الأوبسيديان. النص والخطوط الدقيقة تُحيط بمساحة بيضاء من السواد الخالص، مع علامات بوصلة ذهبية متفرقة تُشير إلى الطريق.
- Air — منحوتة "سماء منتصف الليل من خلال الزجاج"
- Raycast — مركز قيادة منتصف الليل، كورال نيون
- dope.security — محطة منتصف الليل مع منارات أرجوانية