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

غالباً ما يبدو المصممون والمطورون من كواكب مختلفة ولديهم أدمغة مختلفة تمامًا.

يريد المطورون أن يعمل موقع الويب بشكل صحيح ، ويريد المصممون أن يبدو صحيحًا.

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

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

PEEVE # 1: "لماذا يريد المصممون إنشاء كل شيء في Flash؟"

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

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

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

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

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

يُعد إعلام مصممك عن إطارات جافا سكريبت JavaScript مثل Dojo و jQuery فكرة جيدة. قد لا يدركون الوظائف التفاعلية والتأثيرات الخاصة التي يمكن تحقيقها مع AJAX و DHTML.


PEEVE # 2: "هل سمع المصمم حتى HTML CSS؟"

لقد ابتكر المصمم تصميماً رائعاً باستخدام Photoshop ، لكن الويب لا يعمل بهذه الطريقة.

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

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

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


PEEVE # 3: "أعطاني المصمم PSD مع 50.000 طبقة بدون اسم أو مجلدات!"

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

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

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

إذا لم يكن ذلك ممكنًا (أو كان المصمم عنيدًا فقط) ، فإن إحدى الخدع للعثور على طبقة الكائن هي النقر بزر الماوس الأيمن / Ctrl + في منفذ العرض باستخدام أداة التحريك (اختصار لوحة المفاتيح هو "v").

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

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

تتميز الكائنات الذكية بسهولة الاستخدام وتوفر العديد من المزايا:

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


PEEVE # 4: "لم يتسع المصمم لمحتوى العالم الحقيقي."

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

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

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

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

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


PEEVE # 5: "يتوقع المصمم أن أحزر الأنماط التي استخدمها."

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

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

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

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


بونص خاص: "لست بحاجة إلى مصمم يخبرني كيف أقوم بالبرمجة!"

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

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

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

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

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

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


مكتوبة حصرا ل WDD من قبل جايسون كرانفورد تيج . وهو يقدم خدمات استشارية متخصصة على الويب ودورات تدريبية. يمكنك طلب كتابه الجديد مسبقًا ، تحدث في الأنماط: أساسيات CSS لمصممي الويب في Amazon.com.

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