كيف توفّر وقتك وجهدك بتصميم النماذج الأوليّة

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

مثال على نموذج بسيط صمّم باستخدام ورقة وقلم

مثال على نموذج بسيط صمّم باستخدام ورقة وقلم

هناك عدة فوائد لاستخدام النماذج منها:

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

بشكل عام، يمكننا تصنيف النماذج الى نوعين:

  • نماذج منخفضة الدقّة (low-fidelity prototypes): وهي النماذج التي تصممّ عادة بشكل سريع باستخدام ورقة وقلم، وهي ليست بالضرورة مطابقة للتصميم النهائي، بل تمثّل فكرته وكيفية عمله فقط. استخدم النماذج منخفضة الدقة عند رغبتك في شرح ومناقشة فكرة التصميم وتقسيم المحتوى.
  • نماذج عالية الدقّة (high-fidelity prototypes): وهي النماذج التي تصمّم باستخدام برامج الكمبيوتر (مثل Axure RP و Dreamweaver) وتشمل الكثير من تفاصيل واجهة الموقع لتحاكي قدر الامكان التصميم النهائي للموقع، وتستطيع ان رغبت تمكين المستخدم من التفاعل مع العناصر الموجودة به من أزرار وروابط وما الى ذلك كما لو كان يستخدم موقعاً حقيقياً (حتى يعرف كيف سيعمل الموقع عندما ينتهي). استخدم النماذج عالية الدقّة عند رغبتك في عرض الموقع على شخص يشاركك القرار في الموقع (عميل، مدير، مستثمر…الخ) قبل الانتقال الى تركيبه وبرمجته، أو لاستخدام النموذج كمرجع لفريق تطوير الموقع.

    مثال على نموذج بسيط صمّم باستخدام ورقة وقلم

    مثال على نموذج عالي الدقّه مصمّم باستخدام برنامج Axure RP

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

اذا كانت لديك أية اسئلة حول هذا الموضوع، فلا تتردّد بكتابتها في التعليقات.

  1. 13 تعليقات على “كيف توفّر وقتك وجهدك بتصميم النماذج الأوليّة”

  2. فيصل الصويمل - مارس 20, 2010

    بالفعل خطومة مهمه لتأسيس محتوى وواجهه الموقع

  3. الصقر - مارس 20, 2010

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

  4. أحمد فارس - مارس 20, 2010

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

  5. إلياس - مارس 20, 2010

    قد تبدوا للوهلة الأولى مضيعة للوقت لكنها عكس ذلك فأنت تقي نفسك من الطلبات الغير منتهية من قبل الزبون من تعديلات إلى الإضافات.

  6. عبدالرحمن إسحاق - مارس 20, 2010

    كلامك صحيح وقد جربته آخر مرة، فتصميم النماذج في البداية يسهل عليك باقي المشوار ويوفر عليك الكثير.

    pencil sketing هي إحدى الإضافات التي لا أستغني عنها في فايرفوكس، وتُساعدك في عمل النماذج بسهولة.

    شكراً

  7. محمد - مارس 20, 2010

    كلامك صحيح

    فعلا كت أتناقش مع صديق لى حول هذه النقطة مدى أهميتها

    فهى فعلا تختصر الكثييير من الوقت والجهد

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

  8. MySofTDS - مارس 20, 2010

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

  9. نوفه - مارس 21, 2010

    جميل جدً هذا ما أفعله حينما رغبت بإمتلاك موقعي

    الخاص هذه الطريقة جدًا نافعه و توفر الوقت

    شكرًا جزيلًا لك

  10. Yazeed - مارس 26, 2010

    السلام عليكم

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

    طرح موفق وتقبل تحياتي

  11. منتديات - مارس 27, 2010

    قد تبدوا للوهلة الأولى مضيعة للوقت لكنها عكس ذلك
    كلام صح

  12. الرياض - مارس 29, 2010

    مدونة جميلة

    بالتوفيق :)

    تحياتى

    http://www.elryad.com

  13. Ahmed Moharram - أبريل 11, 2010

    منذ فترة ليست بالبعيدة , كان كثير من المحترفين ليعتبروا هذا الموضوع من نافلة الديزاين :)
    و لكن اليوم أصبح بالفعل لا غنى عنه
    أود أن أضيف أن من أشهر الأدوات حاليا في هذا المجال
    Adobe Flash catalyst
    http://labs.adobe.com/technologies/flashcatalyst/

    كما أود الاشارة إلى مقال آخر أكثر من رائع يعتبر مرجع لأدوات الوايرفرايمنج

    http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/

  14. قلب العقرب - أغسطس 11, 2010

    شكرا، وأعجبني كثيرا اللينك الذي قدمه الأخ أحمد محرم
    http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files

أكتب تعليقاً