
Substack
حبر برتقالي على المكتب في مكتب التحرير
يبدو تطبيق Substack كلوحة تحكم مألوفة في غرفة أخبار - خلفية بيضاء، ونصوص دافئة تكاد تكون سوداء، ولمسة برتقالية زاهية واحدة تميز كل مرحلة من مراحل إنشاء المحتوى. يعتمد التسلسل الهرمي البصري على الكثافة لا على الزخرفة: خطوط رمادية رفيعة تفصل عناصر التغذية، والصور الرمزية صغيرة، والبيانات الوصفية خافتة، وعين القارئ مُدربة على التركيز على زر الدعوة إلى اتخاذ إجراء البرتقالي، والشعار البرتقالي، ورابط "الاشتراك" البرتقالي، وزر "إنشاء" البرتقالي. تبقى الأسطح مسطحة وغير مقيدة - لا ظلال للبطاقات، ولا عناصر لوحة كروم - مما يسمح للطباعة (عنصر واجهة مستخدم نظام كروم مضغوط مقترن بخط عنوان مخصص ذي حروف serif) بتحمل العبء الأكبر من المحتوى التحريري. يتميز الأسلوب المميز بعناصر كروم بسيطة ولمسات لونية نابضة بالحياة: تطبيق قراءة يُشعر المستخدم وكأنه أداة نشر.
تصميم سطح المكتب بثلاثة أعمدة: شريط جانبي أيسر ثابت (حوالي 200 بكسل، مع أيقونات وعناوين للتنقل، مثبت)، وقسم رئيسي (بحد أقصى 600 بكسل، قائمة منشورات قابلة للتمرير عموديًا)، وشريط جانبي أيمن ثابت (حوالي 300 بكسل، للبحث والتوصيات والتسجيل). القسم الرئيسي هو المحتوى الأساسي - لا توجد بطاقات، فقط منشورات مكدسة فوق بعضها بفواصل رفيعة ومسافة 32 بكسل بين الأقسام. يظهر الشعار الرئيسي أعلى القسم الرئيسي كبطاقة واحدة بعرض كامل. يحتوي الشريط الجانبي الأيسر على شعار العلامة التجارية (علامة برتقالية بخطوط متراكبة)، وستة عناصر للتنقل، وزر "إنشاء" برتقالي بعرض كامل في الأسفل. يحتوي الشريط الجانبي الأيمن على حقل بحث، وبطاقة تسجيل، وقائمة "التالي" للقراءة. التنقل بسيط للغاية - لا يوجد شريط علوي، ولا مسارات تنقل؛ الشريط الجانبي هو التنقل بحد ذاته. كثافة المحتوى عالية: تستخدم المنشورات بيانات وصفية بحجم 12-13 بكسل ونص أساسي بحجم 15-19 بكسل، مما يخلق إيقاعًا يشبه الصحف بدلاً من الشعور بشبكة البطاقات في السوق.
الصور هي محتوى من إنشاء المستخدمين (صور شخصية للمؤلفين، صور مصغرة للمنشورات، صور المنشورات) - لا يوفر Substack صورًا زخرفية خاصة به. تستخدم البطاقة الرئيسية تدرجًا لونيًا من الفيروزي إلى الأخضر مع عناصر توضيحية مجردة (أشكال هندسية، وأشياء منمقة مثل الأقلام والملاحظات) كخلفية. الصور المصغرة للمنشورات في الشريط الجانبي الأيمن صغيرة (64 بكسل)، ومحاطة بدائرة نصف قطرها 8 بكسل، وتعمل كمعاينة لقائمة القراءة. اللغة البصرية العامة تعتمد على النصوص: الواجهة عبارة عن لوحة قراءة، والصور بمثابة نقاط مرجعية بصرية صغيرة وليست لخلق جو معين.
لوحة الألوان
ماركة
- Signal Orange
#ff6719— يُستخدم اللون البرتقالي كلون ثانوي لإبراز التفاصيل الزخرفية ولتسليط الضوء على الإشارات غير المتكررة. ولا ينبغي استخدامه كلون أساسي لدعوات اتخاذ إجراء.
حيادي
- Ink
#363737— نص المحتوى - النص الرئيسي، والعناوين، وعناوين المنشورات، والطوابع الزمنية، وأسماء المؤلفين؛ لون دافئ، يكاد يكون أسود بدلاً من اللون الأسود النقي #000 لتسهيل القراءة. - Paper
#ffffff— تُعد لوحة الصفحة، وأسطح البطاقات، وحقول الإدخال، وخلفية التنقل هي الأسطح المهيمنة التي تشغل الجزء الأكبر من واجهة المستخدم. - Charcoal
#232525— حالة التمرير لعرض نصوص وروابط إضافية بمستويات تحديد عالية؛ أعمق من وضع Ink لكتل التعليمات البرمجية وكتل التحديد. - Stone
#777777— يُدعم استخدام لون محايد لعناصر واجهة المستخدم الثانوية، والفواصل، والتسميات الخافتة. ولا ينبغي استخدامه كلون أساسي لعبارات الحث على اتخاذ إجراء. - Ash
#b6b6b6— خطوط حدودية رفيعة، ومخططات أزرار، ومخططات أيقونات، وحدود على عناصر التحكم المعطلة. - Mist
#c8c8c8— خطوط فاصلة، وخلفية غير مزعجة للأيقونات، وملء الخلايا الفارغة على شكل هيكل عظمي.
الطباعة
من 12 إلى 32 بكسل · 5 خطوات
- system-ui — الاستبدال: -apple-system · الخطوط العريضة 400, 500, 600 · يُستخدم الخط الأساسي لواجهة المستخدم ونص المحتوى في عناوين التنقل، والأزرار، ونصوص الرسائل، والبيانات الوصفية، وحقول الإدخال، وجميع عناصر الواجهة. تُضفي الأحجام المُصغّرة (12-13 بكسل للبيانات الوصفية و15-19 بكسل لنص المحتوى) إحساسًا بكثافة المحتوى. يبلغ وزن الخط 400 لنص المحتوى، و500 لعناصر التنقل وعناوين الأزرار، و600 لعناوين الرسائل المميزة وعناوين الأقسام.
- Cahuenga — الاستبدال: Charter · الخطوط العريضة 500 · خط زخرفي مميز ذو نهايات مزخرفة، يُستخدم لعناوين المنتجات (عناوين الشريط الجانبي، عناوين بطاقات التسجيل، النص الرئيسي). يتميز بوزنه المتوسط وارتفاع سطوره الطفيف، مما يمنحه مظهرًا أنيقًا دون أن يبدو ضخمًا؛ وهو الخط الوحيد الذي، إلى جانب اللون البرتقالي، يُشير إلى هوية Substack.
- Spectral — الاستبدال: Charter · الخطوط العريضة 400 · خط ذو حروف مزخرفة مناسب للمنشورات الطويلة، يُستخدم في غرف القراءة ومحتوى موجز الأخبار لتحسين سهولة قراءة المواد التحريرية. يضمن تباعد الأسطر الأضيق قليلاً (1.20) قراءة مريحة للفقرات مع الحفاظ على الاختصار المعهود في غرف الأخبار.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | كثيف |
| الخطوة الأساسية | 8px |
| نصف قطر الزر | 9999px |
| نصف قطر البطاقة | 12px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 32px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Substack وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- ElevenLabs — مجموعة صور بألوان كريمية دافئة مع عناوين دقيقة. دفتر ملاحظات على طراز باوهاوس - ورق بلون قشر البيض، وحبر أسود، ولمسة واحدة من اللونين الأرجواني والبرتقالي لعرض المنتج.
- Awesomic — شبكة زنك تحريرية بعلامات ترقيم برتقالية تذكرنا بالقصاصات الورقية.
- Monad — مجلة فنية تحريرية حول الرق الدافئ
- Dub — لوحة تحكم ورق الأرز غير اللامع من لينك
- Seline Analytics — جدول تحليلي هادئ على ورق دافئ
- Notion — دفتر ملاحظات ورقي دافئ تحت شمس الظهيرة
- Anthropic — مجلة علمية ميدانية على ورق رق دافئ - أسطح عاجية هادئة، وعناوين تحريرية ذات حروف مزخرفة، ولمسة طينية واحدة تظهر فقط عند الحاجة إلى العمل.
- Calendly — حبر أزرق داكن على رخام بارد
- Augen Pro — يتميز تصميم أبل الأبيض بلمسة زرقاء كهربائية خفيفة الوزن، تُعتبر اللمسة الوحيدة في مساحة أحادية اللون.
- Antimetal — سجل افتتاحي مطبوع على ورق كريمي اللون - صباح هادئ في مجلة علمية، حيث يعكس ضبط النفس الثقة وتؤدي الحروف ذات الزوائد المهمة الصعبة
- Perk — ليمون كهربائي على ورق برشمان دافئ
- Ditto — ورشة عمل مضاءة بأشعة الشمس تُصنع فيها عينات من الزهور البرية. أسطح كريمية دافئة، لون أساسي أصفر نابض بالحياة، أحبار زرقاء داكنة، أشكال لونية عضوية تتفتح خلف القطعة.