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

لماذا نظام التصميم؟

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

1. إمكانية إعادة استخدام المكونات أو العناصر الخاصة بالمنتج الرقمي بسهولة مع الاحتفاظ بشكلها الموحّد.
2. تجنّب تغيّر الهوية بسبب تغير فريق التصميم أو التطوير، سواء كان الفريق فريقًا داخليًا أو خارجيًا.
3. تسريع عملية التصميم والتطوير المستقبلية لوجود لغة مشتركة واضحة مستقاة من نظام التصميم يفهمها كل الفريق الذي يعمل على المنتج.
4. سهولة بناء منتجات رقمية جديدة أو متفرّعة بسرعة كبيرة مع الاحتفاظ بنفس الطابع العام والاتساق.
5. ضمان مستوى الجودة بشكل أكبر، وسهولة إجراء عمليات التدقيق الخاصة بها.

ما هو نظام التصميم؟

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

دليل الهوية Brand Style Guide

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

أولاً: الشعار (Logo)، ويدخل ضمنه:

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

ثانيًا: الألوان (Colors)، وتتضمن:

• لوحة الألوان الخاصة بالعلامة التجارية.
• تدرجات الألوان.
• الكود اللوني وفق مختلف الأنظمة اللونية (CMYK, RGB , HEX, PANTONE).

ثالثًا: نوع الخط المستخدم (Typography)، ويتضمن:

• اسم الخط المستخدم
• اسم الخط المستخدم لأي لغات أخرى.
• أوزان الخط المستخدمة للنصوص والعناوين مثل الـ (Bold, Regular, Light).
• المحاذاة.
• المساحات الفارغة بين الأسطر أو العنوان أو الفقرات.

رابعًا: الصور (Images)، ويدخل ضمنها:

• شكل وطبيعة الصور المعبرة عن العلامة التجارية.
• ألوان الصور، كأن تكون بلونين أو بألوان متعددة.

ومما يدخل ضمن الصور أيضًا:

الأنماط والأشكال (Patterns & Shapes)، وتتضمن:

• الأشكال المستخدمة في الهوية.
• الأنماط المتكررة في الخلفيات.
• الأنماط أو الأشكال المستخدمة في الترويسات.

الأيقونات (Iconography)، وتتضمن:

• شكل الأيقونات.
• ألوان الأيقونات.
• أبعاد الأيقونة.
• المساحة الفارغة المحيطة بالأيقونة.

الرسومات بأنواعها (Illustrations)، وتتضمن:

• أسلوب الرسومات.
• حجمها، ومكانها.

خامسًا: التخطيط (Layout)، ويتضمن:

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

سادسًا: الصوت وأسلوب الكتابة (Voice & Writing Style), ويتضمن ذلك:

طبيعة النبرة المستخدمة للتعبير عن العلامة التجارية مثال ذلك: استخدام كلمات سهلة الفهم أو غريبة، استخدام كلمات عامية أو رسمية، وتنعكس طبيعة النبرة المستخدمة أيضًا على أسلوب الكتابة في المطبوعات أو المنشورات المعبرة عن العلامة التجارية.

سابعًا: المؤثرات الصوتية (Sounds)، وتتضمن:

• نغمة الإعلانات Jingle.
• صوت ظهور الشعار، وفي أحيان كثيرة يتم استخدام نفس نغمة الإعلانات.
• ارتفاع صوت المؤثر الصوتي أو الموسيقى.

ثامنًا: الحركة (Animation & Motion)، وتتضمن:

• أسلوب حركة الأشياء.
• مدة الحركة.
• دالة الحركة مثل (Ease-In, Ease-Out).
  
  

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

بعض الأمثلة على أدلة الهوية:

1. دليل العلامة التجارية الخاص بشركة سيسكو: CISCO
2. دليل الهوية الخاص بشركة STC: STC
3. دليل الهوية الخاص بشركة سكايب: SKYPE
4. دليل هوية أوبر: UBER

مكتبة الأنماط Patterns Library

بعد أن استعرضنا دليل الهوية ننتقل لمفهوم آخر وهو مكتبة الأنماط، وتمثّل هذه المكتبة مجموعة من المكونات الرقمية (Components) القابلة لإعادة الاستخدام، وتحتوي مكتبة الأنماط على مكونات بصرية وهي عناصر واجهة المستخدم (UI Elements) بالإضافة إلى الأكواد البرمجية المستخدمة لخلق المكون (Code Snippets)، لهذا عادة ما يكون العمل على مكتبة الأنماط يستلزم فريقًا يضم مصممين ومبرمجين معًا.
ولأن عدد المكونات التي يمكن أن تُضاف في مكتبة الأنماط كبير، ويختلف باختلاف طبيعة المنتج أن كان على الويب أو على الهواتف الذكية أو على الاثنين معًا، فسنذكر هنا بعض أمثلة المكونات التي توجد في مكتبة الأنماط:

• الأزرار Buttons.
• الأكورديون Accordion.
• أحجام الخطوط وأوزانها وألوانها على الشاشات المختلفة.
• تخطيط الصفحة Layout ونظام الشبكة أو ما يسمى بالـ Grid System.
• كروت المحتوى Cards.
• التعليقات Comments.
• مشغل الصوت Audio Player.
• الحقول Forms، وغير ذلك من عناصر الويب أو التطبيقات على الأجهزة الذكية.
  
  

بعض الأمثلة على مكتبات الأنماط:

1. مكتبة الأنماط الخاصة بـ ميلتشمب: MAILCHIMP
2. مكتبة الأنماط الخاصة بموقع لونلي بلانت: LONELYPLANET
3. مكتبة الأنماط الخاصة بسيلزفورس: SALESFORCE

العلاقة بين مكتبة الأنماط ودليل الهوية

تعتمد مكتبة الأنماط على دليل الهوية في تحديد العناصر الأولية للمكونات (Components)، ومن ذلك الألوان المستخدمة في المكونات، نوع الخط المستخدم وأوزانه، المساحات الفارغة، وغير ذلك، ولهذا فإن دليل الهوية (Brand Style Guide) هو حجر الأساس لبناء مكتبة الأنماط ومن ثم لبناء نظام التصميم.

تعريف نظام التصميم

بعد أن استعرضنا مفهوم دليل الهوية ومكتبة الأنماط يمكننا الآن تصوّر التعريف الملائم لنظام التصميم Design System، إذ يُعرّف بأنه دليل شامل يحوي على المبادئ والمعايير والعناصر المستخدمة لتصميم وتطوير المنتج، بطريقة تساعد على خلق الاتساق المطلوب للمنتج إلى جانب تسريع عمليات التصميم والتطوير بجودة عالية. ويشمل ذلك:

• دليل الهوية Brand Style Guide
• مكتبة الأنماط Pattern Library
• بالإضافة إلى قيم العلامة التجارية
• الرؤية والرسالة والمنهج.
• توثيق التطوير Documentation.
• مصادر وملفات للتحميل.
  

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

كم تستغرق من الوقت عملية إنشاء نظام التصميم؟

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

ختامًا..

نماذج متنوعة لأنظمة تصميم من شركات كبرى:

1. نظام بولاريس من Shopify: POLARIS
2. نظام ماتريال من جوجل: MATERIAL
3. نظام كربون من IBM: CARBON
4. نظام التصميم الخاص بأتلاسيان: ATLASSIAN
5. نظام HIG الخاص بمنتجات Apple: HIG
6. نظام التصميم الخاص بشركة IBM: IBM DESIGN SYSTEM