مراحل تصميم المواقع الاليكترونيه

قبل التفكير فى عملية تصميم موقع الاليكترونى يجب علىك ان تعرف ان هناك اربع مراحل اساسيه من اجل انشاء تصميم موقع وهذه المراحل هى:

جمع المعلومات والبيانات المستخدمه فى تصميم الموقعcollecting data about website ()

فى هذه المرحله يجب على مصممى المواقع الحصول على كافة البيانات والمعلومات حول الموقع مثل(الصور-الفقرات المستخدمه فى الموقع-الايقونات-ملفات الفيديو ان وجدت-الخطوط-......الخ) وغالبا ما يحصل على معظم

هذه المعلومات والبيانات من العميل الذى يطلب منه تصميم الموقع. 

  

عمل رسم سكيتش للموقع باليد (making sketch for website)

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

تصميم الموقع بالفوتوشوب(web design with photoshop)

بعد عمليه رسم سكيتش للموقع باليد نبدا فى تصميم الموقع على الفوتوشوب وهى تتضمن(تحديد مقاسات الصور والفقرات-تقليل حجم الصور حتى لا يصبح الموقع صعب التحميل-تحديد مكان الفوتروالقائمه-خطوط الالوان وحجمه-ا...الخ)

كم تتم فى هذا المرحله عملية تصميم بانر ولوجو للموقع عن طريق برنامج الاليستراتور وغالبا ما يقوم بهذه المرحله جرافيك ديزاينر(graphic designer) وهذه المرحله تعد بمثابة لوحة رسم هندسى تنتظر المهندسى المدنى لتنفيذها ويجب ان انوه هنا الى ان بعد ظهور تقنية Bootstrab اصبح الاعتماد على الفوتوشوب فى تصميم الموقع قليل

مرحلة تحويل الموقع المصمم بالفوتوشوب(قالبpsd) الى موقع الاليكترونى حقيقى( psd template to website)

بعد عملية تصميم الموقع بالفوتوشوب تبدا عملية تكويد الموقع والحصول على موقع مشابه تماما الفوتوشوب ولكنه موقع حقيقى يمكن تصفحه وتعد هذه المرحله مثابة تنفيذ لوحة الرسم هندسى وانشاء المبنى على ارض الواقع وتتم هذه المرحله على ثلاث طبقات:

• طبقة المحتوى: وهى طبقة وضع محتويات صفحة الويب مثل(وضع صوره-فقره-عنوان-قائمه-فورمه-فوتر-جدول-...الخ) والمسئول عن ظهور تلك المحتويات هى لغةhtml 

• طبقة التنسيق :وهى طبقة وضع تنسيق لمحتويات صفحة الويب مثل(لون ونوع خط الفقرات والعناوين-تحديد عرض وارتفاع الصور-تحديد اماكن الفقرات والعناوين-.....الخ) والمسئول عن ظهور تلك التنسيقات هى لغة css 

• طبقة السلوك : وهى طبقة وضع الحركه والديناميكيه فى الموقع مثل(تغير لون الكتابه عند مرور الماوس عليها-تغيرالصور بشكل اتوماتيكى فى قائمه ......الخ)والمسئول عن ظهور تلك الحركه هى لغة الجافا سكربت(javascript).