
Medium
جريدة بيضاء كريمية اللون في وقت الغروب
يعمل موقع Medium كقاعة قراءة أدبية مُحوَّلة إلى الإنترنت: خلفية دافئة بلون كريمي (#f7f4ed) تحل محل اللون الأبيض الباهت المعتاد في برامج SaaS، مما يجعل النصوص الطويلة تبدو كصفحة مطبوعة. النظام البصري أحادي اللون بشكل صارخ - جميع أسطح واجهة المستخدم والنصوص والحدود تقريبًا تقع ضمن نطاق ضيق من درجات الرمادي الدافئة تتراوح من #242424 إلى #6b6b6b - بحيث يتركز انتباه القارئ بالكامل على المحتوى. اللمسة المميزة الوحيدة هي عنوان الصفحة بخط serif (GT Super، 120 بكسل، وزن 400، تباعد الأحرف -0.055em)، وهو اختيار متعمد لمخالفة التيار السائد: خط serif انتقالي مُكبَّر للعرض، بالكاد يُلاحظ، بدلاً من خط sans-serif هندسي جريء، يُشير إلى: "نحن ننشر كتبًا، لا برامج". الأزرار عبارة عن "أقراص" كاملة بلون أسود تقريبًا - الحبر الصلب الوحيد على الصفحة.
تتألف الصفحة الرئيسية من عمودين: يشغل العمود الأيسر حوالي 55% من مساحة الصفحة، ويضم العنوان الرئيسي والنص الفرعي وعبارة الحث على اتخاذ إجراء مرتبة عموديًا مع مسافات داخلية واسعة؛ بينما يشغل العمود الأيمن حوالي 45% من مساحة الصفحة، ويضم لوحة رسوم توضيحية. العمود الأيسر محاذٍ لليسار (وليس في المنتصف)، مما يثبت الصفحة على محور القراءة. أسفل الصفحة الرئيسية، تظهر الصفحة على شكل شريط واحد كامل العرض بلون كريمي مع روابط مركزية في التذييل. لا توجد شبكات بطاقات أو أقسام مميزة أو شرائط متناوبة على الصفحة الرئيسية - فالصفحة الرئيسية هي صفحة بحد ذاتها. كثافة المحتوى منخفضة عمدًا: عنوان رئيسي واحد، جملة واحدة، زر واحد، صورة واحدة. الصفحة بمثابة غلاف، وليست لوحة تحكم.
الرسوم التوضيحية تحريرية وعرضية، وليست منهجية. تعرض الصفحة الرئيسية رسمًا يدويًا واحدًا (زهرة خضراء، يد هندسية، خطوط كوكبة) بأسلوب عفوي وبسيط. تبدو الرسوم وكأنها أعمال مُكلّفة تتغير موسميًا، وليست من مكتبة دائمة. لا توجد صور فوتوغرافية على الصفحة الرئيسية. لا توجد أيقونات على الصفحة الرئيسية - فالنص والشعار هما العنصران الأساسيان. اللغة البصرية نصية في المقام الأول، بينما تُستخدم الرسوم التوضيحية كعلامات ترقيم.
لوحة الألوان
حيادي
- Newsprint Cream
#f7f4ed— تتميز صفحة العرض وخلفية النافذة الرئيسية وخلفية القسم بلون دافئ وكريمي قليلاً، مما يخلق إحساسًا بواجهة مطبوعة بدلاً من واجهة رقمية. - Paper White
#ffffff— أسطح البطاقات، والألواح المرتفعة، وحقول إدخال النماذج، وأي أسطح تحتاج إلى فصلها عن القماش الكريمي. - Ink
#242424— نص الجسم، نص الجسم، الروابط، العناوين - أدفأ قليلاً من الأسود الصافي، ويبدو جيداً على خلفية كريمية. - Body Gray
#333333— يتم استخدام لون النص الثانوي ولون المقدمة الافتراضي عندما يكون اللون المطلوب أفتح قليلاً من لون الحبر دون فقدان التباين. - Button Black
#191919— يُدعم استخدام لون محايد لعناصر واجهة المستخدم الثانوية، والفواصل، والتسميات الخافتة. ولا ينبغي استخدامه كلون أساسي لعبارات الحث على اتخاذ إجراء. - Marginalia Gray
#6b6b6b— دعم الألوان المحايدة لواجهة المستخدم الثانوية والفواصل والتسميات الخافتة.
الطباعة
من 13 إلى 120 بكسل · 5 خطوات
- medium-content-sans-serif-font — الاستبدال: Inter · الخطوط العريضة 400 · خط medium-content-sans-serif - تم العثور عليه في البيانات المستخرجة ولكن لم يتم وصفه بواسطة الذكاء الاصطناعي.
- GT Super — الاستبدال: Playfair Display · الخطوط العريضة 400 · العناوين والنص الأساسي مكتوبة بخط سيريف انتقالي بحجم كبير جدًا، مع تباعد ضيق بين الأحرف ومسافة بين الأسطر تبلغ 0.83. يُعد اختيار وزن 400 (غير غامق) بحجم 120 بكسل سمة مميزة: فالأشكال الحرفية، لا الوزن، هي التي تُضفي التأثير المطلوب. يُقلل التباعد السلبي بين الأحرف من الفراغات البصرية، مما يجعل عبارة "قصص وأفكار إنسانية" تبدو ككتلة طباعية متماسكة.
- Söhne — الاستبدال: Inter · الخطوط العريضة 400 · يُستخدم خط واجهة المستخدم بدون زوائد للتنقل والأزرار والعناوين الفرعية والعناوين الصغيرة. يتراوح حجم الخط بين 13 و14 بكسل لعناوين التنقل والأزرار، وبين 20 و22 بكسل للعناوين الفرعية والنصوص الثانوية داخل العنوان. يتميز هذا الخط البسيط ذو الأبعاد المتناسقة بسهولة قراءته في الأحجام الصغيرة وعدم إزعاج المستخدم في الأحجام الكبيرة.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | متوسط |
| الخطوة الأساسية | 16-24px |
| نصف قطر الزر | 9999px |
| نصف قطر البطاقة | 0px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 64px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Medium وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Steep — تحليل الخطوط ذات الزوائد على ورق دافئ
- Newformcap — صحيفة افتتاحية في غرفة الملابس
- Claude — قطعة أثرية مطبوعة على رق دافئ - حبر على ورق عظمي، والطين هو نفحة اللون الوحيدة
- 11x– Digital workers — صحراء تحريرية سينمائية – صور بانورامية للمناظر الطبيعية موضوعة على خلفية عناوين ضخمة بخط serif تبدو وكأنها صفحات مجلة فاخرة
- Revolut — عمل تحريري أحادي اللون يعتمد على صورة فوتوغرافية للسحب - حبر أبيض، أزرار على شكل علبة دواء، وشريط أزرق واحد من اللون في عالم رمادي اللون.
- Scheduling — حبر تحريري على ورق كريمي
- Titan — أرشيف أحادي اللون ذو درجات لونية دافئة
- Programa — استوديو تصميم سويسري في منتصف النهار. جدار المعرض الأبيض مضاء بمصباح طاولة أصفر وحيد - كل شيء بدرجات اللون الرمادي حتى يلفت انتباهك زر أو رمز أو عنصر مميز، وعندها يحدد هذا العنصر الأصفر الوحيد الغرفة بأكملها.
- Sana Agents — بريق الليمون على خلفية بيضاء في صورة تحريرية
- Visual — منشور سري دافئ. ورق كريمي، ملصقات ذات حروف مزخرفة، هوامش أحادية اللون، قلم تحديد أصفر واحد.
- Midday — كتيب تحريري مطبوع على ورق شفاف - عنوان رئيسي بخط serif بحجم 72 بكسل على خلفية حجرية دافئة، نص أساسي بخط sans-serif مع مسافات، عناصر تحكم على شكل حبة دواء، بدون ظلال
- Chat for impact — عيادة خضراء داكنة ذات غرف بألوان الباستيل