كانت واجهاتنا تتغير مع كل تحديث للمتصفح: كيف أنقذنا ‘نظام التصميم’ من جحيم الفوضى البصرية؟

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

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

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

ما هو ‘نظام التصميم’ (Design System) وليش هو مش مجرد ‘دليل ألوان’؟

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

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

• الأسس (Foundations): المبادئ التوجيهية العليا، الألوان، الخطوط، المسافات، الأيقونات، الظلال. هذه هي روح التصميم.
• المكونات (Components): قطع الـ “ليجو” البرمجية القابلة لإعادة الاستخدام. أزرار، حقول إدخال، بطاقات، قوائم… كل قطعة مصممة ومبرمجة وموثقة.
• الأنماط (Patterns): حلول مجربة لمشاكل متكررة. كيف تبدو عملية تسجيل الدخول؟ كيف نعرض رسائل الخطأ؟ هذه هي وصفات بناء الواجهات.
• الأدوات والتوثيق (Tools and Documentation): الشرح الوافي لكل ما سبق، وكيفية استخدامه. بدون توثيق جيد، يبقى نظام التصميم مجرد مشروع جميل على الورق.

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

جحيم ما قبل نظام التصميم: قصة الفوضى البصرية

قبل أن نتبنى هذا الفكر، كانت حياتنا عبارة عن فوضى مستمرة. كانت أعراضها واضحة ومؤلمة:

مشكلة “الزر الأزرق” المتعدد

كان لدينا ما لا يقل عن 6 درجات مختلفة من اللون الأزرق للزر الرئيسي (Primary Button). كل مطور جديد، أو حتى نفس المطور في يوم مختلف، كان يختار درجة “الأزرق” التي تبدو مناسبة له من عجلة الألوان. والنتيجة؟ تطبيق يبدو وكأنه تجميعة من عدة تطبيقات مختلفة.

نصيحة من أبو عمر: افتح تطبيقك الآن وابحث عن مكون واحد، مثل الأزرار. هل كلها متطابقة 100% في الحجم واللون وشكل الحواف والظل؟ إذا كان الجواب “لا”، فأنت تعاني من هذه المشكلة.

“على جهازي شغال!” – كابوس المتصفحات

هذه الجملة كانت الكابوس الأكبر. كان المطور يكتب كود CSS ليعمل بشكل مثالي على متصفحه، ثم نكتشف أنه “مكسور” على متصفح آخر أو على نظام تشغيل مختلف. كنا نقضي ساعات طويلة في كتابة “Hacks” و “Fixes” خاصة بكل متصفح، مما جعل الكود معقدًا وصعب الصيانة.

الهدر في الوقت والجهد

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

بناء نظام التصميم الخاص بنا: من الفكرة إلى التنفيذ

بعد حادثة “تحديث المتصفح”، عقدنا العزم على التغيير. لم يكن الطريق سهلاً، ولكنه كان يستحق كل خطوة. إليكم خريطة الطريق التي اتبعناها:

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

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

الخطوة الثانية: وضع المبادئ والأسس (The Foundation)

قبل بناء أي مكون، قمنا بتعريف اللبنات الأساسية. اتفقنا على لوحة ألوان محددة (لون أساسي، ثانوي، ألوان للنجاح والخطأ والتنبيه)، ومقاييس واضحة للخطوط (H1, H2, Body, Caption)، ونظام موحد للمسافات (Spacing System) مبني على مضاعفات رقم أساسي (مثل 8px).

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

:root {
  --color-primary: #007bff;
  --font-size-base: 16px;
  --spacing-unit: 8px;
}

.button-primary {
  background-color: var(--color-primary);
  padding: var(--spacing-unit);
}

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

هنا يبدأ المرح الحقيقي للمبرمجين. بدأنا بأهم وأكثر المكونات تكراراً: الزر (Button). قمنا ببناء مكون واحد، قابل لإعادة الاستخدام، ويقبل خصائص (Props) لتغيير شكله وسلوكه.

مثلاً، بدلًا من وجود .button-primary و .button-secondary و .button-large ككلاسات منفصلة، بنينا مكوناً واحداً يمكن استخدامه هكذا (كمثال في React):

<Button variant="primary" size="large">
  اضغط هنا
</Button>

<Button variant="secondary" size="small" onClick={handleCancel}>
  إلغاء
</Button>

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

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

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

• ما هو هذا المكون؟
• متى يجب استخدامه (ومتى لا يجب)؟
• ما هي الخصائص (Props) التي يقبلها؟
• أمثلة حية على استخدامه.

أصبح هذا التوثيق هو المرجع الأول لأي مطور أو مصمم جديد ينضم للفريق.

النتائج المبهرة: كيف تغير كل شيء؟

التحول كان جذرياً. لم نعد نخاف من تحديثات المتصفحات!

• سرعة خرافية في التطوير: بناء صفحة جديدة أصبح أقرب لتركيب قطع الليجو. نسحب المكونات الجاهزة ونركبها معاً.
• اتساق بصري يريح العين: أصبح التطبيق متناغماً بصرياً، مما زاد من ثقة المستخدم وحسّن من تجربته بشكل كبير.
• تواصل أفضل بين الفرق: أصبح لدى المصممين والمطورين لغة مشتركة. بدلًا من “اجعل الزر أكبر قليلاً”، أصبحت المحادثة “لنستخدم مكون الزر بحجم large“.
• صيانة وتحديثات أسهل: هل قررنا تغيير لون علامتنا التجارية؟ نغير قيمة --color-primary في مكان واحد، وفجأة يتغير لون كل الأزرار والروابط والعناصر في التطبيق كله. سحر!

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

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

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

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