كل ما تحتاج لمعرفته حول تصميم صورة البطل

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

لماذا يجب أن يكون لديك صورة بطل؟

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

ما الذي يجب تضمينه في تصميم صورة البطل؟

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

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

أفضل الممارسات لإنشاء صور البطل

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

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

عندما يتعلق الأمر بارتفاع وعرض صورة البطل ، فسوف يعتمد ذلك على التصميم المعين الذي لديك. ربما تريد أن تشغل صورتك البطل العرض الكامل للصفحة؟ إذا كان الأمر كذلك ، فاستخدم VW أو VH (مما يعني العرض الكامل أو الارتفاع الكامل لمنطقة منفذ العرض).

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

أوقات تحميل الصور

عند استخدام صور عالية الجودة ، تلعب أوقات التحميل دورًا مهمًا. عندما يرتفع وقت التحميل من 0.4 إلى 0.9 ثانية ، فإنه يؤدي إلى انخفاض حركة المرور بنسبة 20٪. لذا فإن بعض أفضل الممارسات التي يجب عليك اتباعها لتجنب ذلك هي:

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

مظاهرة لدفع الاستئناف

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

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

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

حافظ على الملاءمة

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

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

من أجل الحفاظ على الملاءمة ، ستحتاج إلى مراعاة ما يلي:

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

التركيز على الدعوة إلى العمل

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

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

اعرض أشخاصًا حقيقيين ، وليس أشخاصًا "مزيفين حقيقيين"

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

ضع في اعتبارك استخدام الرسوم التوضيحية التي لها طابع شخصي

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

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

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

صور بطل رهيبة للإلهام

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

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

Apple ، كما نعلم جميعًا ، هي علامة تجارية تدور حول تصميمها. على هذا النحو ، من المنطقي تمامًا بالنسبة لهم عرض منتجاتهم على صورهم البطل - بأسلوب أنيق.

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

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

كن بطلاً واحصل على تصميم صورة البطل الخاص بك بشكل صحيح

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

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