بسم الله الرحمن الرحيم

وبه نستعين

التصميم الجرافيكي / استراتيجيات تصميم مواقع الويب

Web Design Strategies

 

تطوير استراتيجية تصميم مواقع الويب

Developing a Web Design Strategy

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

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

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

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

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

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

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

 

مثال (1)

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

التخطيط والإنتاج

Planning and Production

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

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

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

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

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

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

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

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

أمثلة عن التخطيط والإنتاج بالمواقع الإلكترونية

Examples of Website Planning and Production

مثال (1)

صورة من موقع www.tate.org.uk، كما نلاحظ لا يمكننا أبدا نسيان أهمية التصميم الواضح والبسيط. يُعدّ التركيز على المشكلة الأساسية المراد حلّها وتوفير محتوى سهل الوصول إليه للجمهور هدفًا رئيسيًا في تصميم المواقع الإلكترونية. يجب أن تكون المعلومات سهلة الوصول إليها دون الحاجة إلى التنقل بين مستويات متعددة من القوائم. يُعدّ الترتيب الأبجدي من أقدم طرق تنظيم المعلومات، ولا يزال من أفضلها، كما هو موضح في هذه الصفحة من موقع معرض تيت Tate Gallery website.

مثال (2)

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

مثال (3)

صورة من موقع www.w3.org، وهو موقع اتحاد شبكة الويب العالمية (W3C) هو الهيئة الصناعية المسؤولة عن معايير تصميم مواقع الويب. على الرغم من قلة القضايا القانونية المتعلقة بالإنترنت التي رُفعت بموجب قوانين مكافحة التمييز ضد ذوي الإعاقة، إلا أنه يمكن استخدام إرشادات W3C بشأن إمكانية الوصول كمعيار مرجعي في حال اتهام أصحاب المواقع التجارية بالتقصير في خدمة المستخدمين ذوي الإعاقة. يُنصح العملاء بشدة بالإصرار على أن تتوافق جميع تصميمات المواقع مع هذه المعايير.

مثال (4)

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

 

أرجو أن تنال التدوينة إعجابكم وإلى لقاء قريب بإذن الله

 

المراجع والمصادر

الدليل الكامل للتصميم الجرافيكي الرقمي.

The Complete Guide to Digital Graphic Design

 

لمزيد من التواصل تابعونا على وسائل التواصل الاجتماعي

حساب "مدونة ألوان" على فيسبوك.

حساب "مدونة ألوان" على انستجرام.

حساب "مدونة ألوان" على تويتر.