كيف تستخدم الصور في تصميم الموقع؟

نشرت: 2021-07-03

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


صور تصميم الموقع: 18 نصيحة

1. اختر الصور ذات الدقة الجيدة

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

صورة تظهر بدقة 1200x800 توضح كيفية استخدام الصور في تصميم المواقع

2. الحد من الصور الكبيرة الموجودة فوق الجزء المرئي من الصفحة

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

موقع إلكتروني به صورة كبيرة في الجزء المرئي من الصفحة

3. استخدام صور خالية من حقوق النشر

من المهم استخدام صور خالية من حقوق الملكية لأنك لا تريد أن تواجه أي مشكلات قانونية مع مالكي أي صور تستخدمها. لحسن الحظ ، هناك العديد من مواقع الويب حيث يمكنك تنزيل صور خالية من حقوق الملكية ، مثل Pixabay و Getrefe و Pexels. يمكنك أيضًا العثور على رسومات مجانية على مواقع الويب مثل Unsplash أو OpenClipart أو Gratisography.

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


4. تصغير حجم الملف

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

يتم تحويل ملف الصورة إلى حجم أصغر

5. ضع في اعتبارك الاستعانة بمصور فوتوغرافي أو رسام

سوف يمنحك المحترف صورًا ذات جودة أفضل ، والتي ستؤدي على الأرجح إلى تجربة لا تنسى للزائرين.

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

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

شخص يحمل كاميرا

6. استخدام أنواع مختلفة من الصور

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

هاتف به رسوم بيانية دائرية مختلفة

7. الاستفادة من التباين

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

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

شخص يرتدي سترة حمراء في الثلج يظهر تباينًا

8. كن مبدعا!

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

شخص مع الكاميرات في كل مكان حوله ثم يقسم الشاشة إلى قهوة في دائرة على طاولة

9. احذر من المبالغة في ذلك عند تحرير صورك

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

الصورة التي تم تحريرها

10. أضف بعض النص

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

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

وقع مع كتاب "افعل شيئًا إبداعيًا كل يوم" عليه

11. لا يتم إنشاء جميع الصور على قدم المساواة

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

شخص يرتدي ثوبًا مربعات بشعر أحمر يقف في حمام سباحة

12. لا تنسى اللون!

يمكن أن يؤدي اختيار الألوان التكميلية لصورك إلى خلق اهتمام بصري ، بينما يمكن أن تجعلها الألوان المتباينة تظهر بوضوح. أوصي بتجربة بعض المجموعات المختلفة للحصول على أفضل تأثير لموقعك.

الماكرون الوردي بجانب موزة صفراء مع أ. خلفية حمراء

13. استخدام الصور ذات المعنى

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

طفل مستلق على بساط منفوش

14. لا تستخدم صور المخزون لكل شيء

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

صور موظف WebCitz

15. استخدام الصور لرواية قصة

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

نوع الكاتب كتابة القصص مهمة

16. استخدم الصور لتفكيك كتل النص

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

في الأساس ، تمنح الصور القراء استراحة بصرية هم في أمس الحاجة إليها من المحتوى ، مما يمنحهم الوقت لاستيعاب ما قرأوه للتو.

شخص بالخارج على مقعد باستخدام iPad

17. استخدم الصور للتأكيد

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

ليمون باللون الأزرق من الخارج والأصفر من الداخل على خلفية زرقاء

18. استخدام الصور للتثقيف

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

ورقة مؤطرة مع قائمة عليها

استنتاج

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

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