إنشاء نظام التصميم

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

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

الخطوة الأولى: تحديد الحاجة إلى نظام التصميم

• هل نحن بحاجة ماسة إلى نظام التصميم؟
• لماذا نمر بهذه المشكلات؟
• هل لدينا الوقت لذلك؟

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

ربما يكونوا على حق إلى حد ما. ربما يتمسك الفريق بـ Bootstrap فقط لكل مشروع يأتي، ويقومون بتسليم المشروعات بكفاءة ترضي قاعدة العملاء أيضًا.

لذلك متي تكون هناك الحاجة إلى بناء نظام تصميم؟

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

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

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

بالنسبة لأصحاب المصلحة، لابد من الحصول على اتفاق بشأن بناء النظام؛ لأنه سوف يؤخر وقت النهائي لتسليم للمشروع. هذا إذا كان سيعتمد إنشائه على بناء نظام التصميم من أجل مشروع تجاري معين.

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

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

الخطوة الثانية: البدء في بناء قائمة واجهة المستخدم

أول شيء يجب أن تفعله هو التحقق من الحالة الحالية للأصول الخاصة بواجهة المستخدم التي يمكن للفريق الوصول إليها. تبدأ هذه الخطوة بجمع كل الأصول التي يحتاج إليها المصممون وكذلك مطوري front-end. سواء كانت هذه العناصر البصرية موجودة في المنتجات التي يعمل عليها الفريق، أو في مكتبه من نوع ما يشير إليها الفريق عادةً.

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

الجزء الأكبر من العناصر التي يجب النظر فيها تشمل:

• عناصر وأنماط واجهة المستخدم.
• الأيقونات
• التايبوجرافي
• الجرافيك والرسوم التوضيحية
• الشعارات
• صوت ونبرة المحتوى
• الصور الفوتوغرافية ومعرض الصور

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

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

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

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

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

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

الخطوة الثالثة: العرض التقديمي

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

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

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

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

الخطوة الرابعة: تجميع الفريق

تتطلب عملية بناء وتصميم وصيانة نظام التصميم جهودًا مشتركة من مختلف التخصصات والقدرات. سيتطلب من أفراد فريق نظام التصميم العمل على الجوانب المختلفة من النظام؛ للتأكد من معالجة كل التناقضات.

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

فيما يلي أهم المجالات التي يجب ضمها إلى فريق نظام التصميم:

التصميم

المصمم مسؤول عن إنشاء وتحديد العناصر والمكونات البصرية، وكذلك تحديد أنماط واجهة المستخدم المختلفة التي يجب أن توجد في النظام.

تجربة المستخدم

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

برمجة الواجهة الأمامية Front-end

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

إمكانية الوصول

تعد إمكانية الوصول مسألة مهمة لتصميم نظام مناسب يتوافق مع معايير الوصول إلى الويب مثل WCAG. لذلك من الضروري تطبيق ممارسات الوصول المختلفة عبر النظام للأشخاص ذوي الإعاقة وغيرهم.

استراتيجية المحتوى

يعد توصيل الرسائل الواضحة عبر نظام التصميم أحد الأغراض الرئيسية لبنائه. يحدِّد كُتاب المحتوى الصوت والنبرة، و يتأكدون من تقديم محتوى متناغم يتماشى مع أهداف العلامة التجارية.

الإدارة والقيادة

يضمن تنظيم عملية بناء نظام التصميم الكفاءة على طول الطريق. من الضروري التأكد من توافق المنتج النهائي مع احتياجات الجمهور المستهدف. سوف يقرر الأفراد المسؤولون أيضًا أولويات المهام ومميزات النظام.

الخطوة الخامسة: إنشاء لوحة الألوان

الألوان موجودة في كل جزء من أجزاء نظام التصميم بالإضافة إلى المنتجات التي سيتم إنشاؤها باستخدامه. الألوان تساهم بشكل كبير في تحديد الهوية والمظهر والانطباع للنظام.

تساعد الألوان على نقل المشاعر وهي جزء لا يتجزأ من قنوات التواصل التي يعتمد عليها نظام التصميم. كما أن وجود العديد من الألوان المختلفة سواء كانت مكررة أو زائدة عن الحاجة يؤثر على فعالية نقل الرسائل إلى المستخدمين.

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

بعد ذلك يأتي تحديد الألوان المراد إدراجها في النظام، سواء كانت الألوان الأساسية أو الألوان الثانوية.

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

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

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

يحتاج أعضاء الفريق الذين يعملون على "إمكانية الوصول"، للتأكد من أن الألوان الموجودة في النظام تعمل جيدًا و آمنة للاستخدام على الموقع.

هناك طرق مختلفة، لاستكشاف تسمية الألوان، نستخدم الطريقة الواضحة كالتالي:

$ لون أساسي، $ لون ثانوي، $ لون خطر، $ لون نجاح

سيقوم مطوري ال Front-end بتطبيق الألوان الأساسية بالإضافة إلى ألوان الثانوية في كود نظام التصميم باستخدام التسمية المتفق عليها في متغيرات اللون.

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

في النهاية يجب اختبار لوحة الألوان وتوثيقها في إرشادات أنظمة التصميم وتوفيرها للمصممين والمطورين.

الخطوة السادسة: إعداد التايبوجرافي

التايبوجرافي له دور مهم في إنشاء نظام تصميم فعال وهو أحد الأشياء التي يمكن أن تبنى أو تهدم نظام التصميم؛ لأنه جزء لا يتجزأ من المنتج النهائي وتجربة المستخدم الخاصة به.

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

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

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

لا يجب أن يكون typeface الموافق عليه شيئًا مجنونًا مثل الخطوط الزخرفية؛ لأن المستخدمين يألفون أكثر خطوط النظام الشائعة مثل Verdana أو Times New Roman.

لا يزال من الممكن استخدام خطوط الويب المخصصة لإضافة نكهة مميزة للعلامة التجارية إذا تم تخصيصها على نحو مناسب لتجنب حدوث ضعف في الأداء أو في الرؤية.

بعد تحديد typeface يمكن معالجة مقياس الكتابة لتحديد الأحجام المختلفة التي يجب أن تكون موجودة في النظام.

ستعتمد الأحجام إلى حد كبير على نوع الخط المختار. سيتطلب الخط الرفيع حجمًا أكبر للحفاظ على الوضوح.

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

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

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

الخطوة السابعة: تطبيق مكتبة الأيقونات

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

أصبحت الأيقونات عنصرًا أساسيًا في التصميم الحديث؛ لأنها تعمل على تقليل الحمل المعرفي للمستخدمين عن طريق توفير إشارات بصرية واضحة ومعبرة لتوجيه المستخدمين نحو إجراء أو فعل ما من خلال واجهة المستخدم.

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

يجب أن تتبع الأيقونات نمطًا معينًا، مثل أن يتم تحديدها من خلال strokes؛ لتقديم شعور بالتناسق للمستخدمين النهائيين.

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

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

أحد أفضل الطرق التي تتضمن مزيجًا جيدًا من المبادئ المذكورة سابقًا هو تقديم أيقونات بصيغة SVG مضمنة باستخدام مكونات نمطية من الأطر الحديثة مثل React أو Vue.

سيقوم المطورون ببناء المكونات المأخوذة عن ملف تم استيراده بصيغة SVG من ملف SVG المدرج لديه من خلال أداة أداة تحميل SVG؛ لأن المكونات والدعائم مثل SVG سوف تمنح الأيقونات خصائص مدرجة مثل اللون والحجم.

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

في حالة عدم استخدام إطار JavaScript في نظام التصميم، فإن اختيار SVGs المضمنة في عناوين URL للبيانات يمكن أن يكون الخيار الأمثل في هذه الحالة.

بعد كل شيء، لابد من اختبار الأسلوب الذي تم تنفيذه وتقييمه من قبل أعضاء الفريق بأكمله لإنشاء مكتبة الأيقونات التي تتلاءم بشكل جيد مع بيئة نظام التصميم.

الخطوة الثامنة: مكتبة الأنماط

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

ستكون عملية دائمة لإنشاء مجموعة من الأنماط لاستخدامها بشكل ثابت في تصميم واجهات المستخدم. الأنماط هي الأساس الذي يعتمد عليه بناء نظام التصميم؛ لأنها تغلف كل جانب من جوانب نظام التصميم في شكل مكونات قابلة لإعادة الاستخدام.

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

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

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