-7 C
New York
Thursday, February 20, 2025

نصائحي لتصميم صور موقع الويب الرائع (مع Canva ، HubSpot ، + 3 أدوات أخرى)


لقد قمت بتصميم صور لمواقع الويب لمدة سبع سنوات حتى الآن ، لذلك صادفت العديد من الأدوات التي تجعل العملية بسيطة.

يقف مؤلف المدونة أمام جهاز كمبيوتر محمول يعرض شعار Canva

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

تنزيل مجاني: 77 أمثلة لتصميم الويب الرائع

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

جدول المحتويات

ما هي صور الموقع؟

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

أنواع صور الموقع

بالإضافة إلى أنواع الصور التي ذكرتها أعلاه ، فإن أنواعًا أخرى من صور موقع الويب هي:

الشعارات

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

تتضمن شركة Denim Firm Levi شعارها في شعار موقع الويب الخاص بها ، وبغض النظر عن المكان الذي تنقر عليه أو التمرير ، يظل الشعار حضورًا مستمرًا. يتيح لي شعار Levi ، كمستهلك ، أن يعرف أن الموقع الذي أزوره مشروعًا ، لذلك يمكنني أن أثق في أنني أشتري من العلامة التجارية الصحيحة.

لقطة شاشة لصفحة Levi's Landing ، والتي تظهر شعارها في الزاوية

مصدر

الرسوم البيانية

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

تعد الرسوم البيانية طريقة رائعة لتبسيط المفاهيم المعقدة على ما يبدو وجعلها أكثر هضمًا لجمهورك.

الرسم البياني يظهر كيفية التبرع بالشعر

مصدر

صور GIF

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

الاداءات ثلاثية الأبعاد

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

عرض ثلاثي الأبعاد لغرفة المعيشة

مصدر

نصائح لإنشاء صور موقع رائع

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

استخدام ألوان تنسيق.

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

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

لقطة شاشة من أداة Canva Color Wheel

مصدر

لن أعطيك دورة تدريبية كاملة في نظرية الألوان ، لكن يمكنني تحطيم ثلاثة أمثلة بسيطة من ألوان تنسيق لك لتضعها في الاعتبار.

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

لقطة شاشة شعار La Lakers

مصدر

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

انظر المثال أدناه. تشعر بالهدوء بعد؟

صورة خضراء وصفراء من الزهور

مصدر

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

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

لقطة شاشة لموقع الويب باستخدام الألوان الخضراء والأرجواني والبرتقالي

مصدر

استخدام ألوان العلامة التجارية.

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

لقطة شاشة من Target.com الصفحة المقصودة

مصدر

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

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

أخيرًا ، عندما يكون ذلك ممكنًا ، استخدم TEXT ALT ، والذي يصف محتوى صورتك ويساعد على زحف محرك البحث في فهمه. هذا يمكن أن يعزز رؤية موقعك وترتيبه.

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

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

عادةً ما أستخدم Canva لإنشاء الرسوم البيانية والصور المميزة. يعد تكامله مع HubSpot مفيدًا للغاية لأنني أستطيع الوصول إلى Canva مباشرة داخل HubSpot.

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

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

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

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

5 أدوات صور موقع الويب

لقد كنت أستخدم Canva منذ ما يقرب من 10 سنوات ، وهي أداة صور موقع الويب المفضلة لدي. ومع ذلك ، فقد وجدت أيضًا الأدوات التالية مفيدة ، وقد تكون أيضًا.

1

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

في تجربتي ، فإن معظم المساهمين في Unsplash هم المصورين المحترفين سخية بما يكفي لتوفير صور رائعة وفريدة من نوعها مجانية لاستخدامها بموجب ترخيص Unsplash.

لقطة شاشة لموقع Unsplash يعرض مجموعة متنوعة من صور الحفلات الموسيقية

مصدر

2

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

لقطة شاشة من صفحة Pixlr المقصودة

مصدر

3. مولد صورة AI HubSpot

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

لقطة شاشة لمولد صورة HubSpot AI

مصدر

4. Pexels

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

صفحة لقطة الشاشة Pexel المقصودة

مصدر

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

كل ما تحتاجه هو الأدوات المناسبة ، والصبر القليل ، والرغبة في التجربة لمعرفة ما ينجح. حظ سعيد!

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles