في الكاتب: و مدرجة تحت التنصيف wordpress, دروس.

بسم الله والحمدلله و الصلاة والسلام على سيدنا رسول الله صلى الله عليه و على آله و صحبه و سلم .

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

 

المراحل المحتملة لتصميم واجهة موقع للويب :

لا توجد طريقة واحدة يعمل بها مصممو الويب ولا توجد خطوات ثابته مُتّبعة. أنت تعمل بالطريقة التي تُمكِّنك من تقديم جودة عالية في أقل وقت ممكن و بأقل تكاليف.

 

ولأننا لن نقوم بالخطوة الأولى ، أردت أن أعرض نموذجا لعملية Sketching  لموقع.

مثال لسكيتش Sketch :

 

الصورة مأخوذة  من   markotaali

 

Moqups !

 

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

(!) رغم أن هذه الأداة تسمى Moqups و هي أقرب إلى Mockup فإني أعتبرها أداة للـ Wireframing . لا أريد أن يلتبس عليك الأمر!

 

واجهة الموقع:

 

moqups_home

واجهة الموقع بسيطة  وتنقسم إلى ثلاثة أقسام :

الجزء العلوي :
يحوي عدد من ادوات التحكم في منطقة العمل (الصفحات ، قياسات منطقة العمل ، ترتيب العناصر عموديا..الخ) و خصائص الحساب الشخصي .

الجزء الكبير في المنتصف:
من الواضح أن هذه هي منطقة العمل!

الجزء الأيسر :
يحوي العناصر التي من خلالها يتم بناء التخطيط. و تعمل بطريقة السحب والإسقاط Drag n Drop ، حيث يقوم المستخدم بسحب العنصر من القائمة اليسرى إلى منطقة العمل.

الآن إلى العمل!!..قمت بإعداد تخطيط سريع مبسط لموقع يتكون من عمودين .

وكانت النتيجة! :

لا يبدو سيئا أليس كذلك؟! ستتضح المعالم الرئيسية وسيتم إضافة المزيد من التفاصيل في الجزئية المتعلقة بالـ Mockup باستخدام الفوتوشوب إن شاء الله..

 

الخاتمة :

إن خطوات تصميم المواقع تحتلف من شخص لآخر فهنالك من يسبق خطوة التصميم الأولي بعمل سكيتش sketch أو مسودّة سريعة للموقع على الورق. وهنالك من يبدأ في كتابة الكود مباشرة ويستخدم طريقة Rapid Prototyping حيث يكون التخطيط الأولي هو تصميم حي مبسط للموقع ( صفحة ويب  : HTML ،CSS و Javascript ) يتم إضافة المزيد من التفاصيل إليه لاحقا ليكون هو المنتج النهائي ،  وهنالك الكثير من الأدوات المستخدمة في هذا النوع ولكن أشهرها TwitterBootstrap ، Foundation وربما Gumby .

الأدوات السابقة ليست فقط من أجل Rapid Prototyping و لكن يمكن ايضا استخدامها مع التخطيط المفصّل ( Mockup ) حيث يوفر بعضها ملفات جاهزة تحوي خطوط إرشادية و عناصر واجهة مستخدم جاهزة ( User Interface Elements) لرسم الموقع بالفوتوشوب أو بأي برنامج آخر حسب نوع الملف.

 

الفكرة من التصميم والتخطيط الأولي و المفصّل هو أن تضع المنتج النهائي نصب عينيك (Begin with end in mind) الشيء الذي يساعدك على المضي قدماً.

 

نواصل في الجزء إن شاء الله لنبدأ مرحلة التخطيط النهائي (Mockup) والذي يكون عادة باستخدام الفوتوشوب أو ما يوازيه من البرامج الأخرى التجارية مثل Fireworks أو Illustrator أو حتى المجانية مثل GIMP أو Inkscape والذي يجب تكون الصورة فيه قريبة من التصميم الفعلي للموقع بنسبة كبيرة +95%.

و صلى اللهم وسلم وبارك على سيدنا محمد وعلى آله آله وصحبه و سلم والحمدلله رب العالمين.

wdalhaj

مصمم و مطور ويب حر..يعشق شرب القهوة السوداء.. يمكنكم متابعته على التويتر [email protected]

More Posts

8 Responses to “تصميم قالب ووردبريس – الجزء 2 – التخطيط”

    • wdalhaj

      شكرا لمرورك..سنحاول إن شاء الله تنزيل باقي الدروس بأسرع وقت.

أضف تعليقاً

  • (لن يتم نشره)