مجموعة نصائح لتصميم أفضل النماذج المحاكية لمواقع الويب

يُعرَّف النموذج المحاكي Mockup لموقع الويب، بأنه التمثيل التصميمي والكلي لأداء الموقع ومظهره، وهو من أهم اختصاصات المصمم المحترف. يتكون النموذج المحاكي لصفحة الويب من بعض خصائص الموقع أو جميعها، ولكنه يختلف عن النموذج العملي Prototype الذي يوضح كيفية عمل الموقع وأدائه؛ في حين يصف التصميم المحاكي Mockups شكل الموقع وتصميمه، كما يساعد على فهم الشكل النهائي للموقع والعناصر التفاعلية فيه، ويتطلّب فهم أيّ تفصيل قد يطرأ على تصميم الموقع. لذلك فهو يُساعد مصمم الويب على فهم تصميم الموقع قبل إطلاقه.

إليك هذه النصائح التصميمية التي ستساعدك على تصميم النموذج المحاكي المثالي لموقعك.

جمع المعلومات من العميل

يجب عليك أن تطلب كافة المعلومات المتعلقة بنموذج الموقع من العميل، وأن تكون هذه المعلومات دقيقةً ومُفَصلة، مثل: التفاصيل المتعلقة بمظهر الموقع، والشعار، والألوان، والصور، ونظام التّنقُّل بين الصفحات. كما يجي عليك فهم حجم التفاعلية التي يريدها العميل في موقعه، وسمات الألوان التي يُفضّلها. انتبه إلى مكان الشعار على الصفحة، والصور الأساسية، ومكانها في النموذج المحاكي، وتذكّر أنّ طلبات العميل هي أهم أولويات العمل.

حدد الشريحة المستهدفة

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

صمم بإبداع

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

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

اختر الخطوط

يجب أن يكون الخط المُستَخدَم في الموقع بحجم مناسب ولون متناسق مع ألوان الموقع، كما يجب مراعاة وضوح الخط فيما يخص الخلفية. إذ يجب عليك مثلًا، تجنَّب استخدام لون أصفر للخلفية مع لون أحمر أو برتقالي للخط. تذكّر أن حجم الخط يجب أن يكون مناسبًا، وأنّ لون الخط يجب أن يكون موحّدًا في جميع صفحات الموقع بغضّ النظر عن نوع الخط. إذ عليك تجنب استخدام نوع الخط Times New Roman لكتابة محتوى الصفحة الأولى ثم استخدام خطوط Arial لكتابة محتوى الصفحة التالية مثلًا، كما يجب عليك الانتباه إلى ضرورة انسجام لون الخط ونوعه مع تصميم نموذج الموقع، وأن يكون الخط مناسبًا، ومقروءًا على كافة شاشات العرض.

اختر الصور المناسبة

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

تشذيب التصميم

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

اختر الأدوات المناسبة لتصميم نموذجك

يُعَدّ اختيارك لأدوات التصميم أساس الحصول على عمل إبداعي متكامل يُرضي العميل والمستخدِم، ومن أهم أدوات تصميم النماذج المبدئية للمواقع، ما يلي:

برنامج الفوتوشوب

هو برنامج لتصميم الرسوميات، حيث يعمل على أنظمة الماك والويندوز، ويُمكّنك من إنشاء تصاميم خلابة، أو التعديل على صور موجودة مسبقًا، وهو أحد أقوى برمجيات التعديل على الصور، وتصميم الرسوم التصويرية بأنواعها. توجد عدة إصدارات لبرنامج الفوتوشوب، منها: Photoshop CC، وPhotoshop Elements، وPhotoshop Lightroom.

برنامج Moqups

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

برنامج الإليستريتور

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

برنامج InVision

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

تحسين المحتوى البصري

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

إزالة العناصر غير المهمة

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

اختبار النموذج المحاكي

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

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

ترجمة وبتصرف للمقال  10tips to create perfect website mockups للكاتب Harsh Raval.