انتقل إلى المحتوى
  • تصميم التفاعل
  • اختبار قابلية الاستخدام
  • تجربة المستخدم
  • أبحاث تجربة المستخدم
  • المخططات الهيكلية
  • واجهة المستخدم
العميل
MBC
الخدمات
تصميم التفاعل، اختبار قابلية الاستخدام، تجربة المستخدم، أبحاث تجربة المستخدم، المخططات الهيكلية، واجهة المستخدم
القطاع
الأخبار والإعلام
التاريخ
أكتوبر 2025

الثقافية ليست مجرد بوابة إخبارية: إنها هوية ثقافية.

بوابة أخبار ثقافية لمجموعة MBC مبنية من اليمين إلى اليسار من الأساس، تضم قوالب الصفحة الرئيسية والمقال وتفاصيل البرنامج، على نظام تصميم تحريري واحد بهوية مميزة باللون الوردي الفوشي.

الثقافية: الأخبار والإعلام، من تصميم UXNCO

المقارنة المرجعية

فهم مشهد الإعلام الثقافي العربي

قبل تصميم أي شاشة، رسمنا خريطة الساحة التنافسية للإعلام الرقمي الناطق بالعربية ومنصات الأخبار الثقافية الدولية. ودرسنا كيف تتعامل مع تسلسل المحتوى، والتخطيط التحريري، والتنقل من اليمين إلى اليسار، ودمج البث المباشر، والموازنة بين كثافة المعلومات وسهولة القراءة.

وقد استعاضت مرحلة المقارنة المرجعية هذه عن أبحاث المستخدمين الرسمية بالتحليل التنافسي التطبيقي، لفهم الأعراف التي يثق بها الجمهور العربي أصلًا، وتحديد المواضع التي يمكن أن تتميّز فيها الثقافية.

التسلسل التحريري هو كل شيء

تنظّم البوابات العربية الرائدة محتواها بنظام واضح للثقل البصري: قصة رئيسية، وشبكة ثانوية، وقائمة الأكثر رواجًا. فالقرّاء يتصفحون بأعينهم قبل أن يقرؤوا.

لون العلامة هوية تحريرية

لون مميز واحد قوي (الأحمر في MBC، والأزرق في سكاي نيوز عربية) يجعل العلامات الإعلامية مألوفة من النظرة الأولى. والاتساق في كل الحالات يبني الثقة بالعلامة.

تجربة قراءة المقال لا تنال حقها من التصميم

تضحّي معظم بوابات الأخبار العربية بتجربة القراءة لصالح كثافة الإعلانات. وهنا فرصة لمنصة ثقافية كي تستثمر في الخطوط والمسافات التحريرية.

أبرز نتائج الاستكشاف

7+
منصات شملتها المقارنة المرجعية
3
قوالب صفحات صمّمناها
1
نظام تصميم مبني من اليمين إلى اليسار

المنصات التي درسناها

نظرة أعمق على الإعلام العربي والبوابات الثقافية

أجرينا مقارنة مرجعية لسبع منصات من الإعلام الإخباري العربي والبوابات الثقافية والمراجع التحريرية الدولية، ودرسنا شبكات المحتوى فيها، وأنماط التنقل، وتخطيطات المقالات، وطريقة إبراز المحتوى الرائج والمباشر، ثم صغنا الإشارات في محاور واضحة.

لم يكن الهدف نسخ منصة بعينها، بل استخلاص الأنماط التي اعتاد الجمهور الناطق بالعربية الوثوق بها، ثم الارتقاء بها بصوت ثقافي متفرّد.

مجموعة من الواجهات التي شملتها المقارنة المرجعية لبوابة الثقافية، منها Netflix وشاهد وSpotify وAirbnb وMasterClass وموقع أخبار عربي

MBC

عملاق الإعلام العربي، وأنماط التنقل.

سكاي نيوز عربية

تخطيط الأخبار العاجلة.

الجزيرة

العمق التحريري.

Arabia.com

نموذج المحتوى الثقافي.

BBC عربي

تميّز في تجربة المستخدم من اليمين إلى اليسار.

نظام التصميم

هوية بصرية متجذّرة في الثقافة العربية

من المقارنة المرجعية برز اتجاه واضح: جريء، وتحريري، ومتجذّر ثقافيًا. ويستخدم نظام تصميم الثقافية لونًا ورديًا فوشيًا لافتًا يخترق الضجيج البصري في المشهد الإعلامي العربي: مميز، ولا يُنسى، ومبني من اليمين إلى اليسار من الأساس.

نظام تصميم الثقافية على خلفية داكنة: لوحة ألوان من الوردي الفوشي والأحمر، وخطا DM Serif وManrope مع العربية، وأزرار بيضاوية لـ«اقرأ المزيد» و«مباشر»، ومكونات بطاقة الخبر والبطاقة الكبيرة وشارة البث المباشر والتنقل من اليمين إلى اليسار

الوردي حضور ثقافي واثق

في مشهد يهيمن عليه الأحمر (MBC) والأزرق (سكاي نيوز)، يمنح الوردي الفوشي منصة الثقافية حضورًا جريئًا ومتفرّدًا: ثقافية من دون أن تكون محافظة.

انضباط الشبكة التحريرية

شبكة أعمدة صارمة بأوزان بطاقات مدروسة (رئيسية، وأساسية، وثانوية، وجانبية) تصنع تسلسلًا واضحًا للمحتوى يتصفحه القرّاء بالفطرة.

من اليمين إلى اليسار من الأساس

التنقل، وتخطيط المقال، ومحاذاة البطاقات، واتجاه القراءة، كلها مبنية من اليمين إلى اليسار. العربية ليست طبقة ترجمة، بل هي لغة التصميم.

الصفحة الرئيسية للأخبار

اكتشاف المحتوى عبر التسلسل التحريري

الصفحة الرئيسية تجربة تحريرية منسّقة بعناية، لا مجرد تكديس للمحتوى. يفتتحها شريط عرض رئيسي بعرض الصفحة يقدّم القصة الأهم ثقافيًا. وفي الأسفل ثلاث مناطق محتوى مختلفة، «أحدث المقالات» و«الأكثر رواجًا» و«اخترنا لكم»، تستخدم كل منها شكلًا مختلفًا من البطاقات لخلق إيقاع بصري وتوجيه مسار القراءة.

شريط عرض رئيسي بعرض الصفحة

تتصدّر القصة المميزة صورة سينمائية تملأ العرض، مع عنوان عربي فوقها وزر إجراء واحد، ونقاط للتنقل بين الشرائح. هكذا تتحدد النبرة التحريرية من اللحظة الأولى.

أحدث المقالات

شبكة من أربعة أعمدة لبطاقات الأخبار تضم صورة مصغّرة وعنوانًا وتصنيفًا، يسهل تصفحها بنظرة واحدة. ورابط «عرض الكل» لتصفح أعمق من دون إثقال الجزء الظاهر من الصفحة.

شريط الأكثر رواجًا

قسم بخلفية داكنة وتخطيط مقسوم: أربع بطاقات قائمة مدمجة على اليمين، وبطاقة مميزة كبيرة بصورة على اليسار. أقصى كثافة بلا ازدحام.

ويقسم شريط «الأكثر رواجًا» الأسود الصفحة البيضاء إلى فصول محتوى واضحة، مستعيرًا نمطًا من تصميم المجلات، فيمنح الصفحة الرئيسية إحساسًا بالبنية بدلًا من التمرير اللانهائي.

موقع الثقافية على حاسوبين محمولين: صفحة مقال عربية مع العنوان والصورة الرئيسية وشريط جانبي لأحدث المقالات، وشاشة إنشاء الحساب الداكنة بجانب شبكة من مربعات التصنيفات

تفاصيل المقال والبرنامج

قالبان. تجربة واحدة متسقة.

تقدّم المنصة نوعين مختلفين من المحتوى، المقالات المكتوبة والبرامج المبثوثة، ولكل منهما قالب صفحة خاص. ويتشارك القالبان نظام التنقل نفسه والتذييل ولغة التصميم، لكن تخطيط المحتوى مبني خصيصًا لكل شكل.

تعطي صفحة تفاصيل المقال الأولوية لراحة القراءة: عمود نص عريض، وشريط جانبي للمحتوى ذي الصلة، ونسبة واضحة للكاتب. أما صفحة تفاصيل البرنامج فتبدأ بالفيديو الرئيسي، مع عرض طاقم العمل وجدول البث ومعلومات الحلقات مباشرة أسفل الجزء الظاهر من الصفحة.

تفاصيل المقال: القراءة أولًا

متن عريض في المنتصف مع اقتباسات بارزة. ويحمل الشريط الجانبي قسمي «احدث المقالات» و«اخترنا لكم»، ليبقى القرّاء داخل المنصة بعد الانتهاء من المقال.

تفاصيل البرنامج: الفيديو أولًا

لقطة سينمائية بعرض الصفحة مع العنوان فوقها، وشارة جدول البث (الجمعة والسبت)، وثلاثة أزرار إجراء سريعة: «شاهد الحلقة 1» و«أضف إلى القائمة» و«مشاركة».

التبويبات: معلومات إضافية ومحتوى ذو صلة

تعتمد صفحة تفاصيل البرنامج على نظام تبويبات لقسمي «المزيد من المعلومات» (طاقم العمل والمخرج والنوع) و«ذات علاقة» (المحتوى ذو الصلة)، ما يقلّص طول التمرير مع إبقاء كل البيانات في المتناول.

ثلاث شاشات حاسوب محمول مشروحة لموقع الثقافية بالعربية: شريط العرض الرئيسي في الصفحة الرئيسية، وصفحة تصنيف الموضة مع بطاقة مميزة وردية، وصفحة تفاصيل برنامج مع شارة جدول البث وأزرار الإجراء وتبويبي «المزيد من المعلومات» و«ذات علاقة»

التسليم

ثلاثة قوالب. منتج واحد متكامل.

انطلقت الثقافية موقعًا مكتمل التصميم بثلاثة قوالب صفحات مبنية لغرضها، الصفحة الرئيسية وتفاصيل المقال وتفاصيل البرنامج، يشغّلها جميعًا نظام تصميم واحد مبني من اليمين إلى اليسار، بتنقل وتذييل ومكتبة مكونات ولغة ألوان مشتركة.

ما سلّمناه

3
قوالب صفحات صمّمناها
51+
إجمالي الشاشات والحالات
1
نظام تصميم RTL
30+
مكونات قابلة لإعادة الاستخدام
مشغّل الفيديو في الثقافية يعرض لقطة من برنامج مع عنوانه العربي في الأعلى وشريط أدوات التحكم بالتشغيل
شاشات الثقافية للجوال على مربعات وردية وسوداء: الشعار، وصفحة أخبار رئيسية مع زر البث المباشر وقصة رئيسية، وصفحة تفاصيل برنامج مع قائمة الحلقات، ونموذج تسجيل الدخول العربي، وصفحة تفاصيل خبر

المنهجية

كيف صمّمنا منصة إعلامية ثقافية من دون أبحاث تقليدية

احتاجت الثقافية إلى منتج يبدو رصينًا، ومتجذّرًا ثقافيًا، ومختلفًا بوضوح عن المشهد المزدحم للأخبار العربية. وبدلًا من البدء بمقابلات المستخدمين، بدأنا بالتحليل التنافسي، فدرسنا أفضل ما في تصميم الإعلام العربي والدولي، ثم طبّقنا هذه الخلاصات على نظام جديد مبني من اليمين إلى اليسار.

01

رسمنا خريطة المشهد التنافسي

02

بنينا ثلاثة قوالب مخصّصة لغرضها

03

أرسينا هوية ثقافية متفرّدة

ما تعلّمناه

الإيقاع التحريري يبني الثقة

يعتمد القرّاء العرب على تسلسل مألوف للمحتوى. والبنية الواضحة تصنع الثقة، وتحسّن التنقل، وتعزّز تجربة القراءة.

المحتوى المباشر يحفّز التفاعل

يجب أن يبقى الوصول إلى البث المباشر ظاهرًا وفوريًا. فالموضع البارز يقلّل العوائق ويشجّع على تفاعل مستمر من الجمهور.

تجربة القراءة مهمة

البنية الواضحة، والمسافات المريحة، والخطوط المتقنة، تصنع تجربة قراءة أكثر جاذبية وتشجّع على جلسات أطول.

أعمال أخرى

منتجات أخرى صمّمناها.

تواصل معنا

سواء كانت لديك فكرة أو تحدٍّ، فنحن جاهزون للانطلاق معك.

أخبرنا أين وصل منتجك اليوم، وسنعود إليك خلال يومي عمل بتصوّرنا لطريقة العمل عليه.