خطوات تصميم موقع ويب : منتديات Dima cOoL

خطوات تصميم موقع ويب : منتديات Dima cOoL 12780411

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

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

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

تقسيم المحتوى على عناصر

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

خطوات تصميم موقع ويب : منتديات Dima cOoL Design-step-layout

خطوات تصميم موقع ويب : منتديات Dima cOoL Design-step-layout

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

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

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

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

تصميم وكتابة المحتوى بإستخدام XHTML و CSS

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

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

خطوات تصميم موقع ويب : منتديات Dima cOoL 12780411

تفاصيل التصميم

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

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

خطوات تصميم موقع ويب : منتديات Dima cOoL 12780411

قياس الصفحة

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

* قياس Fixed: وهو قياس ثابت ويستخدم صيغة البكسل px ..
* قياس Fluid: ما يمسى بالقياس السائل أي يتجاوب مع عرض نافذة المتصفح عند تغيير حجمه ويستخدم النسبة % في تحديد الحجم ..
* قياس Elastic: ويستخدم صيغة em و ex ويتميز تغيير حجم الخط عندما يريد المستخدم ذلك ، ولكن هذه الميزة تمت إضافتهما إلى القياسين Fixed و Fluid.

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

خطوات تصميم موقع ويب : منتديات Dima cOoL Design-step-layout2width

خطوات تصميم موقع ويب : منتديات Dima cOoL Design-step-layout2width

الخطوط

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

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

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

خطوات تصميم موقع ويب : منتديات Dima cOoL 12780411

خطوات تصميم موقع ويب : منتديات Dima cOoL Image-29

» شرح تصميم مواقع : منتديات Dima cOoL
» تعلم السحر : منتديات Dima cOoL
» كيف تصبح نجم الفيسبوك : منتديات Dima cOoL
» كود html ترحيب : منتديات Dima cOoL
» كيف تتغلب على بطأ عمل الحاسوب : منتديات Dima cOoL