خطوات تصميم موقع – هام جداً


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

  • هذه الخطوة إختيارية .. وتقوم بها فقط إن لم تكن حددت بعد شكل الموقع أو الواجهة في ذهنك .. أو لم يطلب منك العميل شكل محدد .. تصفح معارض التصميم على الإنترنت لساعة أو أكثر .. لا تبحث عن شيء تقلده ! .. لا طبعا .. ولكن أحيانا يختلط عشرات المواقع التي رأيتها في موقع واحد في ذهنك .. أو يعجبك جزء من هذا الموقع وجزء من ذاك الموقع .. أو يعجبك شيء تقوم في التحوير فيه واستخدامه لهدف أخر تماما !! .. في مرة من المرات وجدت صورة قديمة من فيلم لماكينة ميكانيكية .. ألهمتني بشكل تطبيق كنت أعمل عليه !
    في هذه الصفحة تجد 16 معرض لتصميمات الويب .. عدد كافي جدا للبحث عن الألهام  http://sixrevisions.com/web_design/1…r-inspiration
    حاول ألا يسرقك الوقت في تصفح هذه المواقع .. فهذا يحدث كثيرا !!  :)
    4 – الورقة البيضاء والقلم الرصاص


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

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

  • يفضل دائما أن يكون عندك ملف فوتوشوب فارغ تقوم بإعداده كقالب أولي .. هكذا كل مرة تبدأ في تصميم جديد تأخذ منه نسخة .. بدلا من فتح ملف جديد من البداية وتظبيط الإعدادات نفسها .. أي خطوات تجد نفسك تكررها في كل مرة تقوم بها بتصميم جديد .. حاول أن تفعلها كلها مرة واحدة وحفظها كقالب تأخذ منه نسخة في كل مرة تبدأ العمل .. هذا يوفر عليك بعض الوقت والخطوات المملة التي تكررها في كل مرة
    بالنسبة لي .. عندي ملف فوتوشوب بعرض 1100 بكسل وطول 1200 بكسل .. مع وجود علامات تحدد العرض الفعلي للموقع وهو 960 بكسل تبدأ من 70 وتنتهي عند 1030 .. وأيضا بالنسبة للطبقات قمت بعمل مجلدات جاهزة لأجزاء التصميم التي عادة ما تكون موجودة  في صفحات الويب مثل الهيدر والفوتر وغيرها .. أيضا أضيف مجلد للمحذوف استخدمه أثناء التصميم لأضع فيه أي جزء من التصميم أظن أنني لا أحتاجه الأن ولكن ربما أحتجته لاحقا .. هذا أفضل من أن أحذفه تماما ثم أجد نفسي بعد فترة في حاجة إليه
    دائما قم بتقسيم أجزاء الموقع أو الواجهة إلى مجلدات في بانل الطبقات فهذا أفضل من ناحية التنظيم وأيضا مفيد جدا في النقطة التالية
    قم بإضافة المحتويات تبعا للسكيتش الذي رسمته .. لكن دون بدأ التصميم الفعلي .. وكأنك تقوم بتنظيم أجزاء التصميم قبل بدأ العمل عليه .. ضع النصوص بدون التعديل عليها وبدون تأثيرات .. العناوين .. قم بقص الصور بالأحجام المناسبة التي ستسخدمها وضعها في مكانها المتوقع .. هكذا يكون عندك كل المحتويات دون الحاجة لتصغير برنامج الفوتوشوب لكي تضيف عنصر جديد كل فترة .. ضع محتويات كل جزء في مجلد منفصل كما شرحت سابقا
    7 – إبدأ التصميم

الأن قم بأخفاء جميع المجلدات الخاصة بجميع أجزاء التصميم وأظهر الجزء الذي ستبدأ العمل عليه فقط .. وربما تحتاج لإظهار أي اجزاء أخرى كي تنظر إليها أثناء تصميمك لهذا الجزء .. وهكذا حتى تنتهي من كل أجزاء الواجهة .
8 – التحسين ثم التحسين ثم التحسين ثم .. ثم .. ثم ..
هل إنتهيت من التصميم  ؟ ..  نعم!  .. لا أظن :)  .. أنت أنتهيت من الدورة الأولى والأهم من حياة التصميم .. تبقى الأن الخطوة التي تميز التصميم وتنقله لمستوى أخر .. ربما أنت ترى الأن التصميم رائع ولا يعلى عليه .. ولكن قم بالأتي
أغلق الفوتوشوب واذهب لتفعل شيء أخر ثم عد بعد ساعتين وأفتح التصميم وستكتشف أن التصميم ليس بالجمال الذي كنت تظنه حين أنتهيت منه وأن مازال هناك ما يمكن تحسينه ..
يفضل لو تبتعد عن جهاز الكمبيوتر تماما وتعود بعد فترة .. أو تذهب للنوم وتفحص ما صممته مرة أخرى بعد أن تستيقظ
إرسل التصميم لبعض أصدقائك سواء مصممين أو غير مصممين وأسالهم عن رأيهم وقم بالتحسين على الموقع على أساس ما قالوه لك .. إبتعد عن الأصدقاء الذين يبالغون في المدح أو الذم .. كلاهما يضرك !
إن لم يكن هذا ضد مصلحة العميل أو سياسة من تعمل له قم بوضع التصميم في أحد المنتديات المختصة وأطلب أرائهم .. تقبل الأراء بصدر رحب .. وتذكر أنه من شبه المستحيل أن تفعل شيء يعجب الجميع ويناسب أذواق الجميع .. ولا تحاول إرضاء كل الأذواق .. قم بالتعديل على حسب ما تراه أنت مناسب .
الخطوات السابقة ليست قانون سماوي يجب أن تسير عليه بالتفصيل .. بل هو إجتهاد شخصي ونصائح قرأتها وتعلمتها من أخرين .. يمكن أن يكون لك خطواتك الخاصة التي لا أظن أنها ستختلف كثيرا عن هذه الخطوات .. المهم هو أن يكون لديك خطوات تنظيمية تسير عليها لتوفر وقتك ومجهودك .. لا تكن عشوائيا !
منقول للأمانة من http://www.im-school.com/?p=155

About Joseph Guirguis

Egyptian Student At Faculty of Science, ASU, interested in Web Design & Web Development, loves CMS, Google, Microsoft, Social Networks, Blogging & Web Browsing.

Posted on April 10, 2011, in Web Design and tagged , , . Bookmark the permalink. 2 Comments.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: