غالبًا ما يستخدم منشئو الويب صور Hero لتحية زوار موقع الويب الخاص بهم بتنسيق جذاب.
إذا تساءلت يومًا " ما هي صورة البطل؟ "، أنت في المكان الصحيح. في هذه المقالة سوف نلقي نظرة على الموضوع وكيف يمكنك إنشاء صور بطل جميلة بتأثيرات بصرية قوية.
صورة البطل هي المصطلح الذي يستخدمه منشئو الويب لوصف المحتوى كبير الحجم في أعلى صفحة الويب.
يتمثل دور صورة البطل في الترحيب بزائرك بمجرد أن يلتقي بشركتك أو منظمة. توفر وفرة أنواع صور البطل في مجموعة أدوات تأليف الويب العديد من الأسباب لتضمين صورة بطل في موقع الويب الخاص بك.
دعونا نفهم المزايا الرئيسية للقيام بذلك ، ولماذا؟
ما هي صورة البطل؟
احتضانًا لفضيلة "الانطباع الأول الجيد" ، تتميز صور البطل عادةً بواحدة أو أكثر من الخصائص التالية:
- صورة عالية الجودة
- فيديو آسر
- شريط تمرير الصورة أو دائري الوسائط المتعددة
- الرسوم التوضيحية المتحركة أو الثابتة
- الرؤوس والأوصاف بجانب أو أمام المحتوى المرئي
من حيث التصميم ، تتضمن تفاصيل التصميم الشائعة التي ستراها مطبقة على صور البطل ما يلي:
- صور الخلفية أو مقاطع الفيديو مع تراكبات الخلفية
- تحديد المواقع الثابتة أو اللزجة
- تؤثر الإشارة على التغيير في الشفافية أو التراكب
- عناصر التباين التي تميز الصورة عن العنوان أعلاه أو المحتوى اللاحق
إن حداثة صور البطل في تصميم الويب هي أنك تعمل من ناحية مع مساحة محددة ومحددة للغاية على صفحة الويب. من ناحية أخرى ، فإن اختيارات الأسلوب والتأثيرات والتقنيات التي يجب استخدامها عند تصميم هذا الجزء من محتوى صفحتك لا حصر لها على الإطلاق.
لماذا يجب عليك استخدام صورة البطل؟
عندما يكون تصميم ووظائف صورتك البطل ذات مستوى عالٍ ، فإنك تحقق تلقائيًا مصداقية المستخدم وثقته. غالبًا ما تمثل صورة البطل الخاصة بك ومحتوى البطل المحيط بها فرصتك الأولى لنقل نقطة البيع الفريدة الخاصة بك منظمة ونقطة الاتصال الرئيسية للمستخدم لإجراء التحويل.
عندما تتطلع إلى إطلاق سلوكيات معينة للمستخدم ، فإن أفضل طريقة للبدء هي الحصول على صورة بطل قوية من الدرجة الأولى تترك انطباعًا أوليًا قويًا على زوارك.
يمكنك ترك انطباع أول دائم
الانطباعات الأولى مهمة في العديد من مجالات الحياة ، ولكن بشكل خاص عندما يتعلق الأمر بكيفية ارتباط المستخدمين بجماليات الموقع.
نتائج الخبراء في التفاعل بين الإنسان والآلة (HCI) والتصور في بحث جوجل يشهد على تأثير صور البطل على نجاح موقع على شبكة الإنترنت:
هذه الدراسة، " دور التعقيد البصري والنموذج الأولي في الانطباعات الأولى للموقع : العمل على فهم الأحكام الجمالية "، ويدرس كيفية تأثير التعقيد البصري والنموذج الأولي على تصميم موقع الويب والانطباعات الأولى لمستخدميه.
أظهر المؤلفون 119 لقطة شاشة فعلية من موقع الويب للمشاركين في الدراسة ووجدوا أن التعقيد البصري والنموذج الأولي يؤثران على الإدراك الجمالي للمستخدم في أول 50 صورة من المعرض ، وأحيانًا في غضون 17 مللي ثانية.
بصفتنا منشئين على الويب ، فإن استنتاجنا بسيط للغاية: صورة البطل التي نختارها والطريقة التي نقدمها بها على صفحتنا تؤثر على مشاعر المستخدم وسلوكه بطريقة رئيسية.
ستحصل على أقصى استفادة من المحتوى الخاص بك في الجزء المرئي من الصفحة
يمكن تعريف قسم "الجزء المرئي من الصفحة" لصفحة الويب بعبارات بسيطة: المحتوى الذي يملأ شاشتك / يظهر فوق الحد السفلي لنافذة متصفح الويب بعد تحميل صفحتك. إذا كان المحتوى يتطلب التمرير حتى تتم رؤيته ، فهذا يعني أنه موجود في "الجزء المرئي من الصفحة".
تعود أصول مفهوم "الجزء المرئي من الصفحة" إلى تصميم المطبوعات والنشر ، قبل وقت طويل من عصر الوسائط الرقمية. نعلم جميعًا ما يشبه أن نلاحظ شيئًا ما على الفور في النصف العلوي من الصفحة الأولى ، ومن الآمن أن نقول إن المحتوى في الصفحة الأولى غالبًا ما يجعلنا نقرر ما إذا كنا سنشتري أم لا. في كشك بيع الصحف.
هذا هو بالضبط السبب في أن المحتوى الخاص بك في الجزء المرئي من الصفحة يمكن أن يكون عامل كسر رئيسي في نجاح موقع الويب الخاص بك.
ماذا نعني؟
إذا شعر زائر موقع الويب بالارتباك بسبب المحتوى والصور في الجزء المرئي من الصفحة ، فسوف يغادر موقع الويب الخاص بك بسرعة. إذا كانت صورة البطل الخاصة بك وبيئته في الجزء المرئي من الصفحة واضحة وجذابة وتمثل بشكل جيد عرض القيمة الخاص بك ، فسيكون أكثر ميلًا للبقاء.
في النهاية ، كلما استثمرت أكثر في صورة ومحتوى قسم البطل ، قل احتمال قيام المستخدمين بخروج سريع.
لا تنس التصميم سريع الاستجابة
ضع في اعتبارك أن موقع انحناء الشاشة يخضع لحجم شاشة الجهاز. يعد هذا اعتبارًا مهمًا في التصميم سريع الاستجابة ، حيث يجب تخصيص محتوى الجزء المرئي من الصفحة وتكوينه بطريقة تنطبق على أحجام أجهزة متعددة.
غالبًا ما يستخدم مصممو الويب والمطورون نقاط توقف خاصة بالجهاز لضمان هذه الاستجابة. يمنحك هذا تحكمًا كاملاً في قابلية تصميم موقع الويب الخاص بك على التكيف مع أحجام الشاشات ذات الصلة وتجنب المظهر أو التأثير المخترق لصورتك البطل.
اذكر عرض القيمة الخاص بك دون تحميل معلومات زائدة
قد تكون على دراية بمفهوم "الحمل الزائد للمعلوماتفي تصميم الموقع و تجربة المستخدم : نريد تجنب استخدام الكثير من المحتوى ، وخاصة المحتوى المكتوب ، عند تمثيل علامتنا التجارية وقيمة أعمالنا.
بهذا المعنى ، فإن استخدام صورة أو رسم توضيحي أو مقطع فيديو يساوي 1 كلمة. سيؤدي ضبط صور العلامة التجارية الفعالة إلى التقاط قصتك بالكامل في وسيط مرئي واحد. بدلاً من التعبير اللفظي عن قصتك وعرض علامتك التجارية ، قد تتمكن من تخفيف العبء المعرفي على المستخدم بطريقة بسيطة وسهلة الاستخدام.
لقطة الشاشة أعلاه مأخوذة من ميلبروك للإنشاءات، شركة إنشاءات مقرها بيرث متخصصة في "البناء السكني بتشطيبات راقية والاهتمام بالتفاصيل". بالنسبة إلى موقع ويب Elementor الخاص بهم ، فإن الصورة الرئيسية على الصفحة الرئيسية تستخدم بشكل مثالي واجهة "الجزء المرئي من الصفحة". إن الصورة الواضحة اللافتة للنظر لمنزل حديث سعيد ومسبح خارجي ينطلق من المشاعر الإيجابية المريحة.
وفي خطوة أخرى إلى الأمام ، تشير اختيارات نمط صورة الخلفية ذات الارتفاع الكامل وحجم "البطانية" إلى براعة الشركة القوية في إنشاء عقارات سكنية فاخرة. عرض القيمة واضح مثل مياه حمامات السباحة ، ويستوعب المستخدمون بشكل مريح جميع المعلومات الضرورية.
يمكن أن تساعد صور بطلك في تحويل العملاء المتوقعين
تعتبر نقاط الاتصال الجذابة والمرئية مكونًا أساسيًا لتدفق مستخدم التحويل وإعادة الإنتاج. هذا هو السبب في أن العلاقة بين دعوة قسم البطل إلى العمل وصورة البطل نفسها يمكن أن تؤدي إلى أهداف بناء موقع الويب الخاص بك أو تحطمها.
دع نصوص CTA الخاصة بك تقول " إشترك الآن "" اقرأ المزيد "" اتصل بنا »، إلخ ، يجب تنسيق صورتك البطل بشفافية على جميع الجبهات: الرؤية ، والرسائل ، ونظام الألوان ، والمظهر ، وما إلى ذلك.
تستند المحادثات الموثوقة والفعالة مع العملاء المحتملين إلى جو مريح وطبيعي ؛ الصور الجذابة من الناحية المرئية هي أفضل طريقة لتحقيق ذلك.
هذا هو بالضبط ما نراه على موقع Elementor الذي تم إنشاؤه بواسطة كاريكاتير المحكمة الخاصة بلبنان، فريق من فناني الكاريكاتير الذين يقدمون خدمات ترفيهية في المناسبات. يصور عنوان الرسوم المتحركة (نص البطل) العملاء السعداء في صورهم البطل ، ويظهر ما يقدمه فنانو الرسوم المتحركة لكل شخص.
لذلك ، بمجرد أن تشمر عن سواعدك وتبدأ في الخوض في الجوانب العملية ، ما الذي يدخل في عملية تحديد نوع صورة البطل المراد استخدامها؟
دعنا نستكشف الأنواع الأربعة المختلفة لصور البطل وكيفية تقييم أي منها سيكون الأنسب لموقعك على الويب.
# 1 صورة بطل المنتج
الصورة الرئيسية للمنتج هي صورة عالية كبيرة تعريف من منتج العلامة التجارية. يمكن تقديم هذه الصور بشكل ثابت أو متحرك / أثناء العمل ، طالما أنها تسمح بتصور عرض القيمة للمنتج.
يمكن أن تتضمن الطرق الشائعة بين مصممي الويب لعرض صور أبطال منتجاتهم وتخصيصها ما يلي:
- مثال مفصل / لقطة لمنتج فردي ، كما نرى أعلاه على موقع الشركة اشتراك Australian Avo Lover.
- لقطة شاشة لواجهة منتج رقمية ، مثل لوحة أجهزة القياس.
عادة ما توجد صور بطل المنتج على مواقع الويب الخاصة بـالتجارة الإلكترونية (ولكن ليس حصريا). يتوقع المتسوقون المحتملون رؤية أمثلة على المنتجات الفعلية ، مما يدعم اتخاذ قرارات مستنيرة حول ملاءمة المتجر لاحتياجات التسوق الخاصة بهم.
استخدمت Avo lover Elementor لإنشاء موقع التجارة الإلكترونية الخاص بهم ، والذي يستخدمه عملاؤهم لشراء اشتراكات أسبوعية من الأفوكادو الطازج الذي يتم تسليمه إلى عتبة منازلهم.
قاعدة عملاء Avo lover هي سوق متخصصة في منطقة اهتمام محددة بدقة ، لذا فإن اختيارهم لصورة المنتج البطل منطقي تمامًا. المشتركون المحتملون هم من عشاق الأفوكادو. رؤية صورة مقربة ومعقدة للمنتجات هو بالضبط ما يتطلعون لرؤيته.
أفضل الممارسات:
- استثمر في جودة صور الخلفية
سواء كانت صورة الخلفية الخاصة بك عبارة عن صورة فوتوغرافية ، أو مقطع فيديو ، أو رسم توضيحي ، وما إلى ذلك ، يجب أن يكون ملف الصورة خفيفًا قدر الإمكان ، وبدقة فائقة الوضوح.
- انتبه لمستويات التباين
إذا أضفت نصًا أمام صورة قسم البطل (أو أي مكون من أي نوع) ، فتأكد من أن التباين بين عناصر موقع الويب قوي ويسهل رؤيته. هذا هو المكان الذي يمكن أن تكون فيه تراكبات الخلفية وتأثيرات المرشح مفيدة للغاية.
# 2 صورة العميل البطل
يتخذ النوع التالي من الصور البطل التي تستخدمها الشركات عبر الإنترنت نهجًا بديلاً لإظهار قيمتها المضافة: إظهار العميل باستخدام المنتج. هذا المنظور هو طريقة استراتيجية للتعاطف مع زوارك ، مما يدل بإيجاز على أنك تفهم نقطة الألم الخاصة بهم ويمكن أن تلبي احتياجاتهم.
تم التقاط مقطع الفيديو أعلاه من موقع Elementor الذي تم إنشاؤه بواسطة الكسندر فيشر مدرب شخصي في Stuggart يقدم مجموعة من الخدمات المتعلقة بالصحة واللياقة البدنية.
تُظهر صورة عميل ألكسندر البطل أكثر من مجرد عميل راضٍ يتمتع بنمط حياة صحي ومناسب. تأخذ الصورة البطل خطوة إلى الأمام من خلال عرض مقطع فيديو يعرض علاقة عميله بأحبائه والتواصل معهم.
أفضل الممارسات:
- شارك حالات الاستخدام وتجربة العميل
ميّز منتجك من خلال إظهار حالة الاستخدام الأكثر شيوعًا. توضح الصورة التي تنقل أهداف عملك وقيمته كيف سيستفيد الزائر من عرضك الفريد.
- ارتبط بجمهورك المستهدف
تأكد من احتساب جمهورك المستهدف عند اختيار نوع الشخص الذي تريد عرضه في صورتك. اختر صورة تنقل فهمك للمجال وقدرتك على إسعاد عملائك.
# 3 صورة البطل المؤسس
صورة البطل المؤسس هي صورة كبيرة لمؤسس صاحب العمل ، توضع في قسم البطل لتحية زائر الموقع.
غالبًا ما تُستخدم صور البطل المؤسس في مواقع الويب الخاصة بالمحفظة لأصحاب الأعمال الحرة أو أصحاب الأعمال مثل عالم النفس أو فنان الماكياج أو الموسيقي كما هو موضح موقع Elementor بواسطة ياسمين قابيل أعلاه.
أعظم فضيلة لصورة البطل المؤسس هي أنها تضفي وجهاً على الاسم. يربط زائر الموقع بمزود الخدمة ، مما يخلق ديناميكية ممتعة بين الشخصين.
يجب التعامل مع اختيار الصور لصورة البطل المؤسس بعناية. مع الكثير من الخيارات للاختيار من بينها ، والتي تتلخص في:
ما الذي سينقل رسالة علامتك التجارية بأقوى طريقة ممكنة؟
هل هذه صورة للمؤسس ينظر مباشرة إلى الكاميرا ويبتسم ، أو ربما ينظر في اتجاه مختلف؟
أم أن الصورة الصريحة لصاحب العمل المجتهد هي الأنسب؟
أفضل الممارسات:
- انتبه إلى الحجم والأبعاد
استخدم صورة (أو فيديو) واضحة جيدة الحجم تعرض للزائرين التفاصيل الدقيقة التي يحتاجون إلى رؤيتها. إذا لزم الأمر ، يمكنك التركيز على مناطق أكبر من صورك عن طريق اقتصاصها وإزالة المحتوى الأقل أهمية.
- ركز على ما يجب أن تنقله صورتك
يجب أن يكون دور الخلفية هو التركيز على الشخص الذي أمامها ، وليس العكس. ستُظهر صور البطل المؤسس الأكثر تأثيرًا صاحب العمل المبتسم ، مما يدل على شغفه بإبقاء العملاء سعداء.
# 4 صورة البطل غير السياقية
صور البطل غير السياقية هي ، كما يوحي الاسم ، تسلسلات تعرض شيئًا ما يبدو أنه "غير مرتبط" بمالك المنتج أو الشركة. الغرض من صورة البطل غير السياقية هو ترك انطباع للزائر من خلال الارتباط المرئي أو رسالة مموهة. يُظهر عرض الصورة غير السياقية للمستخدم ما هو المنتج أو العلامة التجارية ، ولكن بطريقة غير مباشرة.
يتم استخدام هذه التقنية ، على سبيل المثال ، في المثال أعلاه من موقع ويب Elementor الذي أنشأته شركة التسويق الرقمي تقنية AP ، مقرها في أوكلاهوما. يستخدم موقع الشركة على الإنترنت صورة خلفية واسعة وواضحة تُظهر زاوية فريدة لناطحات السحاب في أوكلاهوما سيتي.
تمثل هذه الصورة القيمة المقترحة للشركة ، كما هو مذكور في نص الموقع الرئيسي: قم ببناء عملك وشاهده ينمو ، بارتفاع أطول أبراج المكاتب في المدينة.
بمجرد أن ترى العين البشرية الهياكل المادية التي تهيمن على السماء ، فإنها تدرك أن هؤلاء المتخصصين في التسويق يعملون على إطلاق الأعمال على الأرض ، إلى القمة.
أفضل الممارسات:
- تأكد من أن الزوار يفهمون سبب أهمية الصورة
على الرغم من أنك لا تعرض صورة مباشرة لمنتجك نفسه ، تأكد من أن ربط قيمة منتجك بصورتك البطل غير السياقية لا يزال من السهل التعرف عليه. يجب ألا يحتاج المستخدمون إلى قضاء الوقت في التفكير في مدى ملاءمته.
- قم بعمل رابط واضح بين صورة البطل والنص البطل
يجب أن يرتبط النص الرئيسي الذي تضعه بالاقتران مع صورتك مباشرة بمحتواها المرئي. إنها ضرورة ، حتى لو تطلبت عدة تكرارات للنص واختيار الصياغة.
- قم بإنشاء مخطط تصميم متماسك
يجب أن تنسق الألوان التي تختارها لنصوص الأزرار والخلفيات أو الرؤوس أو الأوصاف مع صورة البطل أو العمل الفني. ينطبق هذا أيضًا على اللهجات القابلة للنقر على موقع الويب الخاص بك:
عناصر قائمة التنقل والشعار وما إلى ذلك ...
نعلم جميعًا مدى أهمية اللغة المرئية المتسقة لمكانة موقعنا على الويب ووجود علامتنا التجارية ومصداقيتنا المهنية. هذا هو المكان الذي يمكن أن تكون فيه أدلة أسلوب التصميم مفيدة حقًا ، لا سيما في التأكد من أن صور البطل الخاصة بك تتماشى مع تصميم موقع الويب الخاص بك.
كيف تختبر صورة بطلك: الأساليب التي نحبها
بمجرد أن تبدأ في تجربة العديد من الخيارات لصورتك البطل ، يمكنك على الفور تقييم الخيار الذي يولد أكبر قدر من المشاركة واكتساب نظرة ثاقبة للتصميم الأكثر فاعلية - وفي النهاية التمسك بهذا الخيار.
فيما يلي بعض طرق الاختبار التي يجب أن تكون سهلة الإعداد وتوفر ثروة من المعرفة للتأكد من أنك تستخدم أفضل صورة ممكنة للبطل.
أ / ب اختبر صورتك البطل
يتطلب اختبار A / B من المصمم إنشاء خيارين أو أكثر لقسم البطل (سواء كان إصداران من العناوين ونسختهما ، أو الصورة الرئيسية نفسها ، أو قسم التخطيط ، أو حجم الخط ، أو أي شيء آخر يخطر ببالك) - الأمر متروك لك تمامًا.
تخيل أنك قررت استخدام وضع المزج عندما يحوم المستخدمون فوق صورتك البطل ، لكنك لا تعرف الوضع الذي سيحسن تجربة المستخدم أكثر من غيره.
نفذ أ اختبار أ / ب بين خيارين مختلفين للوضع (هناك 13 خيارًا لوضع المزج ، بعد كل شيء) ، يتيح لك تجربة أكثر من وضع واحد لمعرفة أيها يحصل على أكبر عدد من التحركات والنقرات والمزيد من المشاركة في النهاية.
تتمثل إحدى الخطوات الأكثر شيوعًا والأكثر أهمية في اختبار A / B في قسم البطل في اختبار خيارين على الأقل من خيارات زر CTA - لتحديد الزر الذي يحصل على أكبر عدد من التحويلات.
على وجه التحديد ، يعد اختبار لون زر الحث على الشراء دائمًا تجربة مفيدة تسمح لك بفهم لون الزر الذي يجذب المستخدمين ويجذبهم أكثر. يحظى اختبار لون الزر A / B بشعبية كبيرة بين مصممي الويب لأنه سريع وسهل الأداء ولا يتطلب موارد تصميم إضافية.
استخدم أدوات الخرائط الحرارية لاكتشاف سلوك المستخدم
تحدد أدوات Heatmap وتحلل الأماكن التي ينقر فيها المستخدمون على صفحة الويب. تسمح هذه الأدوات لمالكي مواقع الويب والصفحات المقصودة بمعرفة كيف يتنقل المستخدمون بنشاط في المحتوى. يتم تحقيق ذلك بمجرد أن تحدد الأداة ما إذا كان المستخدمون يتفاعلون مع العناصر الرئيسية (وكيف) أم لا ، مثل الروابط والأزرار والخيارات وبالطبع عبارات الحث على اتخاذ إجراء.
فيما يلي بعض المعلومات التي يمكن لمالكي مواقع الويب الحصول عليها من خلال استخدام أدوات الخرائط الحرارية:
- العناصر غير القابلة للنقر تشتت انتباه المستخدمين.
- أحجام الأزرار كبيرة جدًا أو صغيرة جدًا.
- ألوان الأزرار غير مرئية.
كن بطل موقع الويب الخاص بك
تتطور اتجاهات مواقع الويب باستمرار ، مما يضيف ميزات جديدة لإمكانيات تصميم الويب. من المهم دائمًا إبقاء قسم البطل في مقدمة اعتبارات التصميم الخاصة بك - مع التأكد من أنه يصل دائمًا إلى إمكاناته في تقديم موقع الويب الخاص بك إلى الجماهير.
احصل على Elementor Pro الآن!
وفي الختام
هنا ! هذا كل شيء في هذا المقال الذي يوضح لك كيفية صنع صورة بطل. إذا كانت لديك أية مخاوف بشأن كيفية الوصول إلى هناك ، فاسمحوا لنا أن نعرف في تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
