حان الوقت للمصممين للتبديل من التصميم المستند إلى الصور إلى التصميم المستند إلى الكود

لماذا التبديل من التصميم المستند إلى الصور إلى التصميم المستند إلى الكود؟

كانت هناك مشكلة كبيرة منذ فجر تصميم المنتجات الرقمية. يتم فصل المصممين عن عملية تطوير المنتج ويجبرون على العمل مع البرامج فقط.

يستخدم المصممون رسومات نقطية أو أدوات تصميم متجه لرسم الصور لأنها معزولة عن باقي المؤسسة. تظل العملية في معظم الحالات متطابقة حتى لو كانت تعمل في برامج مختلفة مثل Photoshop أو Gimp أو Sketch أو Fireworks. يتم إرسال مجموعة من الصور الثابتة إلى المهندسين حسب النية التي قدمها المصممون.

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

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

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

يتم توفير سير عمل جديد بواسطة مجموعة الأدوات الجديدة حيث:

• يؤسس المصممون والمهندسون مصدرًا واحدًا للحقيقة
• بدون أي خبرة في الترميز ، فإنه يمنح المصممين القوة الكاملة للترميز
• يرتبط الثنائي من المصممين والمهندسين من خلال عملية إبداعية تعاونية واحدة تخلق تطورًا مذهلاً في سير العمل

تصميم قائم على الصورة إلى رمز مع UXPin

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

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

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

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

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

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

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

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

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

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

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

التفرد في التصميم القائم على الكود

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

فيما يلي الفوائد التي تعود على المصممين بعد انتقالهم من التصميم المستند إلى الصور إلى التصميم المستند إلى الكود.

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

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

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

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

5. يُنشئ أقوى تعاون على الإطلاق: يتم تحقيق نهج ثوري جديد تمامًا للتعاون الهندسي والتصميمي من خلال نموذج قائم على الكود.

مقالات لها صلة

الفرق بين مصمم الويب ومطور الويب