انظر الواجهة "من خلال عيون المصمم": حول تفاعل الواجهة الأمامية مع المصمم

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

تحية! فيما يلي سببان رئيسيان وراء حاجة مطوري الواجهة الأمامية إلى معرفة أساسيات التصميم.

السبب الاول Frontender ومصمم حل مشكلة شائعة


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

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

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

كيفية تأسيس التفاعل بين المصمم والمطور: القواعد الأساسية


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

إذا كنت مصممًا وقمت بإعداد تخطيط ، فحاول تبسيط عمل المطور الأمامي:

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

إذا كنت بائعًا أماميًا وقم بتحويل التنسيق إلى واجهة موقع ويب:

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

عندما يفهم كل عضو في الفريق ما يفعله زملاؤه وكيفية تبسيط مهامهم ، يسير العمل بسلاسة. والنتيجة هي واجهة الجودة ، تسليمها في الوقت المحدد.

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


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

حيث المصممين الأمامية في الطلب


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

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

ماذا تتعلم عن التصميم أولاً إذا كنت مطورًا متقدمًا


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


في المرحلة التالية ، تفهم في الواقع أدوات إنشاء الواجهة: Figma أو Adobe XD أو Sketch. اقرأ ، انظر إلى مراجعات كل منها واختر ما هو أقرب إليك. الشيء الرئيسي لا يقتصر على الأدلة. مشاهدتها وممارسة المهارات الخاصة بك على الفور في الممارسة العملية ، مباشرة في الأداة.

في المستقبل ، أوصي بفهم برامج 3D: Cinema 4D و Adobe Dimension ؛ واجهة الرسوم المتحركة: ProtoPie و Adobe After Effect.

أين تدرس


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

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

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

نصائح


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

إذا كنت مستعدًا لتعلم أساسيات تصميم الويب ، فإننا ندعوك إلى دورة تدريبية جديدة في Netology


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

Source: https://habr.com/ru/post/ar465245/


All Articles