خطوات بناء مشروع frontend لعميل

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

الافضل هو تخيير العميل بين أن يحضر هو الـ template أو تصميم الـ figma أو ان تقوم انت ببنائه إذا كان لديك المهارات الكافية.

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

هذه هي الخطوات الأساسية التي يتخدها المبرمج حينما يستلم تفاصيل مشروع بدون figma file .

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

فيما يلي بعض الخطوات الإضافية التي قد يتخدها المبرمج:

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

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

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

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

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

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

وقد تم النقاش حول تلك النقطة هنا بالتفصيل:

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

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