كيف يمكن لمهندس واحد للواجهة الأمامية أن يحل محل فريق من شخصين

التفكير بعقلين

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

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

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

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

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

ليلة واحدة مع مشروعك

حسنا انا جاهز؟ رائعة! لنفترض أنه طُلب منك تصميم موقع miniCloud ، وهي شركة ناشئة تقدم حلول VPS مخصصة. من أين تبدأ؟

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

دع عصائرك الإبداعية تتدفق: عملية التصميم

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

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

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

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

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

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

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

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

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

 So, for step three, we take our wireframe and bring it to life: 

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

1. CSS3Ps : برنامج Photoshop الإضافي المجاني المستند إلى السحابة والذي يحول طبقاتك إلى CSS3.
2. العنصر الإلهي : ينشئ سمات WordPress مباشرةً من PSDs الخاصة بك. من الرائع البدء السريع لمشروع WordPress الخاص بك. على الرغم من أنهم يقولون "لا توجد مهارات HTML مطلوبة" ، إلا أنك ستحتاج بالفعل إلى بعضها إذا كنت ترغب في الحصول على نتائج رائعة.
3. أنماط دقيقة : مجموعة من الأنماط المجانية لاستخدامها في تصميماتك ، عادةً كخلفيات. مثل هذه التفاصيل تحدث فرقًا كبيرًا عندما تحاول تحويل تصميماتك من جيدة إلى رائعة.

"Slice It Up": عملية الواجهة الأمامية

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

في هذه المرحلة ، حان الوقت لاستخدام النصف الأيسر الأكثر تحليليًا من دماغك.

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

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

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

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

1. الشعار / الملاحة
2. منزلق الصورة
3. نص المقدمة
4. صور الفئة
5. آخر الأخبار / العروض
6. تذييل

بعد أن نلائمها في هيكل HTML الخاص بـ Bootstrap ، سيكون لدينا شيء مثل هذا:

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

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

اختيار CMS

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

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

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

سأحتاج إلى مقال كامل لأكتبه عن هذا الموضوع ، لكن ثق بي في هذا المقال تمامًا كما لو كنت تثق في Baz Luhrmann على واقي الشمس.

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

صيانة موقع الويب الخاص بك

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

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

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

يمكنني فقط أن أريك الباب. أنت الشخص الذي يجب أن تمشي من خلاله. - مورفيوس ، ماتريكس

ملاحظة: يمكنك العثور على PSD للقالب أعلاه وتصميمات أخرى رائعة في محفظة dribbble الخاصة بي.