كانت واجهاتنا خليطاً من الفوضى: كيف أنقذنا ‘نظام التصميم’ (Design System) من جحيم التناقض البصري؟

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

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

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

ما هو ‘نظام التصميم’ (Design System) يا أبو عمر؟

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

نظام التصميم هو ببساطة “صندوق الليغو الموحّد” للمصممين والمطورين. هو مش مجرد دليل ألوان أو مجموعة أيقونات، لا يا عمي، هو أعمق من هيك بكثير. هو مصدر الحقيقة الأوحد (Single Source of Truth) لكل ما يتعلق بواجهة المستخدم وتجربة المستخدم. هو عبارة عن مكتبة حية ومتكاملة من المكونات والقواعد والإرشادات اللي بتسمح للجميع يبني منتج متناسق وجميل وبسرعة خيالية.

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

من شو بتكون هالنظام؟ (مكونات نظام التصاييم)

أي نظام تصميم محترم بتكون من عدة طبقات، كل طبقة بتبني على اللي قبلها. خلينا نفصصهم وحدة وحدة:

1. أساسيات الهوية البصرية (Design Tokens)

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

• الألوان (Colors): اللون الأساسي (Primary)، الثانوي (Secondary)، ألوان التنبيهات (Error, Success, Warning)، وألوان النصوص والخلفيات.
• الخطوط (Typography): عائلة الخط، الأحجام المختلفة للعناوين والنصوص (h1, h2, p)، سماكة الخط، وارتفاع الأسطر.
• المسافات (Spacing): نظام موحد للمسافات والفراغات (e.g., 4px, 8px, 16px, 32px). هذا بخلي التصميم “يتنفس” وبيمنع العشوائية في توزيع العناصر.
• الأيقونات (Icons): مجموعة أيقونات موحدة من نفس العائلة والأسلوب.

نصيحة من أبو عمر: استخدموا متغيرات CSS (CSS Variables) لتعريف هاي الأساسيات. حياتكم رح تصير أسهل بمراحل.

/* مثال بسيط لتعريف الـ Design Tokens في ملف CSS */
:root {
  /* -- الألوان -- */
  --color-primary: #0066f2;
  --color-primary-hover: #0052cc;
  --color-text-primary: #1a1a1a;
  --color-background: #ffffff;
  --color-danger: #e60000;

  /* -- المسافات -- */
  --space-unit: 8px;
  --space-xs: var(--space-unit);       /* 8px */
  --space-sm: calc(var(--space-unit) * 2); /* 16px */
  --space-md: calc(var(--space-unit) * 3); /* 24px */
  --space-lg: calc(var(--space-unit) * 4); /* 32px */

  /* -- الخطوط -- */
  --font-family-main: 'Tajawal', sans-serif;
  --font-size-body: 16px;
  --font-size-h1: 32px;
}

2. المكونات (Components)

بعد ما صار عنا الذرات (Tokens)، بنبدأ نجمعها لنبني الجزيئات، أو “المكونات”. هاي هي قطع الليغو الجاهزة للاستخدام: الأزرار، حقول الإدخال، البطاقات، القوائم المنسدلة، النوافذ المنبثقة (Modals)، وغيرها.

كل مكون لازم يكون مدروس ومصمم ليتعامل مع كل الحالات الممكنة: الحالة الافتراضية (default)، حالة المرور بالمؤشر (hover)، الحالة النشطة (active)، وحالة التعطيل (disabled).

مثال على مكون “زر” يستخدم الـ Tokens اللي عرفناها:

/* Button Component CSS */
.btn {
  font-family: var(--font-family-main);
  font-size: var(--font-size-body);
  padding: var(--space-xs) var(--space-sm);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-background);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-primary:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

شايفين كيف؟ صرنا نستدعي المتغيرات بدل ما نكتب القيم بشكل مباشر. هالقوة الحقيقية بتكمن هنا.

3. القواعد والإرشادات (Guidelines)

هذا هو العقل المدبر للنظام. وجود المكونات لا يكفي، لازم نعرف “متى” و “كيف” نستخدمها. هاي الإرشادات بتجاوب على أسئلة مثل:

• متى أستخدم الزر الأساسي (Primary) ومتى أستخدم الزر الثانوي (Secondary)؟
• ما هو الحد الأقصى لعدد الأزرار في النافذة المنبثقة؟
• كيف يجب أن تظهر رسائل الخطأ؟
• ما هي إرشادات الوصولية (Accessibility) التي يجب اتباعها؟ (مثلاً، نسبة التباين بين لون النص والخلفية).

4. التوثيق (Documentation)

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

نصيحة عملية: استخدموا أدوات مثل Storybook أو Zeroheight. هاي الأدوات بتسمحلك تعرض المكونات بشكل تفاعلي، وتشوف كل حالاتها، وتنسخ الكود تبعها مباشرة. بتصير حياة المطورين أسهل، وببطل عندهم حجة “ما كنت بعرف”.

طيب، كيف بلّشنا؟ رحلتنا العملية خطوة بخطوة

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

1. الجرد البصري (UI Audit): أول إشي عملناه هو إننا أخذنا لقطات شاشة (screenshots) لكل عنصر في تطبيقنا. حطينا كل الأزرار جنب بعض، وكل حقول الإدخال جنب بعض، وكل البطاقات جنب بعض. الصدمة كانت كبيرة ومحفزة! شفنا بأم أعيننا حجم الفوضى والتناقض.
2. الاتفاق على الأساسيات: جلسنا مع فريق التصميم، وعرضنا عليهم نتائج الجرد. اتفقنا على لوحة ألوان موحدة، نظام خطوط واضح، ومقياس مسافات ثابت. هاي كانت أهم خطوة.
3. البدء صغيراً: ما حاولنا نبني كل إشي مرة واحدة. بلشنا بأهم وأكثر المكونات استخداماً: الزر (Button)، حقل الإدخال (Input)، والأنماط الطباعية (Typography).
4. النشر والتبني: بعد ما جهزت أول دفعة من المكونات، عملنا ورشة عمل صغيرة لكل المطورين. شرحنا الهم الفكرة، ووريناهم كيف يستخدموا المكونات الجديدة من المكتبة المشتركة. الأهم من هيك، خلينا استخدام المكون الجاهز أسهل وأسرع من بناء واحد جديد من الصفر.
5. التطوير المستمر: نظام التصميم هو كائن حي، ينمو ويتطور مع المشروع. كل ما نحتاج مكون جديد، بنضيفه للنظام بعد دراسة وتصميم وتوثيق.

الخلاصة: استثمار يستحق كل قرش ووقت 💡

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

• 🚀 سرعة في التطوير: صار المطور يبني شاشات كاملة في وقت قياسي لأنه بيستخدم مكونات جاهزة وموثوقة.
• 🎨 تناسق بصري تام: ودّعنا الفوضى. التطبيق صار شكله احترافي ومتناغم في كل زاوية.
• 🤝 تعاون أفضل: صار في لغة مشتركة بين المصممين والمطورين، وقلت الاجتماعات والنقاشات اللي ما إلها داعي.
• ♿ تجربة مستخدم أفضل: المستخدم صار يتوقع سلوك معين من العناصر، وهذا زاد من سهولة استخدام التطبيق ورضاه.

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

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