خطوات تصميم واجهة رسومية

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

1 – حدد محتويات الواجهة

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


2 – حدد الإستايل الذي تنوي إستخدامه في التصميم

هل تنوي عمل تصميم عملي مناسب لشركات البيزنس .. أم ستايل هاي – تك .. أم ستايل كارتوني لموقع أطفال .. لو كان الموقع موجه للفنانين إذن ربما تحتاج ستايل أخر يناسب ذوقهم .. ربما هو موقع للفوتغرافيا .. او لعب أطفال .. أو حديد وصلب .. أو موقع مشاركة .. حدد ستايل تنوي العمل به .. بعدما تحدد الإستايل في ذهنك إستخدم هذا للبحث عن الإلهام في الخطوة التالية

3 – إبحث عن الإلهام قبل البدأ في التصميم

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


4 – الورقة البيضاء والقلم الرصاص

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

5 -تجميع ما ستحتاجه من صور وأيقونات ونصوص في مجلد واحد

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


6 – إفتح الفوتوشوب !

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


7 – إبدأ التصميم



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


8 – التحسين ثم التحسين ثم التحسين ثم .. ثم .. ثم ..


هل إنتهيت من التصميم  ؟ ..  نعم!  .. لا أظن :)  .. أنت أنتهيت من الدورة الأولى والأهم من حياة التصميم .. تبقى الأن الخطوة التي تميز التصميم وتنقله لمستوى أخر .. ربما أنت ترى الأن التصميم رائع ولا يعلى عليه .. ولكن قم بالأتي

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

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


  1. Prof.Rslan
    17 فبراير 2010 - 11:22 ص

    جزاك الله خير على المعلومات القيمة دى فعلا كل مصمم لازم يكون ماشى بنظام او طريقة لان العشوائية بترمى فى اى مكان ممكن مرة يضرب الحظ و تبقى جميلة ولكن فى اكثر الاحيان هتبقى غير مقبولة شكرااااا لك يا فنان

  2. ramy
    17 فبراير 2010 - 6:30 م

    الله عليك الله عليك الله عليك……و الله انت برنس الكلام ده مفيد جدا جدا جدا انا بصراحة في حاجات منها بعملها لكن فعلا بتفتح عنينا على حاجات بسيطة لكنها مهمة جدا
    جزاك الله كل خير

  3. doby
    17 فبراير 2010 - 7:31 م

    استاذ محمد فعلا كلامك صحيح 100 %
    والحاجات دى فعلا بتحصلى وبالذات حكايه انى بعمل تصميم واسيبه فتره خالص ومش اشوفه
    وبعدين اتفرج تانى احس ناقصه لمسات كمان فبعملها
    فعلا الكلام ده صحيح وبيحصل لينا كلنا شكرا ليك جدا قصرت المسافات على ناس كتير بالنصائح الغاليه دى .. :)

  4. حسن عبد المنعم
    18 فبراير 2010 - 5:46 ص

    جزاك الله خير على هذه النصائح الغالية يا استاذنا الغالي و أسأل الله ان يجعل هذه الكلمات في ميزان حسناتك … حقيقي قلبك كبييييير
    في الأكشن خايف علينا لا الكومبايلر يشتمنا
    و في التصميم خايف لا العميل يشتمنا

  5. ابراهيم محمود
    18 فبراير 2010 - 10:55 ص

    رائع اكثر من رائع

  6. محمد
    18 فبراير 2010 - 11:23 ص

    جزاك الله خيرا على الخطوات المنهجية
    حقيقة رائع جدا

  7. أنور العميسي
    2 أبريل 2010 - 11:13 م

    اقتراح بسيط :
    بالنسبة للخطوة الأولى لو يجعل جميع الأسئلة والملاحظات والاقتراحات والطلبات وأي تفاصيل أخرى لو يجعل لها استمارة تعبأ من قبل العميل لكانت أفضل وأظن أنها ستكون مريحة للعميل وللمصمم

  8. يوسف مثنى مهدي الخظمي
    5 أبريل 2010 - 12:41 م

    نشكر جميع الجهود التي بذلت وجميع الاراء والاقتراحات التي تفيد المصمم وبالاخص المبتدئين ونشكر جميع المعلمين وكذا المعلم الاخ انور العميسي

  9. moataz hussein
    9 أبريل 2010 - 12:07 م

    It’s just awesome

  10. bigart09
    22 مايو 2010 - 11:04 ص

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

  11. عمرو
    5 يوليو 2010 - 9:22 ص

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

    بصراحه انا منبهر جدا جدا

    فعلا حضرتك انسان جميل يحب يخدم الناس

    قلما وجدنا بيننا مثل حضرتك

    لو كل واحد علم غيره لكنا الان افضل بكثير

    جعلك الله زخرا للاسلام والمسلمين

    واذكركم بقول الرسول الكريم ( خيركم من تعلم العلم وعلمه )

    جزاكم الله خيرا

  12. الحارثي
    10 يوليو 2010 - 1:15 ص

    ماهو البرنامج الذي تستخدمه لاختيار الالوان …. الاحظ ان الالوان عندك لامعه وبراقه …

    بندر الحارثي

  13. nefrmtity
    1 أغسطس 2010 - 12:26 ص

    جزاكم الله خيرا بجد موضوع حلو جدا ومفيد بنسبه 100%
    لان الاصعب من انك تتعلم البرامج سواء في مجال الويب او الجرافيكس انك تكتسب الخبره من حد في المجال فعلا ومعلوماته فعلا توجهك صح

  14. غير معروف
    12 أغسطس 2010 - 10:21 م

    […] […]

  15. hussien
    21 أغسطس 2010 - 1:24 م

    جزاك الله خيراً على هذا المجهود الرائع فجعلك الله عوناً لنا لنكون عوناً لغيرنا

  16. حسين عبده
    24 سبتمبر 2010 - 9:56 م

    انت إنسان رائع

  17. Ismail adb alhussein
    21 نوفمبر 2010 - 5:41 ص

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

  18. hassan
    24 نوفمبر 2010 - 7:32 م

    بارك اله فيك على النصائح , لقد لاحظت خلال تربصي أن المسؤول لم تعجبه طريقتي في العمل إذ كنت مشتتا في تنظيم عملي مع أنه أعجب بالعمل الذي قمت به , أعتقد أنه لو كنت منظما أكثر لكنت أشتغل الآن معه ,

  19. خطوات تصميم موقع – هام جداً « Joseph Guirguis
    11 أبريل 2011 - 1:02 ص

    […] منقول للأمانة من http://www.im-school.com/?p=155 […]

  20. فهد
    21 ديسمبر 2011 - 10:20 م

    مشكور أستاذ
    وبجد اتبعت الخطوات و أنجزت تصميم رائع
    وبوقت أقل بعشرة أضعاف لو كنت اشتغلت بالطريقة العشوائية

  21. سياف ضياء
    22 فبراير 2012 - 3:06 م

    شكرا جزيلا لك يا باشمهندس علي،

  22. webmanway
    2 أكتوبر 2012 - 9:42 م

    أشكرك يا أستاذ محمد علي لقد كان درساً مفيداً حقاً بالنسبة لي و آتخدته الآن منهاجاً في تصميماتي جزاك الله خيراً على هذا العمل المتقن

  23. ….
    25 نوفمبر 2013 - 4:45 م

    اشكرك على ابداعك الراقي …
    اتمنى مساعدتي على تصميم نظام محوسب للارشاد الأكاديمي
    طاب مساء الجميع …….