مراحل تصميم المواقع، أولاً: رسم sketch (رسم تخطيطي) توزيع العناصر.

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

كيف ترسم مخطط؟

اولاً: تحديد العناصر.

أن تعرف الأزرار، الصور، النصوص، الخانات والنماذج التي تحتاجها.

ثانياً: تحديد أهمية العناصر. 

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

ثالثاً: توزيع العناصر؟

هذه المرحلة تحتاج نوعاً ما من المنطقية. والمنطقية من الاتجاهين (منطقية العقل البشري) ومنطقية (لغة الوصف HTML، و CSS). لذلك وزع العناصر منطقياً. جد اماكن ملائمة للعناصر المهمة.

انصحك هنا بالابتعاد عن الاساليب القديمة كلقوائم الطولية، وعداد الزوار .. تستطيع انت تخمين البقية. وانصحك ايضاً بالابتعاد عن المنحنيات التي لاتستطيع محاكاتها بـ CSS. أرسم المخطط لئلا تستخدم به صوراً للتصميم! الصور فقط للمحتوى ليست للتصميم.

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

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

أدوات لرسم المخطط:
هناك أدوات جميلة قمت بتجربتها وراقت لي حقيقتاً. هناك أدوات ورقية مثل Sneakpeekit وهناك ادوات رسم عبر الحاسوب جميلة مثل برامج الرسم adobe illustrator او adobe photoshop ولكنها مكلفة. هناك أداه قمت بتجريبها مؤخراً وأعجبتني حقاً وهي عن طريق المستعرض WireframePro أنصح بتجربتها.

تجربتي لرسم مخطط (يحاكي Arabia.io) مع بعض التعديلات:
لا اقصد اقتراح التعديلات انما لتجربة رسم المخطط.

ما رأيك ؟ جميل صح ؟ حتى أنا اراه كذلك (ملاحظة لبعض اصدقائي: يبدو رمادياً لانه مخطط ليس لأني احب اللون الرمادي).