104 تصميم المواقع – الخطوات العملية لمشروع تصميم موقع

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

أولاً: فكرة الموقع

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

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

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

ثانياً: تصميم الموقع

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

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

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

ثالثاً: XHTML و CSS

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

هناك الكثير من البرامج التي تسهل عليك هذه العميلة، بداية بالتقطيع (Slice) وإنتهاءاً بتصدير ملف الـ XHTML، بامكانك استخدام أداة Slice في الـ Photoshop ثم Save for Web لتحصل على صفحة XHTML من تصميمك، أو برنامجاً متخصصاً أكثر مثل Firewroks وهو سهل جداً ويمكنك من استخدام خواص مثل rollover، ولكن المشكلة هي أن كل هذه البرامج ستعطيك XHTML بهيكل مبني على استخدام الجداول (Table) وهذا مخالف لنصائح W3C لأنه استخدام خاطئ للـ <table>. للمزيد حول table أم div راجع مقالتي السابقة الفصل بين المحتوى والتصميم. لذلك فأنا أنصح باستخدام أداة التحديد (Selection) في الـ Photoshop لتقطيع التصميم قطعة قطعة، ثم بناء هيكل الموقع بالـ XHTML يدوياً وإضافة الصور الصغيرة المقطعة على الهيكل مستعيناً بـ CSS عند الحاجة، كما لا يمكن الاستغناء عن بعض JavaScript لبعض التأثيرات والخواص اللطيفة على الصفحة.

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

رابعاً: برمجة الموقع وبناء قاعدة البيانات

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

والسـلام

  • سؤال: هل نسيتُ شيئاً؟
  • سؤال آخر: هل تمر أنت على هذه الخطوات أثناء مشروع تصميم موقع؟

32 تعليق على “104 تصميم المواقع – الخطوات العملية لمشروع تصميم موقع

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

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

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

  3. الموضوع جميل وأنا مطلوب مني اصمم موقع كمشروع تخرج واحترت أختار العنوان بمعنى عنوان المشروع “ممكن تساعدني”

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

  5. بارك الله فيك اخي الكريم شرح سهل ومفهوم باسثتناء النقطة الأخيرة لم تكن مفهومة
    اتمنى لك التوفيق

  6. جزاك الله خير الجزاء ..كنت بحاجة لمثل هذه المواضيع لمعرفة كيف اربط فكرتي وتصميمي مع التنفيذ…شكرا

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

    وهل ممكن الاستغناء عن التقطيع كليا باي بديل كحفظ كل شي لحاله من البدايه؟؟؟

    بانتظار الرد

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *