أيها المصممون ، هل تدفع نظائر مطوريك إلى الجنون؟

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

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

1. إحضار المطورين في وقت مبكر

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

تنهد.

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

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

2. التدرب على إدارة الملفات الثابتة

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

كم عدد المرات التي قمت فيها بفتح وثيقة Photoshop بمئات الطبقات المجهولة؟ لا تعطي هذا النوع من الملفات لمطور. يجب تسمية كل طبقة ونمط - بغض النظر عن البرامج التي تستخدمها - بشكل مناسب.

كم عدد المرات التي قمت فيها بفتح وثيقة Photoshop بمئات الطبقات المجهولة؟

يجب أن تكون الأنماط والحوامل اللونية والطباعة متسقة طوال التصميم. (لا يجب أن يبدو الزر مختلفًا من صفحة إلى أخرى).

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

3. استخدم جوجل الخطوط

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

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

لا تجعل المطور يقوم بذلك نيابة عنك. اختر خطوط Google القابلة للمقارنة واستخدمها من البداية. يمكنك حتى ملاحظة الطباعة في مقابل الخطوط الرقمية في دليل أسلوبك.

السبب وراء هذا بسيط: يمكن دمج الخطوط تصبح صعبة بعض الشيء. بالإضافة إلى ذلك ، فإن Google Fonts مجانية وستضمن عدم تكبد تكاليف إضافية للمشروع. (عندما تكون في ذلك ، فكر في القيام بنفس الشيء مع الرموز واستخدام حزمة مثل Font Awesome ، والتي تسمح للمطوِّر بنمط الرموز باستخدام CSS ، وليس استيراد مجموعة من ملفات الصور!)

4. حزمة صورة الأصول

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

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

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

5. فكر في البيئة

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

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

عليك أن تعرف هذه الأشياء مسبقاً:

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

6. طرح الأسئلة

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

يمكن الاتصال أو إنهاء المشاريع

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

7. تعلم بعض أساسيات Dev

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

يجب على المصممين الذين يعملون في المشاريع الرقمية أن يتعلموا أنفسهم في:

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

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

8. استخدم دليل نمط "المعيشة"

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

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

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

ضع المعلومات التالية في دليل الأنماط لتحقيق أقصى استفادة منها:

  • أنماط الشعار
  • لوحة الألوان
  • لوحة الخط
  • لوحة الرموز
  • عناصر قائمة التنقل (وهناك يربطون بها)
  • خيارات تخطيط لصفحات مختلفة
  • مقتطفات الشفرة التي تتم إعادة استخدامها في جميع أنحاء الموقع (مثل الأزرار)

9. استخدم الشبكة

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

يمكن للشبكة مساعدتك في تصميم والحفاظ على التدفق. (التحدي هو أنه لا يمكنك كسر قواعد التصميم بشكل تعسفي).

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

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

10. لا تكن رعشة

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

القاعدة الذهبية عندما يتعلق الأمر بالعمل مع المطورين هي ... لا تكن غاضباً.

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

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