تصميم المواقع هو تخطيط وبناء الصفحات التي يراها زائر موقعك: هيكلها ومحتواها وشكلها وسرعتها على الهاتف والحاسوب. التصميم يقرر ماذا يرى الزائر وكيف يبدو، والبرمجة تجعل ما يراه يعمل. في هذا الدليل نشرح المراحل الست، ومن ينفذ كل مرحلة، وكم تستغرق، وكم تكلف في مصر بأرقام منشورة. نكتبه بصفتنا ويب بايونير، شركة تبيع هذه الخدمة منذ 2014، فاقرأه على هذا الأساس.
ما هو تصميم المواقع بكلمات بسيطة؟
تصميم المواقع هو العمل الذي يحول فكرة "نريد موقعا" إلى صفحات حقيقية يفتحها الزائر ويفهمها ويتصرف بناء عليها: يتصل، أو يطلب عرض سعر، أو يشتري. يشمل ذلك ترتيب الصفحات والقوائم، وكتابة المحتوى أو تنظيمه، واختيار الألوان والخطوط والصور، وتحديد شكل كل صفحة على شاشة الهاتف قبل شاشة الحاسوب، ثم التأكد من أنها تفتح بسرعة وتقرأ بوضوح بالعربية.
التصميم يقرر ماذا يرى الزائر، والبرمجة تجعل ما يراه يعمل.
وما ليس تصميم مواقع؟ ليس شعارا جميلا على صفحة واحدة، وليس قالبا جاهزا تغير فيه الاسم فقط، وليس إعلانا ممولا. الشعار جزء من الهوية، والقالب أداة، والإعلان يجلب الزوار إلى الموقع ولا يبنيه. إذا كنت تسمع في مصر سؤال "ازاي اصمم موقع؟" فالجواب الدقيق بالفصحى هو: كيف تخطط صفحات موقعك وتبنيها، وهذا ما يفصله هذا الدليل.
الفرق بين تصميم المواقع وبرمجة المواقع وتطوير المواقع
تستخدم المصطلحات الثلاثة في السوق المصري كأنها كلمة واحدة، وهي ليست كذلك. الجدول يفصل بينها حتى تعرف ماذا تطلب من كل شخص في الفريق، وحتى لا تدفع مقابل "تصميم" ثم تكتشف أن النماذج لا ترسل والصفحات لا تحفظ.
| المصطلح | ماذا يشمل | من ينفذه |
|---|---|---|
| تصميم المواقع | هيكل الصفحات، المحتوى، واجهة المستخدم UI وتجربة المستخدم UX، الألوان والخطوط، النسخة المتجاوبة للهاتف | مصمم واجهات وكاتب محتوى، بالتنسيق مع صاحب العمل |
| برمجة المواقع | تحويل التصميم إلى كود يعمل: النماذج، لوحة التحكم، قاعدة البيانات، الربط مع الدفع أو CRM | مطور واجهة أمامية ومطور خلفية |
| تطوير المواقع | المصطلح الجامع: التصميم والبرمجة والاختبار والإطلاق والتشغيل بعده | فريق كامل بإدارة مدير مشروع |
الخلاصة العملية: عندما تطلب "تصميم موقع" من شركة، اسأل صراحة هل العرض يشمل البرمجة والإطلاق أم التصميم وحده. في شركة تصميم مواقع تعمل بالطريقة التي نشرحها هنا، يكون العرض للمراحل الست كاملة، وهذا ما يفترضه باقي هذا الدليل.
مراحل تصميم الموقع الست، ومخرج كل مرحلة
المراحل أدناه هي المراحل المنشورة في صفحة كيف نعمل: مراحل التنفيذ وفي صفحة خدمة تصميم المواقع. المدد في الجدول حصص من إجمالي المدة المنشورة لكل نطاق، لا أرقام جديدة: الموقع التعريفي 2 إلى 3 أسابيع، وموقع الشركة بلغتين 4 إلى 6 أسابيع، بافتراض وصول المحتوى في موعده. المهم في كل مرحلة هو المخرج الذي تستلمه وتوقع عليه قبل الانتقال إلى التالية.
| المرحلة | ما يحدث | من يشارك | المدة المعتادة | المخرج الذي تستلمه |
|---|---|---|---|---|
| 1. اكتشاف وتحليل | مكالمة اكتشاف لفهم هدف العمل والجمهور والمنافسين والأنظمة القائمة، ثم كتابة النطاق | صاحب العمل، مدير المشروع، مهندس | الأيام الأولى من الأسبوع الأول، أيا كان النطاق | نطاق مكتوب بالافتراضات والاستثناءات وتقدير تقني بسعر ثابت لكل مرحلة |
| 2. هيكل ومحتوى | خريطة الصفحات، ترتيب القوائم، جمع المحتوى أو كتابته، مخططات أولية بلا ألوان | كاتب المحتوى، مصمم الواجهات، صاحب العمل يراجع | باقي الأسبوع الأول من أصل 2 إلى 3 أسابيع للموقع التعريفي | خريطة موقع معتمدة ومخططات صفحات ومحتوى نهائي أو جدول تسليمه |
| 3. تصميم الواجهات | تصميم الصفحة الرئيسية ثم الصفحات الداخلية على مقاس الهاتف والحاسوب، بالخطوط والألوان والصور | مصمم الواجهات UI/UX، صاحب العمل يعتمد | الأسبوع الثاني من أصل 2 إلى 3 أسابيع للموقع التعريفي | ملفات تصميم معتمدة لكل قالب صفحة، وعليها تحسب الدفعة الثانية في الجدول المنشور |
| 4. التطوير | تحويل التصميم إلى موقع يعمل على رابط تجريبي staging، مع لوحة التحكم والنماذج والربط المطلوب | المطورون، مدير المشروع | من الأسبوع الثاني إلى ما قبل الأخير، ومراجعة أسبوعية بمحضر مكتوب | رابط تجريبي تتابع عليه التقدم أسبوعيا |
| 5. الاختبار والقبول | اختبار على الهواتف والمتصفحات، فحص السرعة والنماذج والعربية، ثم اختبار قبول من فريقك | مختبر الجودة، فريق العميل | الأسبوع الأخير من المدة المنشورة | قائمة عيوب مغلقة ونموذج UAT موقع من فريقك |
| 6. الإطلاق والمتابعة | نقل الموقع إلى النطاق الحقيقي في يوم تختاره، شهادة SSL، إرسال الخريطة إلى Google، تدريب على لوحة التحكم | المطورون، صاحب العمل | يوم الإطلاق ثم فترة الضمان المنشورة | موقع حي باسمك، حسابات الاستضافة والنطاق باسم شركتك، وثائق وتدريب |
مثال من أعمالنا المنشورة: موقع مكتب المستشار هاني طلب موقع خدمات مر بهذه المراحل نفسها، ويمكنك قراءة ما نشرناه عنه دون أرقام غير مذكورة هناك.
من يشارك في المشروع؟
أكثر ما يؤخر مواقع الشركات في مصر ليس المصمم ولا المطور، بل المحتوى الذي لم يصل. لذلك نذكر دور صاحب العمل أولا.
- صاحب العمل أو مدير التسويق: يحدد الهدف، ويعتمد النطاق، ويسلم الشعار والنصوص والصور وبيانات التواصل قبل مرحلة الهيكل، ويعتمد التصميم، ويوقع اختبار القبول.
- كاتب المحتوى: يكتب أو يحرر نصوص الصفحات بالعربية وبالإنجليزية إن وجدت، بما في ذلك العناوين والأوصاف التي تظهر في Google.
- مصمم الواجهات UI/UX: يرسم المخططات ثم التصاميم النهائية لكل قالب صفحة على الهاتف والحاسوب.
- المطور: يبني الصفحات ولوحة التحكم والنماذج والربط، ويضبط السرعة والأمان.
- مختبر الجودة: يفحص كل صفحة على المتصفحات والأجهزة ويسجل العيوب حتى تغلق.
- مدير المشروع: يدير الجدول والمراجعة الأسبوعية ومحاضرها ويكون نقطة التواصل الواحدة.
في المشاريع الصغيرة قد يجمع شخص واحد دورين، لكن الأدوار نفسها لا تختفي. اسأل الشركة من يقوم بكل دور في مشروعك، ومتى يحتاج منك شيئا.
ثلاث طرق لبناء الموقع: منشئ مواقع، ووردبريس، برمجة خاصة
منشئ المواقع (Wix وأمثاله): أداة سحب وإفلات تبني بها صفحات بنفسك باشتراك شهري. تناسب صفحة تعريفية سريعة بميزانية صغيرة جدا. ما لا تستطيعه: نقل الموقع إلى استضافة أخرى بسهولة، أو إضافة وظائف خارج ما تتيحه المنصة، أو التحكم الكامل في السرعة والترجمة والعربية. أنت تستأجر الموقع ولا تملكه.
WordPress: نظام إدارة محتوى مفتوح المصدر يشغل 39.6% من مواقع الإنترنت بحسب W3Techs في أكتوبر 2026. يناسب المواقع التعريفية ومواقع الشركات والمدونات والمتاجر عبر WooCommerce. تملك الملفات وقاعدة البيانات وتنقلها حيث تشاء، ويحتاج إلى تحديثات أمنية منتظمة. تفاصيل ما نقدمه في تصميم مواقع ووردبريس في مصر.
البرمجة الخاصة (Laravel مثلا): كود يكتب لمشروعك عندما يحتاج الموقع إلى منطق عمل خاص: حسابات مستخدمين بأدوار، كتالوج بفلاتر معقدة، ربط مع ERP أو الفاتورة الإلكترونية، أو منصة كاملة. دراسة حالة Droubiz مثال منشور لمتجر بني بهذه الطريقة. هي الطريقة الأغلى والأطول، وتستحق عندما تكون الوظيفة هي المنتج لا الصفحات.
كم يستغرق تصميم الموقع؟
المدد المنشورة في صفحة الأسعار تحسب من اعتماد النطاق إلى الإطلاق، بافتراض وصول المحتوى في موعده:
- موقع تعريفي (حتى 7 صفحات): 2 إلى 3 أسابيع.
- موقع شركة بلغتين: 4 إلى 6 أسابيع.
- موقع شركة كبير أو كتالوج: 6 إلى 10 أسابيع.
- متجر إلكتروني: 3 إلى 8 أسابيع.
- منصة أو نظام ويب مخصص: 8 إلى 20 أسبوعا.
ما يطيل المدة فعلا: محتوى يصل متأخرا، أو جولات اعتماد للتصميم أكثر مما اتفق عليه، أو إضافة صفحات ووظائف أثناء التنفيذ. ما يقصرها: محتوى جاهز قبل البدء، وشخص واحد في شركتك يملك قرار الاعتماد، ومراجعة أسبوعية ثابتة بمحضر مكتوب.
كم يكلف تصميم موقع في مصر؟
الجدول التالي منقول كما هو من صفحة الأسعار المنشورة لدينا، وآخر مراجعة للأسعار فيها 25 أكتوبر 2026. الأسعار بالجنيه لا تشمل ضريبة القيمة المضافة 14%. الأرقام نطاقات تبدأ منها دراسة كل مشروع، والسعر النهائي يأتي في تقدير تقني مكتوب. تفصيل ما يحرك السعر داخل كل نطاق في دليل كم تكلفة تصميم موقع إلكتروني في مصر.
| النطاق | السعر بالجنيه | المدة | يشمل |
|---|---|---|---|
| موقع تعريفي (حتى 7 صفحات) | 5,000 إلى 25,000 | 2 إلى 3 أسابيع | تصميم متجاوب، لوحة تحكم، بريد عمل، SEO أساسي، شهادة SSL |
| موقع شركة بلغتين | 15,000 إلى 50,000 | 4 إلى 6 أسابيع | عربي وإنجليزي، مدونة، نماذج تواصل، Google Analytics، تدريب |
| موقع شركة كبير أو كتالوج | 50,000 إلى 110,000 | 6 إلى 10 أسابيع | كتالوج منتجات، بحث وفلاتر، صفحات صناعية، ربط CRM |
| متجر إلكتروني | 20,000 إلى 110,000 (معظم المتاجر 50,000 إلى 110,000) | 3 إلى 8 أسابيع | WooCommerce أو Laravel، بوابات الدفع المصرية، الشحن، الفاتورة الإلكترونية |
| منصة أو نظام ويب مخصص | من 70,000، ومعظم المنصات 165,000 إلى 440,000 | 8 إلى 20 أسبوعا | تحليل متطلبات مكتوب، لوحات تحكم بأدوار، واجهات برمجية، تشغيل بعد الإطلاق |
بعد الإطلاق توجد تكاليف متكررة منشورة في الصفحة نفسها: صيانة ودعم بعد الإطلاق 5,000 إلى 10,000 جنيه شهريا، واستضافة مدارة 3,000 إلى 7,500 جنيه سنويا. ورسوم المزودين (الاستضافة والنطاق وعمولات بوابات الدفع) تدفع للمزود مباشرة وتفتح الحسابات باسمك. وعند السداد الكامل تنتقل إليك ملكية الكود المصدري والتصاميم والبيانات.
ما الذي يجعل التصميم جيدا فعلا: السرعة والظهور في جوجل والعربية
الشكل وحده لا يكفي. ثلاثة معايير تفرق بين موقع يعمل لعملك وموقع يزين الحائط:
السرعة: تقيس Google تجربة التحميل بمؤشرات Core Web Vitals، وحدودها المنشورة على web.dev (قرأناها في 25 أكتوبر 2026): LCP خلال 2.5 ثانية، وINP خلال 200 ملي ثانية، وCLS أقل من 0.1. اطلب من أي شركة قياس الموقع التجريبي بهذه المؤشرات قبل الإطلاق. صفحات Laravel على موقعنا سجلت 97 إلى 99 في اختبار PageSpeed المعملي للجوال بتاريخ 25 أكتوبر 2026، ونقولها بتاريخها لأن الرقم يتغير.
الظهور في Google: Google تحدد لغة الصفحة من النص الظاهر فيها، لذلك يحتاج الموقع العربي إلى محتوى عربي حقيقي لا ترجمة آلية لصفحة إنجليزية. العناوين والأوصاف والروابط النظيفة وخريطة الموقع جزء من التصميم الجيد لا إضافة لاحقة. إن كان موقعك قائما ولا يظهر، فابدأ بمقال لماذا لا يظهر موقعك في جوجل، وإن أردت عملا شهريا منظما فهذه خدمة تحسين محركات البحث.
العربية والاتجاه من اليمين إلى اليسار RTL: خط عربي واضح بحجم مريح وتباعد سطور أوسع من اللاتيني، قوائم وأيقونات تنعكس اتجاهها، أرقام وتواريخ منسقة، ونسخة إنجليزية منفصلة لا مترجمة تلقائيا إن كان جمهورك ثنائي اللغة. وإن كان موقعك يعمل لكنه لا يحقق هذه المعايير، فاقرأ متى يحتاج موقعك إلى إعادة تصميم.
هل تصميم المواقع تخصص يمكن تعلمه؟
نعم، وهو تخصص له فرعان يلتقيان. فرع التصميم: مبادئ واجهة المستخدم UI وتجربة المستخدم UX، والترتيب البصري، والألوان والخطوط، وأدوات مثل Figma. وفرع البناء: HTML وCSS وJavaScript ثم نظام إدارة محتوى أو إطار عمل برمجي. من يطلب "تخصص تصميم مواقع الويب" في الجامعات المصرية يجده غالبا داخل علوم الحاسب أو الفنون التطبيقية أو الإعلام الرقمي. نحن لا نقدم دورات تدريبية مدفوعة، لذلك لا ننصح بمسار بعينه، لكن النصيحة الثابتة في السوق هي: ابن ثلاثة مواقع حقيقية لأشخاص حقيقيين قبل أن تطلب أول وظيفة.
الخلاصة: ما الذي تطلبه من أي شركة تصميم مواقع
قبل أن توقع مع أي شركة، سواء كانت ويب بايونير أو غيرها، اطلب هذه الثمانية مكتوبة:
- نطاق مكتوب بالصفحات والوظائف والافتراضات والاستثناءات.
- سعر ثابت لكل مرحلة، وجدول دفعات مرتبط بتسليمات لا بتواريخ.
- تصميم على مقاس الهاتف قبل الحاسوب، وملفات التصميم تسلم إليك.
- رابط تجريبي من الأسبوع الثاني ومراجعة أسبوعية بمحضر مكتوب.
- قياس Core Web Vitals على الموقع التجريبي قبل الإطلاق.
- محتوى عربي أصلي، ونسخة إنجليزية منفصلة إن احتجتها.
- الاستضافة والنطاق والحسابات باسم شركتك، وملكية الكود والتصاميم عند السداد الكامل.
- ضمان مكتوب بعد الإطلاق، وعرض منفصل وواضح للصيانة الشهرية.
لمقارنة العروض بعد ذلك اقرأ كيف تختار شركة تصميم مواقع في مصر، ولتحديد نوع الموقع الذي تحتاجه أصلا اقرأ أنواع المواقع الإلكترونية. وإن أردت أن ترى كيف تنفذ شركة تصميم مواقع هذه البنود في مشروعك، فصفحة الخدمة تشرح المراحل من الداخل.
ويب بايونير شركة هندسة برمجيات وتقنية تأسست في القاهرة عام 2014، سجل تجاري 206687، ترخيص ITIDA رقم 1167، أكثر من 150 مشروعا منها 19 موقعا منشورا في معرض الأعمال. البيانات الكاملة في صفحة بيانات الشركة.
