فوائد إنشاء نظام التصميم

كانت Styleguides موجودة منذ سنوات وكانت دائمًا مهمة للهوية المرئية للشركة ، ولكن إعادة تسمية المصطلح أعطت بُعدًا جديدًا للمفهوم بأكمله.

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

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

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

من خلال نظام متين ومتسق وموضح جيدًا ومدروس ، يصبح الجانب المرئي لإنشاء التصميم معياريًا تمامًا. جعلت منتجات مثل Craft by Invision أو Brand.ai مرحلة التصميم المرئي تقريبًا تسحب وتنخفض إلى حد معين.

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

"الأنماط تأتي وتذهب. التصميم الجيد لغة وليس أسلوبًا ". - ماسيمو فينيلي

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

مقدمة لنظام التصميم لدينا - كويك

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

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

وبهذا ، بدأنا في إنشاء نظام التصميم الجديد الخاص بنا ، المسمى على نحو مناسب QUIK - Q stream U ser I nterface K it.

الخطوة 1: التناقضات

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

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

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

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

الخطوة الثانية: تكوين العناصر

لقد قسمنا نظامنا إلى 3 كيانات مختلفة.

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

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

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

نظرة عامة على نظامنا بالكامل حتى الآن.

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

(لدينا أيضًا مشروع آخر قيد التنفيذ حول أسلوب الرسم التوضيحي الخاص بنا ، لكنني سأحفظ ذلك لمقال آخر ، يمكنك رؤية المزيد حوله هنا)

عينة من أسلوبنا التوضيحي المستخدم عبر المنصة.

الخطوة الثالثة: التنفيذ

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

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

" نظام التصميم ليس مشروعًا. إنه منتج يخدم المنتجات ". - ناثان كيرتس

ربط الأنظمة

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

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

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

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

للمضي قدما

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