تابعني على
لا بد أنك سمعت عن Design System وعن ميزاته سابقاً، ولكن ما هو بشكل دقيق؟ وكيف يتم بناءه؟ وما هي فوائده بالنسبة لي كمصمم ضمن المشروع؟
تخيل أن تبدأ العمل على التصميم النهائي لمشروع تقني جديد وذلك بعد أن انتهيت من مرحلة البحث ووضع المخططات وغيرها من المراحل، سوف تحدد الألوان المستخدمة وتبدأ في إنشاء العناصر والمكونات واحد تلو الآخر حتى يصبح لديك في النهاية مجموعة من الصفحات التي تشكل واجهة الاستخدام المنشودة.
ولكن بعد فترة سوف يصبح الموضوع أكبر مع ازدياد عدد الصفحات والميزات، ثم سوف تجد مصمم جديد ينضم إليك لمساعدتك في العمل بالإضافة لحصولك على مجموعة ملاحظات للقيام ببعض التعديلات، عندها ستكون الأمور داخل التصميم أصبحت عشوائية بالتأكيد وسوف تصبح الكثير من الصفحات غير متسقة، هذا عدا عن التصاميم المختلفة تماماً والتي من الممكن أن يقوم بإضافتها المصمم الجديد.
هنا يمكننا القول بكل ثقة أن الأمور خرجت عن السيطرة داخل التصميم وأنك تحتاج لحل جذري، لذلك عليك استخدام نظام التصميم Design System والذي بالتأكيد سمعتني سابقاً اتكلم عنه، وفي هذه المقال سوف أقدم لك كل ما تحتاج معرفته عنه وكيف نقوم ببنائه.
هو عبارة عن مكتبة من الملفات والوثائق والأكواد التي توصّف جميع التفاصيل التي تتعلق بمكونات التصاميم بشكل كامل ودقيق، مثل الألوان و التايبوغرافي والشبكات والمكونات وأنماط التصميم، هدف هذه المكتبة هو مساعدة المصممين والمطورين الذين يعملون على مشروع من إنجاز العمل المطلوب منهم بشكل متناسق وسهل وبدون أخطاء وفق متطلبات العمل.
قد تجد أن التعريف الخاص بنظام التصميم Design System عام أو غير واضح بشكل كافي، ولكن دعنا نفهم تفاصيل نظام التصميم بشكل أكبر عندها سوف تستطيع فهم أهمية استخدامك له في تصاميمك أثناء تنفيذ المشاريع.
نظم التصميم قد تختلف في مكوناتها بحسب الهدف الأساسي من إنشائها وطبيعة المشروع نفسه، ولكنها في معظم المشاريع التقنية غالباً ما سوف تحتوي هذه المكونات:
والمقصود هنا الدليل البصري من الألوان والتايبوغرافي والشبكات Grid، بالإضافة لكل الجزئيات الأساسية التي يمكن أن يتم إضافتها وتكون مهمة للمصممين والمطورين من أجل ضبط التصاميم بنفس النسق على المستوى الأولي، مثل نظام المسافات المستخدم وقيم الظلال ومكتبات الايقونات وغيرها.
وهنا يمكن الاعتماد على دليل استخدام الهوية البصرية في حال وجوده كمرجع، حيث سيكون مساعد بشكل كبير جداً لبناء هذه العناصر، بهذا الشكل سوف تضمن اتساق نظام التصميم مع الهوية البصرية للمشروع.
تعتبر Component Library هي الجزء الأكبر من نظام التصميم فهي تحتوي على جميع المكونات المختلفة التي سوف يتم استخدامها ضمن تصميم واجهات الاستخدام مثل الأزرار والقوائم المنسدلة وغيرها من المكونات.
يجب أن تكون هذه المكونات قابلة للاستخدام بشكل مباشر ضمن تطبيقات التصميم ويجب أن تحتوي على تفاصيل وشروحات كاملة حول كل مكون، مثل اسم المكون، الوصف، طريق الاستخدام، الحالات المختلفة للمكون، وحتى الاكواد البرمجية التي ستنشئ هذا المكون أيضاً.
الهدف من توفير كل هذه التفاصيل هي مساعدة كل المصممين من فهم هدف كل مكون وكيفية استخدامه بشكل صحيح بمختلف الحالات داخل التصميم، وايضاً مساعدة المطورين بالتعامل مع المكونات واستخدامها ضمن عملهم مما يساهم في تقليل نسبة الخطأ قدر الإمكان.
تختلف مكتبة الأنماط Pattern Library عن مكتبة المكونات بكونها لا تقدم شروحات تفصيلية عن مكونات فردية، وإنما هي جزئية توضح كيفية استخدام مجموعة مختلفة من المكونات مع بعضها البعض من أجل تكوين عناصر أكبر ضمن التصميم مثل الهيدر والفوتر وغيره.
الآن بعد أن أصبح لدينا فهم حول مكونات نظام التصميم المختلفة سوف نستطيع بشكل أفضل فهم الميزات التي يقدمها نظام التصميم للشركات والفرق التقنية التي تعتمد على نظام التصميم ضمن عملها على أي مشروع.
هناك الكثير من الميزات ولكن أهمها هو:
يمكننا القول من تجربتي الشخصية ومن خلال عملي أن عملية إنشاء نظام تصميم عملية طويلة ومعقدة وتحتاج إلى الكثير من الخبرة، ولكن بحسب كتاب الأسلوب اللين لتحسين تجربة المستخدم هناك طريقتين لبناء نظام التصميم، يعتبر فهمها مساعد جداً لبناء نظام تصميم جيد:
صحيح أن كل المشاريع يجب أن تمتلك نظام تصميم خاص بها حتى تصبح عملية التصميم والتطوير اسهل، ولكن ليس من الضروري أن يكون نظام التصميم المستخدم ضخم ومكتمل قبل البدء بعملية التصميم الفعلية.
لان إنشاء مثل هذا النظام سوف يحتاج إلى الكثير من الوقت وسوف يوفر الكثير من المكونات التي قد لا تكون ضرورية أو مستخدمة داخل المشروع، لذلك في المشاريع الصغيرة والتي تعمل عليها بمفردك يعتبر استخدام طريقة التقطير البطيء أسلوب جيد جداً لتطوير نظام التصميم الذي تعمل عليه.
بحيث تقوم بإنشاء الجزئيات الأساسية فقط من نظام التصميم وتبدأ استخدامه فوراً ثم تقوم بإضافة المكونات التي تحتاجها فقط أثناء عملية التصميم، وبهذا سوف تبني نظام التصميم بشكل متدرج أثناء تقدمك في العمل وبحسب احتياجك فقط، دون هدر وقت طويل عليه في بداية العمل على المشروع.
هذه الطريقة مختلفة تماماً حيث يتم التركيز على بناء نظام التصميم بشكل كامل في بداية العمل قبل البدء بمراحل التصميم الخاصة بواجهات الاستخدام، هذا الأسلوب مناسب ضمن المشاريع الكبيرة والتي يعمل عليها الكثير من المصممين في نفس الوقت، بالإضافة إلى وجود مصممين يمتلكون خبرة جيدة في إنشاء نظم التصميم مسبقاً.
هذه الطريقة جيدة كونها توفر لك نظام تصميم متكامل يمكن لجميع أعضاء الفريق الاعتماد عليه بشكل مباشر، ولكن كما أشرت تعتبر عملية صعبة ومناسبة فقط في حالات محددة وهي المشاريع الكبيرة ذات الميزانية العالية والتي تمتلك أشخاص ذوي خبرة قوية في المجال.
إن كنت جديد كمصمم واجهات استخدام أو كمطور واجهات أمامية قد تجد أن استخدام نظام التصميم والاعتماد عليه ضمن عملك، امر معقد وغير ضروري خصوصاً انه سوف يستهلك منك الكثير من الوقت حتى تنجزه وتعتاد عليه.
ومن تجربتي يمكنني أن أؤكد لك أن اعتماد نظام التصميم واعتباره جزء اساسي من عملك سوف ينقلك لمستوى آخر من الاحتراف في العمل وسوف تصل لمرحلة لاحقاً لا يمكنك استغناء فيها عنه ضمن أي مشروع، لأنك سوف تشعر بمدى أهميته وأيضاً القوة التي يوفرها لك والتي سوف تنعكس على التصاميم التي سوف تقدمها والمرونة التي تملكها أثناء التعديلات والتطوير.
لذلك أنصحك بشدة أن تبدأ بالتعمق بشكل أكبر ضمن نظم التصميم وفهم كيفية إنشائها وكنت قد نشرت مجموعة من الفيديوهات سابقة والتي شرحت فيها طريقة إنشاء نظم تصميم بشكل عملي عبر قناتي في اليوتيوب أنصح بشدة أن تقوم بمتابعتها كبداية لفهم نظم التصميم بشكل جيد.
متخصص في تصميم واجهات الاستخدام وتجربة المستخدم، عملت على عشرات مشاريع تصميم التطبيقات والمواقع، وأعمل حالياً كمستشار تصميم تجربة مستخدم ضمن العديد من الشركات التقنية، بالإضافة لعملي كمدير للمنتجات ضمن مشاريع تقنية مختلفة.
إدارة الشركات
تجربة المستخدم
