النيوبروتالية مقابل البروتالية: 7 فروق جوهرية مع أمثلة

إليك محادثة خضتها مرات أكثر من أن أحصيها:

العميل: «نريد موقعاً بروتالياً.»

أنا: «رائع. وما الذي يعنيه لك مصطلح البروتالية؟»

العميل: «تعرف، حدود سميكة وألوان زاهية وذلك الطابع الجريء.»

أنا: «هذه هي النيوبروتالية، لا البروتالية.»

العميل: «...هناك فرق؟»

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

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

لنفكّك الفروق السبعة الجوهرية التي تفصل بين هاتين الحركتين التصميميتين الجريئتين.

درس تاريخي سريع (أعدك أنه ذو صلة)

قبل أن نغوص في الفروق، لنهيّئ المشهد.

البروتالية: حين تلتقي عمارة الخمسينيات بالويب

بدأت البروتالية في خمسينيات القرن الماضي بوصفها حركة معمارية. ويأتي الاسم من béton brut، وهي بالفرنسية «الخرسانة الخام» — وهو ما يصف تماماً هيئة المباني البروتالية.

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

أمثلة مشهورة:

• مركز Barbican في لندن
• مبنى بلدية بوسطن
• Habitat 67 في مونتريال

بقفزة إلى مطلع الألفينيات، بدأ مصممو الويب باستعارة مبادئ بروتالية — HTML خام، وCSS في حده الأدنى، وتخطيطات «قبيحة» عن قصد. لقد رفضوا مواقع تلك الحقبة، المفرِطة في التصميم والمثقلة بتقنية Flash.

صارت البروتالية على الويب تصميماً مناهضاً للتصميم. الوظيفة قبل الشكل. المحتوى قبل الصقل. الصدق قبل البريق.

النيوبروتالية: تمرّد وُلد رقمياً

ظهرت النيوبروتالية قرابة 2015-2018 رداً على تصميم ويب متجانس. وفي حين كانت البروتالية تدور حول التجريد حتى العظم، سلكت النيوبروتالية المسار المعاكس: تضخيم كل شيء.

حدود سوداء سميكة. ظلال قاسية مُسقَطة. ألوان عالية التباين. شبكات غير متماثلة. حافظت على جرأة البروتالية لكنها أضافت المرح واللون وخيارات تصميم مقصودة.

لم تكن النيوبروتالية مناهضة للتصميم — بل كانت تصميماً جريئاً. لقد رفضت الجمالية الناعمة المستديرة الباستيلية التي سادت في عقد 2010.

تبنّتها علامات مثل Gumroad وBalenciaga وSpotify. وحوّلها المصممون على Dribbble وBehance إلى موضة رائجة. وأما الآن؟ فهي من أكثر لغات التصميم تميّزاً التي يمكنك استخدامها.

الفروق السبعة الجوهرية

الآن بعد أن غطينا التاريخ، لندخل في ما يفصل حقاً بين هذين الأسلوبين.

1. الغاية والفلسفة

البروتالية: الوظيفة فوق كل شيء

التصميم البروتالي متجذّر في المينيماليّة والصدق. الفلسفة بسيطة: أظهِر البنية. لا تُخفِ السقالة. لا تضِف زخرفة من أجل الزخرفة.

في تصميم الويب، يعني ذلك:

• CSS في حده الأدنى
• بنية HTML مكشوفة
• طباعة أساسية
• بلا حركات أو زخارف
• المحتوى هو الملك

مثال: قد تستخدم مدونة بروتالية خطوط النظام الافتراضية، وصفراً من الألوان عدا الأسود والأبيض، وقوائم <ul> بسيطة للتنقل. إنها مقروءة ووظيفية ولا تبذل أي جهد لتكون جميلة.

النيوبروتالية: تعبير جريء بنيّة واضحة

تحتفظ النيوبروتالية بالخشونة لكنها تضيف شخصية. إنها ليست مناهِضة للتصميم — بل تصميم واثق. الفلسفة هي: اِلفت الأنظار، وكن راسخاً في الذاكرة، لكن لا تضحِّ بقابلية الاستخدام.

في تصميم الويب، يعني ذلك:

• لوحات ألوان مقصودة (أسود/أبيض + لمسات زاهية)
• الطباعة كتصريح (خطوط جريئة هندسية)
• تراتُب بصري عبر التباين والحجم
• مايكرو-تفاعلات تعزّز تجربة المستخدم
• تصميم يبدو «مصنوعاً باليد»

مثال: تستخدم صفحة هبوط نيوبروتالية خط Archivo Black للعناوين، وحدوداً سميكة بمقدار 4px على كل عنصر، وظلالاً قاسية بإزاحة 6px، وزر حث على الإجراء بلون أصفر زاهٍ. إنها جريئة، لكن كل خيار فيها مدروس.

الفرق: تسأل البروتالية: «هل نحتاج إلى هذا؟» وتسأل النيوبروتالية: «كيف نجعل تجاهل هذا مستحيلاً؟»

2. استخدام اللون

البروتالية: أحادية اللون أو بلا لون

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

والمنطق؟ اللون زخرفة، والبروتالية ترفض الزخرفة.

مثال على لوحة ألوان:

نسخ:root {
  --background: #ffffff;
  --foreground: #000000;
  --gray: #666666;
}

هذا كل شيء. ثلاثة ألوان. وربما أربعة إن كنت في مزاج جامح.

النيوبروتالية: كتل لونية عالية التباين

النيوبروتالية تعشق اللون — لكن ليس ألوان الباستيل الخفيفة. نحن نتحدث عن درجات جريئة ومشبعة وبلا اعتذار. يشكّل الأسود والأبيض القاعدة، ثم تضيف لوناً أو لونين للإبراز يلفتان النظر.

لوحات نيوبروتالية شائعة:

• أسود + أبيض + أصفر نيون (#FFDB33)
• أسود + أبيض + وردي صارخ (#FF006E)
• أسود + أبيض + أزرق سايبر (#00F0FF)

مثال على لوحة ألوان:

نسخ:root {
  --background: #ffffff;
  --foreground: #000000;
  --primary: #ffdb33;
  --accent: #ff006e;
  --border: #000000;
}

الألوان ليست مجرد لمسات إبراز — بل تُستخدم للتوكيد والتراتُب والطاقة.

مثال: تستخدم Gumroad أزرار حث صفراء زاهية على خلفيات سوداء. وتستخدم Feastables درجات خضراء وبنفسجية نيون. هذه ليست مصادفات — بل صميم هوية العلامة.

الفرق: تستخدم البروتالية اللون بشُحّ أو لا تستخدمه إطلاقاً. وتستخدم النيوبروتالية اللون باستراتيجية وجرأة.

3. الطباعة

البروتالية: خطوط النظام والافتراضات

غالباً ما يستخدم التصميم البروتالي كل ما يأتي مع المتصفح:

• Arial
• Times New Roman
• مجموعات خطوط النظام

لماذا؟ يُنظر إلى الخطوط المخصصة كزخرفة لا لزوم لها. النص ينبغي أن يكون مقروءاً، لا جميلاً.

مثال:

نسخbody {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

قد تكون العناوين أكبر قليلاً، لكن لا يوجد تراتُب عبر الوزن أو النمط. إنه نص عادٍ، عن قصد.

النيوبروتالية: خطوط عرض جريئة هندسية

تتعامل النيوبروتالية مع الطباعة بوصفها عنصراً بطلاً. العناوين ضخمة وجريئة، وكثيراً ما تستخدم خطوطاً هندسية مميزة مثل:

• Archivo Black
• Bebas Neue
• Monument Extended
• Druk

مثال:

نسخh1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
 
body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

الطباعة تخلق تراتُباً بصرياً. نص المتن مقروء، لكن العناوين تفرض الانتباه.

مثال واقعي: ألقِ نظرة على موقع Balenciaga. طباعتهم ضخمة وجريئة ويستحيل تفويتها. تلك هي النيوبروتالية.

الفرق: تستخدم البروتالية الخطوط الافتراضية بوصفها ضد-زخرفة. وتستخدم النيوبروتالية الطباعة الجريئة بوصفها سمة تصميمية.

4. التخطيط والبنية

البروتالية: شبكات مكشوفة وHTML خام

تتبنّى التخطيطات البروتالية التدفق الافتراضي لـ HTML. سترى:

• تخطيطات بعمود واحد
• قوائم بلا تنسيق
• جداول تبدو كجداول
• بلا شبكات فاخرة أو حيل flexbox

التخطيط وظيفي، وكثيراً ما يحاكي تصميم الويب المبكر (فكّر في GeoCities أو Craigslist).

مثال: قد يسرد معرض أعمال بروتالي المشاريع في <ul> بسيطة مع طوابع زمنية. بلا بطاقات، بلا تأثيرات hover، بلا تباعد يتجاوز افتراضات المتصفح.

نسخ<ul>
  <li>Project 1 - 2025</li>
  <li>Project 2 - 2024</li>
  <li>Project 3 - 2023</li>
</ul>

بسيط. خام. بلا CSS عدا ربما بعض تعديلات الـ margin.

النيوبروتالية: شبكات غير متماثلة وطبقات

تكسر التخطيطات النيوبروتالية الشبكة — عن قصد. سترى:

• توزيع عناصر غير متماثل
• أقسام متداخلة
• عناصر «تطفو» أو تُزاح
• استخدام مكثّف لـ CSS Grid وFlexbox لتخطيطات إبداعية

كل شيء ما زال وظيفياً، لكن التخطيط يخلق جذباً بصرياً.

مثال: قد يتضمن قسم hero نيوبروتالي:

• عنواناً كبيراً مُزاحاً إلى اليسار
• صورة بحدود سميكة تتداخل مع العنوان
• زر حث موضوعاً بشكل غير متماثل
• ظلالاً قاسية تخلق عمقاً

نسخ<section className="grid grid-cols-2 gap-8 relative">
  <div className="col-span-2 md:col-span-1 z-10">
    <h1 className="text-7xl font-bold uppercase">Your Product</h1>
    <p className="text-xl mt-4">Bold designs for bold brands.</p>
    <Button className="mt-6">Get Started</Button>
  </div>
  <div className="absolute right-0 top-10 w-1/2 border-4 border-black shadow-[8px_8px_0_0_#000]">
    <img src="/hero.png" alt="Hero" />
  </div>
</section>

الفرق: تعرض البروتالية البنية كما هي. وتصمّم النيوبروتالية البنية لأجل الأثر.

5. الحدود والظلال

البروتالية: بلا شيء أو الحد الأدنى

نادراً ما تستخدم التصاميم البروتالية الحدود أو الظلال. وإن ظهرت، فهي خفيفة — خط بمقدار 1px للفصل بين الأقسام، ربما.

السبب؟ الظلال والحدود زخرفية. إنها تضيف ثقلاً بصرياً تتجنبه البروتالية.

مثال:

نسخ.section {
  border-top: 1px solid #ccc;
  padding: 20px 0;
}

هذا تقريباً أقصى ما تبلغه البروتالية من زخرفة.

النيوبروتالية: حدود سميكة وظلال قاسية

النيوبروتالية كلها حدود وظلال. الحدود السميكة (3-6px) والظلال القاسية المُسقَطة هي الأسلوب البصري المميّز لها.

كل بطاقة وزر وحقل إدخال وصورة تحصل على:

• حد أسود سميك (عادةً 3-4px)
• ظل قاسٍ مُزاح (بلا تمويه، مجرد إزاحة بلون صلب)

مثال:

نسخ.card {
  border: 4px solid #000;
  box-shadow: 6px 6px 0 0 #000;
  padding: 2rem;
  background: #fff;
}
 
.button {
  border: 3px solid #000;
  box-shadow: 4px 4px 0 0 #000;
  transition: transform 0.2s, box-shadow 0.2s;
}
 
.button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #000;
}

الأثر لا تخطئه العين — تبدو العناصر «مختومة» على الصفحة.

مثال واقعي: جميع مكوّنات Neobrutalism تستخدم أسلوب الظل هذا. بطاقات Gumroad. مربّعات منتجات Feastables. إنه بطاقة التعريف للنيوبروتالية.

الفرق: تتجنب البروتالية العمق البصري. وتتبنّاه النيوبروتالية بظلال قاسية وحدود سميكة.

6. التفاعلية والحركة

البروتالية: ساكنة بحكم التصميم

غالباً ما تكون المواقع البروتالية ساكنة. تأثيرات hover؟ ضئيلة أو معدومة. حركات؟ لماذا نتكبّد العناء. التصميم يدور حول المحتوى، لا التفاعل.

وإن وُجدت عناصر تفاعلية، فإنها تتصرف تماماً كـ HTML الافتراضي:

• الروابط زرقاء ومسطّرة بخط سفلي
• الأزرار تبدو كعناصر <button>
• النماذج حقول <input> بلا تنسيق

مثال:

نسخ<a href="/about">About</a>

يبقى ذلك الرابط أزرق. ويُسطَّر عند الـ hover. هذا كل شيء.

النيوبروتالية: مايكرو-تفاعلات خفيفة لكن مقصودة

تستخدم النيوبروتالية المايكرو-تفاعلات لتعزيز تجربة المستخدم دون تكلّف. فكّر في:

• أزرار تنزاح قليلاً عند الـ hover (تحاكي تحرك الظل)
• روابط تغيّر لونها أو تحصل على خط سفلي سميك
• بطاقات تتوسّع أو ترتفع عند التفاعل
• انتقالات صفحات سلسة

الحركات سريعة (100-300ms) وذات غرض — لا مشتِّتة.

مثال:

نسخ// Framer Motion button interaction
<motion.button
  whileHover={{
    x: 2,
    y: 2,
    boxShadow: "2px 2px 0 0 #000"
  }}
  whileTap={{
    x: 4,
    y: 4,
    boxShadow: "0px 0px 0 0 #000"
  }}
  transition={{ duration: 0.1 }}
  className="border-3 border-black shadow-[4px_4px_0_0_#000]"
>
  Click Me
</motion.button>

يُضغَط الزر «إلى الداخل» عند النقر، فيمنح استجابة ملموسة. إنه مرِح لكن ليس مبالَغاً فيه.

الفرق: البروتالية ساكنة وخام. وتضيف النيوبروتالية تفاعلات مبهجة تعزّز قابلية الاستخدام.

7. الغاية الجمالية

البروتالية: ضد-الجمالية

ترفض البروتالية الجمال التقليدي. إنها لا تحاول أن تبدو جميلة بالمعنى المتعارف عليه — بل تحاول أن تكون صادقة ووظيفية وأحياناً مواجِهة.

الغاية الجمالية هي تعرية التكلّف وإظهار البنية الخام تحته. وإن رآها المستخدمون قبيحة، فلا بأس — بل قد يكون ذلك هو المقصد.

أمثلة:

• Craigslist (بروتالي دون قصد)
• The Outline (صحافة بروتالية عن قصد)
• إعادات تصميم Bloomberg المبكرة (المحتوى أولاً، صفر زخرفة)

النيوبروتالية: جمالية جريئة

تريد النيوبروتالية أن يُلتفت إليها. إنها جريئة وواثقة وراسخة في الذاكرة. الغاية الجمالية هي أن تلفت الأنظار مع بقائها وظيفية.

إنها ليست ضد-الجمال — بل نوع مختلف من الجمال. خام وهندسي ومرِح وبلا اعتذار.

أمثلة:

• صفحات منتجات Gumroad (جريئة ومباشرة وملوّنة)
• موقع Feastables (مرِح ونشِط وعالي التباين)
• صفحات حملات Spotify (تجريبية وغير متماثلة ونابضة)

الفرق: تقول البروتالية: «هذا ما هو عليه، خذه أو دعه.» وتقول النيوبروتالية: «انظر إلى هذا — أراهن أنك لم ترَ مثله قط.»

مقارنة جنباً إلى جنب

لنضع هذا في جدول مرئي:

أمثلة واقعية في مقارنة

لننظر إلى مواقع حقيقية لنرى هذه الفروق أثناء العمل.

مثال على البروتالية: The Outline

ما يجعله بروتالياً:

• نص أسود على خلفية بيضاء، صفر لون
• خطوط النظام في كل مكان
• CSS في حده الأدنى، تخطيط يضع المحتوى أولاً
• بلا حدود، بلا ظلال، بلا زخرفة
• ساكن ووظيفي وخام

خيارات التصميم:

• تخطيط مقال بعمود واحد
• عناوين كبيرة، لكن بلا تنميق
• الصور تكسر الشبكة بشكل طبيعي
• التنقل قائمة بسيطة

إنه مقروء ووظيفي ولا يبذل أي جهد ليكون عصرياً. تلك هي البروتالية.

مثال على النيوبروتالية: Gumroad

ما يجعله نيوبروتالياً:

• لوحة ألوان من الأسود والأبيض والأصفر الزاهي
• طباعة جريئة وممتلئة
• حدود سميكة على كل بطاقة وزر
• ظلال قاسية مُسقَطة تخلق عمقاً
• تخطيطات غير متماثلة بتباعد مقصود

خيارات التصميم:

• قسم hero بعنوان ضخم وزر حث أصفر
• بطاقات منتجات بحدود 4px وظلال 6px
• أزرار تنزاح عند الـ hover
• تباين عالٍ، يستحيل تجاهله

إنه جريء ومرِح ومصمّم ليلفت الأنظار. تلك هي النيوبروتالية.

متى تستخدم البروتالية مقابل النيوبروتالية

إذاً أيّهما ينبغي أن تختار؟ يعتمد ذلك على أهدافك.

استخدم البروتالية حين:

1. المحتوى هو كل شيء

المدونات، والمواقع الإخبارية، والتوثيق — إن كان المحتوى هو كل الهدف، فإن البروتالية تُبقي التركيز عليه.

2. تريد أقصى قابلية للوصول

HTML الافتراضي قابل للوصول إلى حد مذهل. وCSS البروتالية في حده الأدنى يعني أشياء أقل تتعطّل مع قارئات الشاشة.

3. تريد أن تدلي بموقف

البروتالية مواجِهة. إن كانت علامتك مناهِضة للمؤسساتية، أو تقوم على مبدأ «اصنعها بنفسك»، أو خشنة عن قصد، فإن البروتالية تناسبها.

4. الأداء حاسم

CSS في حده الأدنى = أزمنة تحميل سريعة. والمواقع البروتالية غالباً أقل من 100KB.

استخدم النيوبروتالية حين:

1. تريد أن تلفت الأنظار

الشركات الناشئة، والوكالات، ومعارض الأعمال الإبداعية — إن احتجت أن تكون راسخاً في الذاكرة، فالنيوبروتالية تفي بالغرض.

2. لعلامتك شخصية

النيوبروتالية تعمل مع العلامات الجريئة أو المرِحة أو الواثقة أو المتمردة.

3. تبني منتجاً

لوحات تحكم SaaS، وصفحات هبوط، وتجارة إلكترونية — تخلق النيوبروتالية تراتُباً بصرياً مع بقائها فريدة.

4. تريد جمالية عصرية

النيوبروتالية تبدو عصرية. إنها رائجة في 2026 لسبب وجيه.

هل يمكنك المزج بينهما؟

بالتأكيد. بعض أفضل التصاميم يستعير من الاثنين معاً.

مثال على نهج هجين:

• استخدم فلسفة «المحتوى أولاً» من البروتالية
• أضِف الطباعة والألوان الجريئة من النيوبروتالية
• أبقِ التخطيطات بسيطة (بروتالي) لكن أضِف حدوداً/ظلالاً استراتيجية (نيوبروتالي)
• ابقَ في حدود دنيا من الحركات (بروتالي) لكن أضِف حالات hover (نيوبروتالي)

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

أخطاء شائعة

الخطأ رقم 1: تسمية كل شيء «بروتالياً»

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

الخطأ رقم 2: جعل النيوبروتالية «قبيحة عن قصد»

النيوبروتالية جريئة، لا معطوبة. وينبغي أن تظل فيها تراتُبية وقابلية قراءة وقابلية استخدام.

الخطأ رقم 3: المبالغة في البروتالية

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

الخطأ رقم 4: التقصير في النيوبروتالية

إن أضفت حداً واحداً وسمّيته نيوبروتالياً، فلن ينجح ذلك. التزم بالجمالية — حدود سميكة، ألوان جريئة، ظلال قاسية.

أفكار ختامية

البروتالية والنيوبروتالية ليستا الشيء نفسه. تجمعهما روح متمردة، لكن تنفيذهما عالمان متباعدان.

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

النيوبروتالية تضخّم كل شيء. إنها جريئة وملوّنة وواثقة. وتتبنّى الزخرفة ما دامت مقصودة.

لكلٍّ منهما مكانه. البروتالية مثالية للمشاريع المركّزة على المحتوى التي تحتاج إلى وضوح وأداء. والنيوبروتالية مثالية للعلامات التي تحتاج أن تلفت الأنظار وتُحدث أثراً.

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

الآن تعرف الفرق. استخدمه بحكمة. 🚀

تريد بناء واجهات نيوبروتالية؟ ألقِ نظرة على Neobrutalism — مكتبة واجهات مستخدم كاملة بُنيت لتصاميم جريئة وراسخة في الذاكرة. مكوّنات وبلوكات وقوالب تتبنّى الجمالية النيوبروتالية دون التضحية بقابلية الاستخدام.