تصاویر قهرمانانه همان چیزی است که سازندگان وب اغلب از آنها برای استقبال از بازدیدکنندگان وب سایت خود در قالب جذاب استفاده می کنند.

اگر تا به حال فکر کرده اید " تصویر قهرمان چیست؟ "، تو در جای درستی هستی. در این مقاله ، نگاهی خواهیم داشت به موضوع و اینکه چگونه می توانید تصاویر قهرمان زیبا با جلوه های بصری قدرتمند ایجاد کنید.

تصویر قهرمان اصطلاحی است که سازندگان وب برای توصیف محتوای بزرگ در بالای یک صفحه وب استفاده می کنند.

نقش یک تصویر قهرمان این است که به محض ملاقات با شرکت شما یا بازدیدکنندگان خود از آنها استقبال کند سازمان. فراوانی انواع تصاویر قهرمان در جعبه ابزار نویسندگی وب دلایل زیادی برای گنجاندن تصویر قهرمان در وب سایت شما به همراه دارد.

بیایید مزایای اصلی انجام این کار را بفهمیم ، و چرا؟

تصویر قهرمان چیست؟

با استقبال از فضیلت "تأثیر خوب اول" ، تصاویر قهرمان به طور معمول دارای یک یا چند ویژگی زیر هستند:

  • تصویری با کیفیت بالا
  • یک فیلم جذاب
  • یک نوار لغزنده تصویر یا چرخ و فلک چندرسانه ای
  • تصویر متحرک یا ایستا
  • سرصفحه ها و توضیحات در کنار یا مقابل محتوای تصویری

از نظر سبک ، جزئیات متداول طراحی که مشاهده می کنید در تصاویر قهرمان اعمال می شود ، شامل موارد زیر است:

  • تصاویر پس زمینه یا فیلم هایی با همپوشانی پس زمینه
  • موقعیت ثابت یا چسبنده
  • نشانه گذاری بر تغییر شفافیت یا همپوشانی تأثیر می گذارد
  • عناصر کنتراست که تصویر را از هدر بالا یا محتوای بعدی متمایز می کند

تازگی تصاویر قهرمان در طراحی وب این است که از یک طرف شما با فضای کاملاً مشخص و مشخصی در صفحه وب کار می کنید. از طرف دیگر ، انتخاب سبک ، جلوه ها و تکنیک هایی که هنگام طراحی این قسمت از محتوای صفحه خود استفاده می کنید کاملاً بی پایان است.

چرا باید از یک تصویر قهرمان استفاده کنید؟

وقتی طراحی و عملکرد تصویر قهرمان شما دارای کالیبر بالایی باشد، به طور خودکار به اعتبار و اعتماد کاربر دست می‌یابید. تصویر قهرمان شما و محتوای قهرمان اطراف آن اغلب نشان دهنده اولین فرصت شما برای انتقال نقطه فروش منحصر به فرد شما است سازمان و نقطه تماس کاربر اصلی برای تبدیل.

هنگامی که به دنبال ایجاد برخی از رفتارهای کاربر هستید ، یک تصویر برتر و قدرتمند قهرمان که اولین تأثیر قوی را در بازدید کنندگان شما ایجاد می کند ، بهترین راه برای شروع است.

می توانید اولین برداشت ماندگار داشته باشید

برداشت های اول در بسیاری از زمینه های زندگی مهم است ، اما به ویژه هنگامی که صحبت از نحوه ارتباط کاربران با زیبایی شناسی وب سایت می شود.

نتایج کارشناسان در تعامل انسان و ماشین (HCI) و تجسم در تحقیقات Google تأیید تأثیر تصاویر قهرمان در موفقیت یک وب سایت:

این مطالعه، " نقش پیچیدگی بصری و نمونه اولیه در برداشت های اولیه وب سایت : در درک قضاوت های زیبایی شناسی کار کنید ”، بررسی می کند که چگونه پیچیدگی بصری و نمونه اولیه بر طراحی وب سایت و اولین برداشت کاربران آن تأثیر می گذارد.

نویسندگان 119 تصویر واقعی از وب سایت را به شرکت کنندگان در مطالعه خود نشان دادند و دریافتند که پیچیدگی بصری و نمونه اولیه در 50 تصویر اول نمایشگاه و گاهی حتی در 17 ثانیه بر درک زیبایی شناختی کاربر تأثیر می گذارد.

نتیجه گیری ما به عنوان ایجادکنندگان وب کاملاً ساده است: تصویر قهرمان که انتخاب می کنیم و نحوه ارائه آن در صفحه خود به طور عمده بر احساسات و رفتار کاربر تأثیر می گذارد.

بیشترین استفاده را از محتوای خود خواهید برد

بالای طراحی وب برابر
برگرفته از: crazyegg.com

بخش "بالای برابر" یک صفحه وب را می توان به زبان ساده تعریف کرد: محتوایی که صفحه شما را پر می کند / بعد از بارگیری صفحه ، در بالای مرز پایین پنجره مرورگر وب ظاهر می شود. اگر محتوا برای مشاهده به پیمایش نیاز دارد ، به این معنی است که "در زیر" قرار گرفته است.

مفهوم "بالاتر از برابر" از مدت ها قبل از عصر رسانه های دیجیتال در طراحی و انتشار چاپ نشات گرفت. همه ما می دانیم که فوراً مشاهده کردن چیزی در نیمه بالای صفحه اول به چه صورت است و حتی به راحتی می توان گفت که محتوای صفحه اول معمولاً همان چیزی است که باعث می شود تصمیم به خرید یا عدم خرید بگیریم. روزنامه یا فقط متوقف شویم در دکه روزنامه فروشی.

دقیقاً به همین دلیل است که محتوای بالای صفحه شما می تواند یک موفقیت بزرگ در موفقیت وب سایت شما باشد.

منظور ما چیست؟

اگر بازدید کننده وب سایت با محتوای و تصاویر بالای صفحه اشتباه گرفته شود ، به سرعت وب سایت شما را ترک می کند. اگر تصویر قهرمان شما و محیط پیرامون اوضاع مشخص ، جذاب و به خوبی نمایانگر ارزش پیشنهادی شما باشد ، تمایل بیشتری به چسبیدن دارد.

در نهایت ، هرچه بیشتر روی تصویر و محتوای قسمت قهرمان خود سرمایه گذاری کنید ، احتمال خروج سریع کاربران کمتر است.

در مورد طراحی پاسخگو فراموش نکنید

به خاطر داشته باشید که محل چین خوردگی صفحه نسبت به اندازه صفحه نمایش دستگاه ذاتی است. این یک نکته مهم در طراحی پاسخگو است ، زیرا در بالا محتوای برابر باید به گونه ای سفارشی و پیکربندی شود که در اندازه های مختلف دستگاه قابل اجرا باشد.

طراحان و توسعه دهندگان وب اغلب از آن استفاده می کنند نقاط عبور ویژه دستگاه برای تضمین این پاسخگویی. این به شما امکان کنترل کامل قابلیت انطباق طراحی وب سایت خود با اندازه صفحه مربوطه را می دهد و از ظاهر یا تأثیر تصویر قهرمان شما جلوگیری می کند.

ارزش پیشنهادی خود را بدون اضافه بار اطلاعات بیان کنید

چگونه می توان یک تصویر قهرمان ایجاد کرد

شاید با مفهوم "اضافه بار اطلاعاتدر طراحی وب سایت و تجربه کاربر : ما می خواهیم هنگام نمایندگی نام تجاری و ارزش تجاری خود ، از استفاده بیش از حد از مطالب ، به ویژه مطالب نوشتاری ، خودداری کنیم.

از این نظر ، استفاده از تصویر ، تصویر یا فیلم 1 کلمه است. تنظیم دقیق تصاویر نام تجاری موثر ، کل داستان شما را در یک رسانه تصویری ضبط می کند. به جای کلام کردن داستان و پیشنهاد تجاری خود ، ممکن است بتوانید بار شناختی کاربر خود را به روشی ساده و کاربرپسند کاهش دهید.

تصویر بالا از گرفته شده است ساخت و ساز Millbrook، یک شرکت ساختمانی مستقر در پرت متخصص در "ساخت و ساز مسکونی با پایان عالی و توجه به جزئیات". برای وب سایت Elementor آنها ، تصویر قهرمان در صفحه اصلی از رابط "بالای برابر" خود استفاده کامل می کند. عکس واضح و واضح از یک خانه شاد مدرن و استخر روباز ، احساسات مثبت و آرامش بخشی را ایجاد می کند.

با یک گام جلوتر ، انتخاب سبک تصویر پس زمینه با ارتفاع کامل و اندازه "پتو" نشان دهنده مهارت ناهموار شرکت در ایجاد خواص لوکس مسکونی است. ارزش پیشنهادی به اندازه آب استخر شنا واضح است و کاربران با راحتی تمام اطلاعات لازم را جذب می کنند.

تصاویر قهرمان شما می تواند به تبدیل لیدها کمک کند

چگونه می توان یک تصویر قهرمان ایجاد کرد

نقاط لمسی جذاب و قابل مشاهده یک ماده اصلی برای جریان کاربری تولید مثل تولید مثل است. به همین دلیل است که رابطه بین دعوت از بخش قهرمان و تصویر قهرمان شما می تواند اهداف ساخت وب سایت شما را ایجاد کند یا آن را بشکند.

بگذارید متن های CTA شما بگویند " اکنون ثبت نام کنید "،" ادامه مطلب "،" Contactez-عقل »، و غیره ، تصویر قهرمان شما باید در همه جبهه ها به صورت شفاف هماهنگ شود: قابلیت مشاهده ، پیام رسانی ، طرح رنگ ، شکل ظاهری و غیره

گفتگوهای معتبر و موثر با مشتری های بالقوه بر اساس یک فضای راحت و طبیعی است. تصاویر دلپذیر از نظر بصری بهترین راه برای رسیدن به این هدف است.

این دقیقاً همان چیزی است که در وب سایت Elementor ایجاد شده توسط آن مشاهده می کنیم کاریکاتور STL، تیمی از هنرمندان کارتونی که خدمات سرگرمی رویدادی را ارائه می دهند. عنوان متحرک (متن قهرمان) مشتریان خوشحال را در تصاویر قهرمان خود نشان می دهد و نشان می دهد آنچه هنرمندان کارتون برای هر شخص فراهم می کنند.

بنابراین ، هنگامی که آستین خود را بالا زدید و شروع به کار در موارد عملی کردید ، چه فرایندی در تصمیم گیری برای انتخاب نوع تصویر قهرمان به کار می رود؟

بیایید چهار نوع مختلف از تصاویر قهرمان را بررسی کنیم و نحوه ارزیابی بهترین گزینه برای وب سایت شما را ارزیابی کنیم.

شماره 1 تصویر قهرمان محصول

چگونه می توان یک تصویر قهرمان ایجاد کرد

تصویر قهرمان محصول یک تصویر بزرگ است تعریف از محصول این برند این تصاویر را می توان به صورت ایستا یا در حال حرکت/حرکت ارائه کرد، تا زمانی که امکان تجسم ارزش پیشنهادی محصول را فراهم کند.

روش های معروف در بین طراحان وب برای نمایش و شخصی سازی تصاویر قهرمان محصول خود می تواند شامل موارد زیر باشد:

  • همانطور که در بالا در وب سایت شرکت مشاهده می کنیم ، یک نمونه دقیق / عکس فوری از یک محصول منفرد است اشتراک Avo Lover استرالیایی.
  • عکس صفحه رابط محصول دیجیتال ، مانند داشبورد.

تصاویر قهرمان محصول معمولاً در وب سایت های موجود استتجارت الکترونیک (اما نه منحصرا). خریداران بالقوه انتظار دارند نمونه هایی از محصولات واقعی را ببینند که از تصمیم گیری آگاهانه در مورد مناسب بودن فروشگاه برای نیازهای خریدشان حمایت می کند.

عاشق Avo از Elementor برای ایجاد وب سایت تجارت الکترونیکی خود استفاده کرد ، که مشتریان آنها از آنها برای خرید اشتراک هفتگی آووکادوی تازه تحویل آستان to خود استفاده می کنند.

مشتری مشتری Avo lover در یک منطقه کاملاً مشخص از علاقه بازار جالبی است ، بنابراین انتخاب آنها از قهرمان محصول محصول کاملاً منطقی است. مشترکین بالقوه علاقه مندان به آووکادو هستند. دیدن یک عکس دقیق و پیچیده از محصولات دقیقاً همان چیزی است که آنها به دنبال دیدن هستند.

بهترین روش ها:

  • روی کیفیت تصاویر پس زمینه سرمایه گذاری کنید

خواه تصویر پس زمینه شما عکس ، فیلم ، تصویر و غیره باشد ، فایل تصویر باید تا حد ممکن سبک و با وضوح کاملاً شفاف باشد.

  • به سطوح کنتراست توجه کنید

اگر متنی را در جلوی تصویر بخش قهرمان خود (یا م componentلفه ای از هر نوع) اضافه کردید ، اطمینان حاصل کنید که تضاد بین عناصر وب سایت بسیار زیاد بوده و به راحتی دیده می شود. این جایی است که همپوشانی پس زمینه و جلوه های فیلتر می تواند بسیار مفید باشد.

شماره 2 تصویر قهرمان مشتری

نوع زیر از قهرمان قهرمان که توسط مشاغل آنلاین استفاده می شود ، رویکردی جایگزین برای نشان دادن ارزش افزوده آنها دارد: نشان دادن مشتری خود با استفاده از محصول. این دیدگاه یک روش استراتژیک برای همدلی با بازدیدکنندگان است ، به طور مختصر نشان می دهد که شما نقطه درد آنها را درک می کنید و می توانید نیازهای آنها را برآورده کنید.

کلیپ ویدیویی فوق از سایت Elementor ساخته شده توسط الكساندر فیشر ، یک مربی شخصی مستقر در اشتوگارت که طیف وسیعی از خدمات مرتبط با سلامتی و تناسب اندام را ارائه می دهد.

تصویر قهرمان الکساندر از مشتری چیزی بیش از یک مشتری راضی که از یک سبک زندگی سالم و متناسب برخوردار است نشان می دهد. تصویر قهرمان با ارائه ویدیویی که پیوند مشتری و ارتباط او با عزیزان را نشان می دهد ، یک گام فراتر می برد.

بهترین روش ها:

  • موارد استفاده و تجربه مشتری خود را به اشتراک بگذارید

با نمایش غالب ترین مورد استفاده ، کالای خود را از هم متمایز کنید. تصویری که اهداف و ارزش شغلی شما را منتقل می کند ، نشان می دهد که بازدید کننده از پیشنهاد بی نظیر شما چه بهره ای می برد.

  • با مخاطبان هدف خود ارتباط برقرار کنید

اطمینان حاصل کنید که هنگام انتخاب نوع شخصیتی که در تصویر شما وجود دارد ، از مخاطبان هدف شما حساب می شود. تصویری را انتخاب کنید که درک شما از این زمینه و توانایی شما در لذت بردن از مشتریان را به شما انتقال دهد.

شماره 3 تصویر قهرمان بنیانگذار

چگونه می توان یک تصویر قهرمان ایجاد کرد

یک تصویر قهرمان بنیانگذار ، تصویری بزرگ از بنیانگذار صاحب مشاغل است که برای استقبال از بازدید کننده وب سایت در قسمت قهرمان قرار داده شده است.

تصاویر قهرمان م Foundسس اغلب در وب سایت های نمونه کارها برای فریلنسرها ، صاحبان مشاغل مانند روانشناس ، آرایشگر یا موسیقی دان استفاده می شود ، همانطور که در وب سایت Elementor توسط یاسمین قاب در بالا.

بزرگترین فضیلت یک قهرمان قهرمان بنیانگذار این است که چهره را به یک نام می کشاند. این بازدید کننده وب سایت را به ارائه دهنده خدمات متصل می کند ، ایجاد پویایی دلپذیر بین دو فرد.

انتخاب تصاویر برای تصویر قهرمان بنیانگذار شما باید با دقت انجام شود. با گزینه های زیادی برای انتخاب ، که خلاصه می شود به:

چه چیزی پیام برند شما را به قوی ترین شکل ممکن منتقل می کند؟

آیا این عکس از م ofسس است که مستقیم به دوربین نگاه می کند و لبخند می زند ، یا شاید در جهتی متفاوت نگاه می کند؟

یا آیا عکس صریح صاحب مشاغل سخت کوش مناسبتر است؟

بهترین روش ها:

  • به اندازه و ابعاد توجه کنید

از یک تصویر (یا فیلم) واضح و مناسب استفاده کنید که جزئیات دقیق بازدیدکنندگان را برای دیدن به بازدیدکنندگان نشان دهد. در صورت لزوم ، می توانید با برش دادن تصاویر و حذف محتوای کم اهمیت ، روی مناطق بزرگتری از عکس خود تمرکز کنید.

  • بر آنچه تصویر شما باید منتقل کند تمرکز کنید

نقش زمینه باید تمرکز بر شخص مقابل باشد ، نه برعکس. تأثیرگذارترین تصاویر قهرمان موسس ، صاحب مشاغل خندان را نشان می دهد و دلالت بر اشتیاق او برای راضی نگه داشتن مشتریان دارد.

شماره 4 تصویر قهرمان بدون زمینه

چگونه می توان یک تصویر قهرمان ایجاد کرد

تصاویر قهرمان غیر متنی همانطور که از نامش پیداست دنباله هایی است که چیزی به ظاهر "غیرمرتبط" با صاحب محصول یا تجارت را نشان می دهد. هدف از یک تصویر قهرمان غیر متنی ایجاد تأثیر بر بازدید کننده از طریق ارتباط تصویری یا یک پیام مخفی است. مشاهده تصویر غیر متنی به کاربر نشان می دهد محصول یا مارک چیست ، اما به روشی غیرمستقیم.

این روش برای مثال در مثال بالا از وب سایت Elementor ساخته شده توسط شرکت بازاریابی دیجیتال استفاده شده است AP Technology ، مستقر در اوکلاهما. وب سایت این شرکت از یک تصویر زمینه گسترده و واضح استفاده می کند که زاویه منحصر به فردی از آسمان خراش های شهر اوکلاهما را نشان می دهد.

این عکس پیشنهاد ارزش شرکت را نشان می دهد ، همانطور که در متن قهرمان وب سایت آمده است: تجارت خود را بسازید و رشد آن را تماشا کنید ، به بلندی بلندترین برج های اداری در شهر.

به محض اینکه چشم انسان ساختارهای فیزیکی مسلط بر آسمان را می بیند ، می فهمد که این متخصصان بازاریابی در تلاشند تا تجارت را از سطح زمین بالا ببرند.

بهترین روش ها:

  • اطمینان حاصل کنید که بازدید کنندگان دلیل مرتبط بودن تصویر را درک می کنند

در حالی که شما بصورت مستقیم از خود محصول خود را به نمایش نمی گذارید ، اطمینان حاصل کنید که شناسایی ارزش محصول با تصویر قهرمان بدون زمینه شما هنوز هم آسان است. کاربران نیازی به صرف وقت برای تفکر در مورد ارتباط آن ندارند.

  • پیوند واضحی بین تصویر قهرمان و متن قهرمان ایجاد کنید

متن قهرمان که شما در کنار تصویر خود قرار می دهید باید مستقیماً به محتوای تصویری آن مربوط شود. این یک ضرورت است ، حتی اگر به تکرار متن شما و انتخاب متن نیاز داشته باشد.

  • یک طرح منسجم طراحی ایجاد کنید

رنگ هایی که برای متن و پس زمینه دکمه ها ، سرصفحه ها یا توضیحات انتخاب می کنید باید با تصویر قهرمان یا آثار هنری هماهنگ باشد. این مورد همچنین برای لهجه های قابل کلیک در وب سایت شما صدق می کند:

عناصر منوی ناوبری ، آرم و غیره ...

همه ما می دانیم که یک زبان بصری سازگار برای اعتبار وب سایت ، حضور برند و اعتبار حرفه ای ما چقدر مهم است. این جایی است که راهنماهای سبک طراحی می توانند بسیار مفید واقع شوند ، خصوصاً در اطمینان از مطابقت تصاویر قهرمان با طراحی وب سایت شما.

چگونه می توان تصویر قهرمان خود را آزمایش کرد: روش هایی که ما دوست داریم

هنگامی که شروع به آزمایش چندین گزینه برای تصویر قهرمان خود کردید ، می توانید بلافاصله ارزیابی کنید که کدام گزینه بیشترین جذابیت را ایجاد می کند و از موثرترین طرح بینش می گیرید - و در نهایت با آن یکی می مانید.

در اینجا برخی از روشهای آزمایش ضروری وجود دارد که به راحتی تنظیم می شوند و دانش کافی برای اطمینان از استفاده از بهترین تصویر قهرمان ممکن فراهم می کنند.

A / B تصویر قهرمان خود را آزمایش کنید

آزمایش A / B به طراح نیاز دارد که دو یا چند گزینه برای بخش قهرمان ایجاد کند (خواه دو نسخه از عناوین و کپی آنها باشد ، خود تصویر قهرمان ، قسمت طرح ، اندازه قلم یا هر چیز دیگری که فکرش را بکنید) - کاملاً به خود شما بستگی دارد.

تصور کنید که وقتی کاربران روی تصویر قهرمان شما می روند تصمیم گرفتید از حالت ترکیبی استفاده کنید ، اما نمی دانید کدام حالت بیشتر تجربه کاربر را بهبود می بخشد.

انجام یک تست A / B بین دو گزینه حالت مختلف (به هر حال 13 گزینه حالت ترکیبی وجود دارد) ، به شما امکان می دهد بیش از یک حالت را امتحان کنید تا ببینید کدام بیشترین شناور ، کلیک و در نهایت تعامل بیشتری را دریافت می کند.

یکی از متداول ترین و مهمترین مراحل در تست A / B در قسمت قهرمان شما ، آزمایش حداقل دو گزینه دکمه CTA است - برای تشخیص اینکه کدام دکمه بیشترین تبدیل را دارد.

به طور خاص ، آزمایش رنگ دکمه CTA همیشه یک تجربه مفید است که به شما امکان می دهد درک کنید کدام رنگ دکمه بیشتر کاربران را جذب و جذب می کند. تست دکمه A / B در میان طراحان وب بسیار محبوب است زیرا انجام آن سریع و آسان است و به سختی به منابع طراحی اضافی نیاز دارد.

برای کشف رفتار کاربر از ابزار نقشه حرارتی استفاده کنید

ابزارهای Heatmap مکانهایی را که کاربران روی صفحه وب کلیک می کنند ، شناسایی و تجزیه و تحلیل می کند. این ابزارها به صاحبان وب سایت و صفحات فرود اجازه می دهند دقیقاً ببینند چگونه کاربران به طور فعال در حال حرکت در محتوا هستند. این امر زمانی محقق می شود که ابزار تشخیص دهد آیا کاربران با عناصر کلیدی (و چگونه) تعامل دارند یا نه ، مانند پیوندها ، دکمه ها ، گزینه ها و البته CTA ها.

در اینجا برخی از اطلاعاتی است که دارندگان وب سایت می توانند با استفاده از ابزار نقشه حرارتی به دست آورند:

  • موارد غیرقابل کلیک باعث حواس پرتی کاربران می شود.
  • اندازه دکمه ها خیلی بزرگ یا خیلی کوچک هستند.
  • رنگ دکمه ها قابل مشاهده نیست.

قهرمان وب سایت خود باشید

طراحی بخش قهرمان و تصویر قهرمان آن یکی از مهمترین و تأثیرگذارترین تصمیمات در روند طراحی وب شما است. سازندگان وب اغلب از قسمت قهرمان یک وب سایت به عنوان "اقدام افتتاحیه" ارائه وب سایت شما یاد می کنند ، اساساً حرکت خوشامد شما.

روند وب سایت به طور مداوم در حال پیشرفت است و ویژگی های جدیدی را به امکانات طراحی وب اضافه می کند. همیشه مهم است که بخش قهرمان خود را در اولویت ملاحظات طراحی خود قرار دهید - اطمینان حاصل کنید که همیشه در ارائه وب سایت شما به جمعیت به بالقوه خود می رسد.

اکنون Elementor Pro را دریافت کنید!

نتیجه

اینجا ! این برای این مقاله است که به شما نشان می دهد چگونه یک تصویر قهرمان بسازید. اگر در مورد چگونگی رسیدن به آنجا نگرانی دارید fبه ما اطلاع دهید در نظر.

با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...