يا جماعة الخير، السلام عليكم ورحمة الله وبركاته. معكم أخوكم أبو عمر.
قبل كم سنة، كنت شغال على مشروع كبير شوي، تطبيق مالي معقد. الفريق كان موزع بين مصممين ومطورين، وكل واحد فينا “فنان” على طريقته. المصمم الأول بحب اللون الأزرق السماوي، والثاني بميل للأزرق النيلي. المطور الأمامي (Frontend) الأول بحب يعمل الحواف دائرية بـ 4 بكسل، والثاني بقولك لا، 8 بكسل بتعطي “إحساس مودرن” أكثر. والنتيجة؟
النتيجة كانت كارثة فنية بكل معنى الكلمة. كان عنا في التطبيق حوالي 15 درجة مختلفة من اللون الأزرق، و7 أنواع أزرار أساسية، وكل واحد بتصرف بشكل مختلف لما تمرر الماوس فوقه. المستخدم لو فتح صفحتين جنب بعض، بفكر حاله فاتح تطبيقين مختلفين. صرت أمزح مع الشباب وأقولهم: “يا زلمة، هاد التطبيق مش تطبيق، هاد معرض فني للفوضى الخلاقة!”.
في اجتماع من الاجتماعات، وقف مدير المنتج وهو ماسك راسه وقال: “يا جماعة، شكلنا ضايعين، والهوية البصرية تبعتنا صارت مثل سلطة الفواكه، كل قطعة شكل ولون”. يومها، قررنا إنو بكفي. لازم نلاقي حل جذري. ومن هنا بدأت رحلتي الحقيقية مع ما يسمى بـ “نظام التصميم” أو الـ Design System، المفهوم اللي أنقذنا من الغرق في بحر التضارب واللامنطقية.
ما هو “نظام التصميم”؟ ليس مجرد دليل ألوان!
لما تسمع مصطلح “نظام تصميم”، ممكن يخطر ببالك ملف PDF فيه كم لون وكم خط. لكن الحقيقة أعمق من هيك بكثير. نظام التصميم هو “المصدر الوحيد للحقيقة” (Single Source of Truth) لكل ما يتعلق بواجهة وتجربة المستخدم في منتجك.
تخيله مثل صندوق قطع “ليغو” (LEGO) عملاق ومُنظم. بدل ما كل واحد يبني قطعة من الصفر على كيفه، كل الفريق عنده نفس القطع الأساسية (أزرار، حقول إدخال، بطاقات، قوائم) اللي بتركب على بعضها بشكل مثالي. النظام لا يحدد فقط “شكل” القطعة، بل يحدد “كيفية استخدامها” وقواعد تركيبها مع القطع الأخرى.
إذًا، هو ليس مجرد دليل أسلوب (Style Guide)، بل هو منظومة متكاملة تشمل:
- مبادئ وقيم: الفلسفة التي تحكم قراراتنا التصميمية.
- أصول بصرية: الألوان، الخطوط، الأيقونات، المسافات.
- مكتبة مكونات (Component Library): قطع برمجية جاهزة للاستخدام (أزرار، نماذج، إلخ).
- إرشادات وقواعد: كيفية استخدام كل ما سبق لتحقيق تجربة مستخدم متناغمة.
لماذا الفوضى؟ المشكلة قبل وجود النظام
قبل ما نتبنى نظام تصميم، كانت حياتنا عبارة عن سلسلة من المشاكل المتكررة اللي بتستنزف الوقت والجهد:
- انعدام التناسق: كل شاشة الها روحها الخاصة، وهذا يضر بتجربة المستخدم ويضعف ثقته بالمنتج.
- إهدار الوقت: المصممون يعيدون تصميم نفس الزر في كل مرة، والمطورون يعيدون برمجته من الصفر. “إعادة اختراع العجلة” كانت رياضتنا اليومية.
- صعوبة التوسع: لما كنا نضيف ميزة جديدة، كانت بتصير معركة لتحديد شكلها وألوانها. ولما ينضم مطور أو مصمم جديد للفريق، كان يحتاج شهور ليفهم “الذوق العام” الغامض للمشروع.
- فجوة بين التصميم والتطوير: المصمم يسلم تصميم جميل، لكن المطور يطبقه بشكل مختلف قليلًا بسبب عدم وجود معايير واضحة. هذه الفجوة كانت مصدرًا لا ينتهي للنقاشات والجدالات.
باختصار، كنا نبذل 80% من جهدنا في حل مشاكل شكلية متكررة، و20% فقط في حل مشاكل المستخدم الحقيقية. كان يجب أن ينعكس هذا الهرم.
أركان نظام التصميم المتين
نظام التصميم الفعال مش مجرد مجموعة مكونات، هو بناء متكامل له أركان أساسية. في فريقنا، قسمناه كالتالي:
1. الأساسيات (Foundations)
هذه هي الـ DNA الخاص بهويتنا البصرية. هي القرارات الأولية التي سيبنى عليها كل شيء آخر.
- الألوان (Colors): حددنا لوحة ألوان واضحة: لون أساسي (Primary)، ثانوي (Secondary)، ألوان للحالات (Success, Error, Warning)، ودرجات من الرمادي للمحتوى. كل لون أخذ اسمًا متغيرًا في الكود.
- الخطوط (Typography): اخترنا عائلة خطوط واحدة، وحددنا سلمًا هرميًا واضحًا للأحجام والأوزان (مثلاً: عنوان H1 حجمه 32px، والنص العادي 16px).
- المسافات (Spacing): اعتمدنا وحدة أساسية للمسافات (مثلاً 8px) وكل الهوامش والحشوات (margins & paddings) صارت من مضاعفاتها (8, 16, 24, 32px). هذا خلق تناغمًا بصريًا لا شعوريًا في كل الشاشات.
- الأيقونات (Iconography): اعتمدنا مكتبة أيقونات واحدة بأسلوب موحد (مثلاً: كلها خطية وبسماكة 2px).
2. مكتبة المكونات (Component Library)
هذا هو قلب النظام النابض. هنا حولنا الأساسيات إلى وحدات بناء قابلة لإعادة الاستخدام. بدأنا بالأصغر (الذرات) ثم الأكبر.
- المكونات البسيطة (Atoms): مثل الأزرار، حقول الإدخال، الملصقات (Labels). لكل مكون حددنا حالاته المختلفة: (Default, Hover, Focused, Disabled, Loading).
- المكونات المركبة (Molecules): دمجنا المكونات البسيطة معًا. مثلاً، حقل البحث هو عبارة عن (حقل إدخال + أيقونة بحث + زر).
- المكونات المعقدة (Organisms): تراكيب أكبر مثل شريط التنقل (Navbar)، أو بطاقة المنتج (Product Card) التي تحتوي على صورة وعنوان وسعر وزر.
أهم شيء هنا هو التوثيق. كل مكون صار له صفحة خاصة في نظامنا الداخلي تشرح ما هو، متى يستخدم، ومتى لا يستخدم، مع أمثلة حية وكود جاهز للنسخ واللصق.
3. الأنماط والإرشادات (Patterns & Guidelines)
هنا نضع القواعد التي تحكم كيفية استخدام المكونات معًا لحل مشاكل متكررة.
- أنماط النماذج (Form Patterns): كيف يجب أن تبدو نماذج تسجيل الدخول، وكيف نعرض رسائل الخطأ.
- إرشادات الوصولية (Accessibility): وضعنا قواعد لضمان أن منتجنا قابل للاستخدام من قبل الجميع، بما في ذلك ذوي الاحتياجات الخاصة (مثل نسب التباين الكافية للألوان ودعم قارئات الشاشة).
- الصوت والنبرة (Tone of Voice): حتى النصوص والرسائل التي تظهر للمستخدم يجب أن تكون متناغمة. هل هي رسمية؟ ودودة؟ مرحة؟
كيف بنينا أول نظام تصميم: رحلة عملية
الكلام النظري جميل، لكن كيف طبقنا هذا على أرض الواقع؟
- مرحلة الجرد (The Audit): قمنا بعمل “جرد” لكل واجهات التطبيق. أخذنا لقطات شاشة لكل الأزرار، النماذج، العناوين، وجمعناها في ملف واحد. كانت “حائط العار” الخاص بنا، لكنها كانت ضرورية لنرى حجم الفوضى التي نعيش فيها.
- تحديد اللغة المشتركة: جلس المصممون والمطورون معًا. اتفقنا على تسميات موحدة. لم يعد هناك “الزر الأزرق الكبير”، بل أصبح اسمه
Button--primary-large. هذه اللغة المشتركة أزالت الكثير من سوء الفهم. - البناء من الأسفل للأعلى: بدأنا بالأساسيات. أول شيء فعلناه تقنيًا هو تعريف كل متغيرات التصميم كـ CSS Custom Properties في ملف مركزي. هذا كان حجر الزاوية.
/* variables.css */
:root {
/* Colors */
--color-primary-500: #3B82F6;
--color-neutral-900: #171717;
--color-success-500: #22C55E;
/* Fonts */
--font-family-base: 'Cairo', sans-serif;
--font-size-md: 16px;
--font-weight-bold: 700;
/* Spacing */
--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 */
/* Borders */
--border-radius-md: 6px;
}بعدها، أصبح بناء المكونات أسهل بكثير. مثلاً، مكون الزر أصبح يعتمد بالكامل على هذه المتغيرات:
/* button.css */
.btn {
font-family: var(--font-family-base);
font-size: var(--font-size-md);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-md);
border: 1px solid transparent;
cursor: pointer;
}
.btn-primary {
background-color: var(--color-primary-500);
color: white;
}
.btn-primary:hover {
background-color: #some-darker-blue; /* Should also be a variable */
}4. التوثيق باستخدام Storybook: استخدمنا أداة اسمها Storybook. هذه الأداة سمحت لنا ببناء كل مكون بشكل معزول وتوثيقه بشكل تفاعلي. أصبح بإمكان أي مطور أن يرى كل المكونات وحالاتها المختلفة ويتفاعل معها ويحصل على الكود الخاص بها مباشرة.
نصائح من قلب المعركة
من خلال هذه التجربة، تعلمت بعض الدروس التي أود مشاركتها معكم:
- ابدأ صغيرًا: لا تحاول بناء نظام تصميم كامل من اليوم الأول. ابدأ بالأشياء التي تسبب لك أكبر قدر من الألم، مثل الأزرار والألوان. ثم توسع تدريجيًا.
- نظام التصميم هو مُنتَج، وليس مشروعًا: المشروع له بداية ونهاية. أما نظام التصميم فهو منتج حي يتطور وينمو مع منتجك الأساسي. يجب أن يكون له فريق مسؤول عنه ويقوم بتحديثه باستمرار.
- اجعله المصدر الوحيد للحقيقة: يجب أن يلتزم الجميع باستخدامه. القاعدة بسيطة: “إذا لم يكن المكون موجودًا في نظام التصميم، فهو غير موجود على الإطلاق”. هذا يفرض على الجميع المساهمة فيه وتحسينه.
- التعاون هو المفتاح: نظام التصميم ليس مسؤولية المصممين فقط أو المطورين فقط. هو نتاج تعاون وثيق بين كل الأطراف، بما في ذلك مدراء المنتج وكتّاب المحتوى.
الخلاصة: من الفوضى إلى الإبداع المنظم 🧭
قد يعتقد البعض أن نظام التصميم يقتل الإبداع ويحول العمل إلى مجرد تجميع قطع. لكن تجربتي تقول العكس تمامًا. عندما تخلصنا من النقاشات التافهة حول درجة اللون الأزرق وحجم حواف الزر، تفرغ عقلنا كمصممين ومطورين لحل المشاكل الأكبر والأكثر أهمية: كيف نجعل تجربة المستخدم أسهل؟ كيف نبني ميزة مبتكرة فعلًا؟
نظام التصميم لم يكن قيدًا، بل كان أداة تحرير. حررنا من الفوضى، وسرّع من وتيرة عملنا، ورفع من جودة منتجنا بشكل لا يصدق. أصبحنا نبني الميزات الجديدة في نصف الوقت، وبجودة وتناغم بصري أعلى بكثير.
نصيحتي الأخيرة لك: لا تنظر إلى نظام التصميم على أنه رفاهية، بل هو استثمار أساسي في منتجك وفريقك. هو البوصلة التي توجه سفينة منتجك في بحر التطوير المتلاطم لترسو بأمان على شاطئ النجاح. ابدأ اليوم، ولو بخطوة صغيرة، وستشكرني لاحقًا.
ودمتم بخير.
