خطوات تصميم موقع ويب

معرفة أهداف الموقع، محتوى الموقع، التفاصيل التي يقدمها الموقع


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


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

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


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


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


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


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


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


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

شكرااااااااااااا كل الشكرررررررررررر نسيييييييييم



بس الرسومات وين ترسم ؟؟؟؟؟؟وكيف يتم حجز موقع على قوقل ؟؟


يعافيك ربي’’

شكرا نسيم يعطيك الف عافيه جدا جدا جميل اشكرك جزيل الشكر

موضوع جميل جدا ومفيد

انا من الي اعشق المغامرات في هذا الباب

واحب اتلمس خيوط المعرفة فيها بنفسي

لكسب المعرفة وليس الاحتراف

الله يعطيك العافية

وشاكر لك الاثراء

مشكووووووور نسيم عالمجهود
موضوع رااائع