كانت واجهاتنا خليطاً فوضوياً: كيف أنقذنا ‘نظام التصميم’ من جحيم عدم الاتساق؟

يا جماعة الخير، السلام عليكم ورحمة الله.

اسمحوا لي اليوم أحكي لكم قصة صارت معي ومع فريقي قبل كم سنة. كنا شغالين على منتج كبير، منتج طموح، وفيه ميزات كثيرة. الفريق كان مكون من عدة مطورين فرونت-إند (Frontend) ومجموعة مصممين. كل واحد فينا كان “فنان” وشاطر بشغله، بس المشكلة إنه كل فنان كان إله بصمته الخاصة.

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

كانت الواجهات تبعتنا زي سوق الخضرة يوم الجمعة، كل إشي موجود بس ما في إشي بشبه الثاني. كل مطور جديد بنضم للفريق كان لازم “يخترع العجلة من جديد”، يبني مكوناته الخاصة، والمصممين كانوا بيعانوا عشان يوصلوا فكرتهم للمطورين. كان الوضع أشبه بالجحيم… لحد ما قررنا نلاقي حل جذري. والحل كان اسمه: نظام التصميم (Design System).

ما هو “نظام التصميم” (Design System)؟ وليش هو مهم؟

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

هو عبارة عن مكتبة متكاملة تحتوي على كل شيء ممكن تحتاجه لبناء واجهة مستخدم متناسقة وجميلة. يتكون عادةً من:

• مبادئ التصميم (Design Principles): الفلسفة اللي بتحكم قراراتنا التصميمية. مثلاً: “البساطة أولاً”، “الوضوح قبل الجمال”.
• الأساسيات (Foundations): حجر الأساس لكل شيء. الألوان المعتمدة، الخطوط وأحجامها، نظام المسافات والهوامش، الأيقونات.
• المكونات (Components): هاي هي القطع الجاهزة للبناء. تبدأ من “الذرات” الصغيرة مثل الأزرار (Buttons)، حقول الإدخال (Inputs)، وصولاً إلى “الجزيئات” و”الكائنات” الأكثر تعقيداً مثل بطاقة منتج (Product Card) أو شريط التنقل (Navbar).
• الأنماط (Patterns): حلول مجربة لمشاكل متكررة في تجربة المستخدم. مثلاً، كيف لازم يكون شكل وتصرف عملية تسجيل الدخول؟ كيف نعرض رسائل الخطأ للمستخدم؟
• إرشادات وقواعد (Guidelines): شرح لكيفية استخدام كل مكون، متى تستخدمه، ومتى لا تستخدمه. بالإضافة لإرشادات مهمة زي سهولة الوصول (Accessibility).

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

الفوضى الخلاقة… أو الكارثية: حالنا قبل نظام التصميم

قبل ما نبني نظام تصميمنا، كانت حياتنا عبارة عن سلسلة من المشاكل المتكررة اللي بتستنزف وقتنا وطاقتنا. أبرز هاي المشاكل كانت:

• ضياع الوقت والجهد: كل مطور كان بقضي ساعات وهو يبني مكون “جديد” هو بالأصل موجود في صفحة ثانية بس بشكل مختلف. كنا بنعيد اختراع الزر، حقل الإدخال، والقائمة المنسدلة في كل مرة.
• فجوة التواصل: كان المصمم يرسم إشي على برامج التصميم زي Figma أو Sketch، والمطور يبني إشي ثاني خالص. ليش؟ لأنه ما في لغة مشتركة بينهم. المصمم بستخدم مصطلحات زي “ظل خفيف” والمطور محتاج قيم CSS دقيقة زي box-shadow: 0 2px 4px rgba(0,0,0,0.1);.
• تجربة مستخدم مشتتة: المستخدم كان يتنقل بين صفحات التطبيق ويحس إنه كل صفحة من تطبيق مختلف. هذا بخلق شعور بعدم الاحترافية وبقلل من ثقة المستخدم بالمنتج.
• صعوبة الصيانة والتطوير: تخيل لو قررنا نغير اللون الرئيسي للعلامة التجارية. كان لازم نمر على مئات الملفات ونغير كود اللون يدوياً في كل مكان، مع احتمالية كبيرة ننسى أماكن ونعمل مشاكل جديدة. شغلانة ما بتخلص!

رحلة البناء: كيف بنينا نظام تصميمنا خطوة بخطوة؟

القرار اتاخد، ولازم نبدأ. الرحلة ما كانت سهلة، بس كانت منظمة ومقسمة لمراحل واضحة.

الخطوة الأولى: الجرد والتدقيق (The UI Audit)

أول إشي عملناه هو “الجرد”. قعدنا أنا وكم شب من الفريق، وفتحنا المشروع تبعنا وصرنا نأخذ لقطات شاشة (Screenshots) لكل مكون من مكونات الواجهة. كل الأزرار، كل حقول الإدخال، كل القوائم، كل البطاقات، كل شيء حرفياً.

جمعنا كل الصور هاي على لوح رقمي واحد (استخدمنا وقتها أداة Miro). الصدمة كانت كبيرة! زي ما حكيتلكم، لقينا 17 درجة لون أزرق مختلف مستخدمة في المشروع، وأكثر من 10 أشكال مختلفة للزر الواحد. كانت لحظة الحقيقة اللي خلت كل الفريق يقتنع بأهمية اللي رح نعمله.

الخطوة الثانية: وضع المبادئ والأساسيات (Defining Principles & Foundations)

بعد ما عرفنا حجم المشكلة، بدأنا بوضع حجر الأساس. اجتمع فريق التصميم مع فريق التطوير وقررنا الأساسيات:

1. لوحة الألوان (Color Palette): حددنا لون أساسي (Primary)، لون ثانوي (Secondary)، ألوان للنجاح والخطأ والتنبيه، ودرجات مختلفة من اللون الرمادي للنصوص والخلفيات.
2. الطباعة (Typography): اخترنا نوع خط واحد أو اثنين بالكثير، وحددنا سلم واضح لأحجام الخطوط (h1, h2, p, small..).
3. نظام المسافات (Spacing System): بدل ما كل مطور يحط هوامش ومسافات على كيفه (e.g., 10px, 12px, 15px)، عملنا نظام موحد مبني على مضاعفات رقم أساسي (مثلاً 8px). فصارت المسافات عنا 4px, 8px, 16px, 24px, 32px… وهكذا.

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

:root {
  /* ============================
     Colors Palette
     ============================ */
  --color-primary: #007bff;
  --color-primary-dark: #0056b3;
  --color-secondary: #6c757d;
  --color-text: #212529;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-background: #ffffff;

  /* ============================
     Spacing System (Base: 8px)
     ============================ */
  --space-1x: 8px;
  --space-2x: 16px;
  --space-3x: 24px;
  --space-4x: 32px;
}

/* Example Usage */
.my-button {
  background-color: var(--color-primary);
  padding: var(--space-1x) var(--space-2x);
  color: var(--color-background);
}

الخطوة الثالثة: بناء مكتبة المكونات (Building the Component Library)

هون بدأ الشغل الجدّي والممتع. بدأنا نبني المكونات كمكتبة معزولة عن المشروع الرئيسي. اتبعنا منهجية اسمها “التصميم الذري” (Atomic Design) اللي بتقسم الواجهة لوحدات صغيرة:

• الذرات (Atoms): أصغر شيء لا يمكن تقسيمه، مثل الزر، الأيقونة، حقل الإدخال.
• الجزيئات (Molecules): مجموعة من الذرات مع بعضها لتشكل وحدة وظيفية، مثل حقل بحث (حقل إدخال + أيقونة بحث).
• الكائنات (Organisms): مجموعة من الجزيئات لتكوين قسم كامل من الواجهة، مثل شريط التنقل العلوي (لوغو + قائمة روابط + حقل بحث).

استخدمنا أداة اسمها Storybook. هاي الأداة كانت المنقذ، لأنها بتسمح لنا نبني كل مكون بشكل معزول، ونعرض كل حالاته المختلفة (مثلاً، شكل الزر الأساسي، وشكله لما يكون معطل disabled، وشكله لما نمرر الماوس فوقه hover)، ونوثق كيفية استخدامه.

كمثال، هيك ممكن يكون شكل كود مكون “زر” موحد باستخدام React:

// Button.jsx - A reusable button component

import React from 'react';
import PropTypes from 'prop-types';
import './Button.css'; // Contains styles using CSS variables

const Button = ({ children, variant = 'primary', size = 'medium', disabled = false, onClick }) => {
  // We construct the CSS class names based on props
  const classNames = `btn btn--${variant} btn--${size}`;

  return (
    <button 
      className={classNames} 
      disabled={disabled} 
      onClick={onClick}
    >
      {children}
    </button>
  );
};

Button.propTypes = {
  children: PropTypes.node.isRequired,
  variant: PropTypes.oneOf(['primary', 'secondary', 'danger']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
};

export default Button;

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

الخطوة الرابعة: التوثيق والنشر (Documentation & Adoption)

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

• Do’s and Don’ts: متى تستخدم هذا المكون (أمثلة صحيحة) ومتى لا تستخدمه (أمثلة خاطئة).
• Props/Options: شرح لكل خاصية (prop) ممكن تمررها للمكون وماذا تفعل.
• Accessibility Notes: ملاحظات لضمان أن المكون سهل الاستخدام للجميع، بما في ذلك ذوي الاحتياجات الخاصة.

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

النتائج المبهرة: ثمار نظام التصميم

بعد أشهر من العمل، بدأنا نقطف الثمار. والنتائج كانت أفضل مما توقعنا:

1. سرعة خرافية في التطوير: بناء صفحة جديدة كان يأخذ أياماً، صار يأخذ ساعات. المطور صار يركز على منطق العمل (Business Logic) بدل ما يضيع وقته في تنسيق الواجهات.
2. اتساق كامل: صار المنتج كله يحكي نفس اللغة البصرية. تجربة المستخدم أصبحت سلسة وموحدة واحترافية.
3. تعاون غير مسبوق: المصممون والمطورون صاروا يتكلموا نفس اللغة: لغة المكونات. المصمم يقول “استخدم مكون الـ Card بحجم كبير”، والمطور يعرف بالضبط عن أي مكون يتحدث.
4. صيانة سهلة جداً: لما قررنا نعدل على شكل الأزرار في كل التطبيق، كل اللي عملناه هو تعديل ملف CSS واحد في نظام التصميم. بضغطة زر، كل الأزرار في مئات الصفحات تحدثت تلقائياً. يا الله شو كان شعور رائع!

خلاصة الحكي ونصيحة من أبو عمر 💡

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

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

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

الله يوفقكم جميعاً.