الصور

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

مبادئ استخدام الصور

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

استخدام الصور

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

الصور الفوتوغرافية

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

الإطارات

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

استخدم قاعدة الأثلاث للتحكم في مواضع العناصر بالصور وتأكد من وضع العناصر ذات الخلفيات الموحدة في منتصف الصورة.

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

اقتصاص الصور

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

يتم قياس نسبة العرض إلى الارتفاع أيضًا من خلال إحدى ملحقات Tailwind CSS، والتي تضاف إلى نظام التصميم تلقائيًا. وبإمكانك التعرف أكثر عن نسبة العرض إلى الارتفاع وكيفية استخدامها مع الصور.

تصوير الأشخاص

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

صور الفريق

الفريق هو مجموعة من الأشخاص يجمعهم هدف واحد، وهو ما يجب أن ينعكس في اتساق العناصر مرئيًا. «الفريق (Team)» هو أحد الأقسام المتوفرة بنظام التصميم

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

ازدحام الصور

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

مقدمة الصورة وخلفيتها

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

استخدم الصور ذات العناصر البارزة، بحيث تشغل حوالي 50% من الصورة في المقدمة، وتجنب الخلفيات الضبابية أو مشوشة الملامح بهدف محاولة ضبط السياق العام للصورة

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

لون الصورة ودرجاتها وتباينها

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

النص على الصور

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

جودة الصورة

تلعب كل من درجة الدقة والوضوح والحجم دورًا في تحديد جودة الصورة.

استخدام مجموعات الصور

يمكن وصف مجموعات الصور (أو ` srcset `كما في لغة HTML كإحدى الخواص بها) بأنها الخاصية التي تحدد الصور المستخدمة بالمتصفحات المختلفة من خلال الاختيار التلقائي للمتصفح لأنسب نسخة للصورة وفقًا لحجم الشاشة ونسبة دقتها، وهو ما يعرف بالصور المتجاوبة.

يزداد حجم ملف الصور بازدياد حجمها، ولأنه لا توجد حاجة إلى تحميل، على سبيل المثال، صورة بعرض 2400 بكسل وحجم 20 ميجابايت على جهاز بسيط كالهاتف المحمول، تساعد خاصية srcset على التقليل من تردد الإنترنت المستخدم ووقت التحميل، حيث تعد سرعة تحميل الصفحة من العوامل التي تحدد ترتيب الصفحة على مواقع البحث.

<img 
srcset="gov-image-480w.jpg 480w, gov-image-800w.jpg 800w" 
sizes="(max-width: 600px) 480px, 800px" 
src="gov-image-800w.jpg" 
alt="The image to be used">

استخدام عنصر <picture> للصور

يساعد عنصر <picture> المتصفحات على عرض صورًا مختلفة وفقًا لكل جهاز ولا يقتصر على التغيير في أحجام الصور.

في هذا المثال، سيتم عرض إما الصورة ` setup-001_primary.jpg ` أو ` setup-001_primary-2x.jpg ` على أجهزة بحجم شاشة يزيد على 768 بكسل، أما الصورة التي ستظهر تلقائيًا في حالة عدم تحديد صورة معينة لنوع الجهاز أو حجمه، فستكون الصورة الموجودة بين علامتىّ <img> وستكون الأصغر من حيث الدقة ووقت التحميل.

<picture>
	<source media="(min-width:768px)" srcset="setup-001_primary.jpg, setup-001_primary-2x.jpg 2x">
	<source media="(min-width:465px)" srcset="setup-001_tablet.jpg">
	<img src="setup-001_mobile.jpg" alt="The default image" >
</picture>

الحاجة إلى شبكات توصيل المحتوى CDN

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

وينصح بشدة باستخدام شبكات توصيل المحتوى لتوزيع الأصول مثل الصور والفيديو لما توفره شبكات توصيل المحتوى مما يلي:

• السرعة
• الكفاءة
• القدرة على عرض الصور وفقًا لمواصفات كل جهاز

استخدام وصلات الصور

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

وتبلغ نسبة الضغط لصور WebP عادة 30% أكثر من تلك التي في JPEG وJPEG 2000 ولكن دون أي فارق في جودة الصورة.

• استخدم محولًا للصور لتغيير الصيغة إلى WebP مع تجنب صيغة JPEG (JPG)
• وعلى الصورة الأصلية بصيغة JPEG (JPG) أن تُحفظ داخل الخادم للاستخدام مع المتصفحات التي لا تدعم WebP

الصور المنشأة بالحاسوب (CGI)

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

ولكن يجب تسليط الضوء على استخدام الصور المنشأة بالحاسوب (CGI) للضرورة فقط.

الاستخدام الصحيح لصور الذكاء الاصطناعي

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

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

• تجنب استخدام صور الذكاء الاصطناعي التي تنافي القيم والمبادئ والعادات والتقاليد.
• تجنب عمل الصور بالذكاء الاصطناعي المنافية للواقع.
• تجنب استخدام صور الذكاء الاصطناعي غير ذات الصلة بالسياق.

استخدام الصور المنشأة بالحاسوب

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

الرسومات التوضيحية

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

ويجب أن تستخدم الرسومات التوضيحية كجزء من سياق أو نمط معين مع وجوب اختيار نمطًا معينًا للرسومات التوضيحية وتوحيده عبر جميع المنصات.