من Figma إلى موقع يعمل: كيف يُصمَّم الموقع خطوة بخطوة

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

١. الملخص

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

٢. خريطة الصفحات

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

٣. المخطط الأولي (Wireframe)

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

٤. التصميم على Figma

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

٥. النموذج التفاعلي (Prototype)

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

٦. التسليم للمطورين والبرمجة

يأخذ المطورون المقاسات والمسافات والألوان والملفات المصدّرة من ملف Figma مباشرة، فيطابق الموقع التصميم. وتُصدَّر الصور بصيغ حديثة وبالمقاسات التي ستُعرض بها، ولا تُحمَّل الخطوط إلا بالأوزان التي يستخدمها التصميم.

٧. الاختبار والإطلاق

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

Figma أم Sketch أم InVision؟

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

ما الذي توافق عليه ومتى

1. خريطة الصفحات، قبل بدء أي تصميم.
2. المخطط الأولي للصفحات الأساسية.
3. تصميم الصفحة الرئيسية، لأنه يحدد أسلوب باقي الصفحات.
4. التصميم الكامل والنموذج التفاعلي، قبل البرمجة.
5. نسخة التجربة من الموقع، قبل الإطلاق.

أسئلة عن مراحل التصميم

هل أستلم ملف Figma؟

نعم. يُسلَّم ملف التصميم مع الموقع، ومعه الكود وكل الحسابات باسمك.

كم يستغرق التصميم؟

في موقع الشركة يستغرق التصميم عادة أول أسبوع أو أسبوعين من مشروع مدته من أسبوعين إلى ٤ أسابيع. أما صفحة الهبوط فتُصمَّم وتُبرمج خلال ٥ إلى ٧ أيام.

هل يمكنكم البرمجة من تصميم جاهز لدينا؟

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

اطّلع على خدمة تصميم وبرمجة المواقع، أو اقرأ كم يستغرق بناء موقع.