مفاهيم تطوير الويب يجب على جميع مصممي الويب فهمها

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

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

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

سلوك الواجهة الأمامية

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

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

أعتقد أن كل مصمم يجب أن يفهم على الأقل ثلاث لغات أساسية لتطوير الواجهة الأمامية (HTML و CSS و JS) جنبًا إلى جنب مع كيفية استخدامها. على سبيل المثال ، تعتمد معظم القوائم المنسدلة على JavaScript ولكن هناك أيضًا بدائل CSS فقط.

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

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

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

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

تقنيات استجابة

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

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

لمعرفة كيفية عمل نقاط التوقف على مواقع حقيقية ، راجع موقع استعلامات الوسائط.

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

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

اعتقد وحدات مع التصاميم

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

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

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

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

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

فهم صور الشبكية و SVG

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

أوصي بشدة بنشر منشور Smashing Magazine هذا إذا كنت تريد معرفة المزيد عن سير عمل تصميم شبكية العين. Retinize It عبارة عن مجموعة مجانية من إجراءات Photoshop التي يمكنها تلقائيا إنشاء إصدارات شبكية العين من الأصول الخاصة بك.

معظم المصممين يعرفون بالفعل الدعم @ 2X الصور, لكن أجهزة iPhone 6+ الأحدث لديها @ 3X القرارات. ومع ذلك ، لا تهتم بعض المشاريع بأحجام صور @ 3x ، لذلك تحدث إلى قائد المشروع قبل الانتهاء من أي أصول.

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

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

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

فهم إمكانية الوصول

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

لا يزال يتعين على هؤلاء المستخدمين الحصول على الخبرة التي تعمل, وهذا يحتاج إلى معالجة مع الترميز الصحيح. قد تتجاهل بعض قارئات الشاشة جميع رموز JavaScript و CSS ، ولكن الموقع الإلكتروني لا تزال بحاجة إلى العمل.

فعلت مؤخرا وظيفة تغطي تحسين تدريجي بالتفصيل ، لأنها طريقتي المفضلة للتنمية. تحسين تدريجي يبدأ مع الميزات الأساسية للغاية, ثم يعمل أكثر من ذلك “المتقدمة” المميزات.

تدهور رشيقة هل النهج المعاكس أين تم تصميم جميع الميزات الرئيسية أولا, ثم يقرر المطور كيفية التعامل مع هذه الميزات إذا كان المستخدم لا يدعم JavaScript أو CSS.

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

في الختام

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

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

إذا كنت تبحث عن المزيد من المحتوى ذي الصلة ، يمكنك إلقاء نظرة على هذه المنشورات:

• كيفية التواصل الفعال مع المطورين (smashingmagazine.com)
• ساعد المصممين والمطورين على تعلم فهم بعضهم البعض (uie.com)
• تعلم رمز يمنحك مزايا كمصمم UX (jessicaivins.net)