أدوات التصميم خارج المسار. إليك كيفية إصلاحها.

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

لقد قمت مؤخرًا بتغريد أدوات التصميم - وهو أمر معروف من وقت لآخر.

لم أكن الشخص الوحيد الذي يتكلم في ذهني في ذلك اليوم ، بينما يتفوه الآخرون أيضًا.

لم يكن 28 يوليو 2017 يومًا جيدًا لأدوات التصميم.

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

كلنا نرسم الصور فقط. انه جنون.

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

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

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

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

يجب أن تتعامل أدوات التصميم الخاصة بنا مع المنتج الفعلي ، وليس صورة له.

منتجاتنا تفاعلية. أدواتنا ثابتة.

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

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

  • تحوم الزر
  • تركيز المدخلات
  • تحديد مربع اختيار
  • المحتوى المبوب
  • مناطق التمرير
  • فهرس علامة التبويب للحالات المركزة
  • اختصارات لوحة المفاتيح

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

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

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

يجب أن تدعم أدواتنا نموذج تخطيط الويب

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

لذلك ، من المنطقي أن أدوات التصميم لدينا تدعم نفس نموذج التخطيط. حق؟

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

  • يصبح التصميم سريع الاستجابة صعبًا جدًا لأنه يجب إعادة ترتيب كل طبقة يدويًا لكل نقطة توقف. وبدلاً من ذلك ، يمكن إدخال نظام تخطيط قائم على القيد ولكنه يضيف التعقيد ويزيد من انحناءات التعلم ويمنع المطورين في نهاية المطاف من نقل التخطيط مباشرة إلى الويب.
  • نظرًا لأن كل طبقة خارج تدفق المستند ، فإن معالجة المحتوى تصبح خادعة. على سبيل المثال ، إذا كنت تريد إضافة عنصر إلى قائمة ، فيجب عليك إعادة وضع العناصر الأخرى في تلك القائمة يدويًا. بالطبع ، يمكن تقديم الوظائف المتكررة والميزات الفاخرة الأخرى لتخفيف الألم ، ولكن مرة أخرى ، يقدم هذا تعقيدًا إضافيًا ويعقد شيئًا يمنحه لنا DOM مجانًا.
  • يؤدي الوضع المطلق بشكل طبيعي إلى إحداثيات وأبعاد بكسل ثابتة. هذا يولد عدم المرونة ، ومرة ​​أخرى ، هو خروج كبير عن كيفية عمل الويب. الويب مبني على وحدات مرنة مثل em و rem و vh و vw و٪. يجب أن تدعم أدواتنا هذه الوحدات بشكل افتراضي.

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

أداة متجانسة ليست هي الطريقة

يحدث التصميم الجيد على مراحل. يحتوي نظام التصميم الجيد التنظيم على بضع طبقات متميزة:

  1. لوحة النمط مجموعة من الألوان ، والظلال ، والتباعد ، ونصف قطر الحدود ، والخطوط ، وأحجام الخطوط ، والرسوم المتحركة ، وأنماط أخرى تشكل هوية علامتك التجارية. حاليًا ، تدعم معظم أدوات التصميم لوحات الألوان فقط. حتى يدعموا خصائص النمط الأخرى ، سيكون من الصعب جدًا التصميم بشكل منهجي.
  2. الأصول يتضمن هذا عناصر مثل الرموز والرسوم التوضيحية والصور. هناك بعض برامج تحرير الصور الرائعة وأداة ناقلات Figma ممتازة ولكن عندما يتعلق الأمر بدعم SVG ، فإن أدوات التصميم الخاصة بنا تترك الكثير مما هو مرغوب فيه.
  3. مكتبة المكونات المكون هو مجموعة من الأنماط والأصول التي تجعل البيانات إلى عنصر واحد في مجموعة متنوعة من الاختلافات. تشمل الأمثلة الأزرار والمدخلات والشارات وما إلى ذلك. كما ذكرت ، قامت Figma و Sketch مؤخراً بتلخيص هذه العملية بعيدًا عن تدفق الرسم الرئيسي - من المؤسف أنهم مجرد صور لمكونات وليست مكونات فعلية.
  4. الوحدات / الوحدة هي مجموعة من المكونات التي تقدم البيانات إلى قطعة مغلفة من واجهة المستخدم في حالات متنوعة. قد تتضمن الأمثلة أشرطة الرأس وقوائم علامات التبويب ونماذج تسجيل الدخول والجداول وما إلى ذلك. نظرًا لأن الوحدات عبارة عن مكونات معقدة فقط ، أعتقد أن Figma و Sketch يمكنهم التعامل مع هذه أيضًا. على الرغم من أنه قد يكون هناك بعض المزايا لفصل الاثنين.
  5. الشاشات الشاشة عبارة عن مجموعة من الوحدات والمكونات والبيانات لتكوين واجهة مستخدم كاملة يمكن للمستخدم التفاعل معها.

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

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

يتطلب تصميم رمز طريقة تفكير مختلفة تمامًا لتصميم تدفق المستخدم. محرر SVG البسيط الذي سمح لي برسم مستطيلات ودوائر وخطوط ومسارات SVG أصلية ، ثم تصدير كود SVG المحسن سيكون مثاليًا.

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

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

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

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

يجب أن تشجع أدواتنا التصميم الجيد

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

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

ولما لا…؟ لأن أدوات التصميم لا تهتم.

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

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

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

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

يجب أن نقوم بتصميم مع البيانات الحية

تم دمج البيانات الحية إلى حد ما من خلال الكثير من الأدوات ، وهو أمر رائع لرؤيته. يحتوي Adobe XD على بعض الميزات الأنيقة حقًا لإنشاء بيانات مزيفة تشبه البيانات الحية النموذجية. يوفر Invision Craft أيضًا بعض ميزات البيانات الحية الرائعة لـ Sketch.

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

هل أدوات التصميم لدينا توفر لنا هذه الكماليات؟

باختصار: لا.

كلما اقتربنا من تصميم المنتج الفعلي ، كلما كان عمل التصميم أكثر فائدة وتأثيراً.

الويب مفتوح. يجب أن تكون أدواتنا أيضًا.

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

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

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

تقوم شركة Marvel و Figma بعمل جيد هنا ، حيث تقدم خططًا مجانية وميزات تعاون مبتكرة.

لذا ، ما هو مستقبل أدوات التصميم؟

الابتكار في أدوات التصميم قيم للغاية ، وقد كان هناك الكثير منه مؤخرًا. في أدوات تصميم Airbnb ، عمل Jon Gold و Benjamin Wilkins على React-Sketchapp الذي يأخذ مكونات React ويجعلها داخل Sketch. يعمل جون وبن أيضًا على أداة جديدة مثيرة للدهشة تأخذ رسومات المناديل وتحولها بطريقة ما إلى مكونات تفاعل.

يعمل آدم مورس وبرنت جاكسون وجون أوتاندر على مجموعة من الأدوات في Compositor التي تحل بشكل أساسي جميع المشاكل في هذه المقالة وربما في العالم.

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

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

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

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

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

إذا كانت هناك أداة تصميم منهجية لكسب قلوبنا ، فيجب عليها أولاً أن تثقف.