بلاگ

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

در این مقاله به بررسی نقش تصویر قهرمان (hero image) در طراحی وب و بازاریابی می پردازیم و بهترین شیوه ها و استراتژی های کاملا ثابت را در مورد نحوه طراحی یک hero image برای وبسایت خود به اشتراک می گذاریم تا بهترین نتیجه را به همراه داشته باشد.

تصویر قهرمان (hero image) چیست؟

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

بیایید از ابتدا به بررسی و شفاف سازی این مفهوم بپردازیم:

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

برای طراحان وب، پیاده سازی hero image در یک وب پیج و بهینه سازی آن کار چندان دشواری نیست. این تصاویر به گونه ای طراحی میشوند که در اندازه های مختلف صفحه نمایش در سیستم عامل های مختلف، عالی بنظر برسند.

 

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

شاید این مطلب را نیز بپسندید :هشت راز رنگی

چرا وب سایت شما به یک hero image نیاز دارد؟

بازدیدکنندگان وبسایت هایی را دوست دارند که واضح، قابل فهم و خوانا باشند. با توجه به اینکه شما فقط ۰/۰۵ ثانیه فرصت دارید تا نظر یک کاربر را جلب کرده و او را شکار کنید،hero image  همان چیزی است که به شما کمک میکند تا به هدفتان برسید. (غالبا ۹۰٪ افراد بصری هستند، بنابراین آن ها نمیتوانند متن های طولانی موجود در صفحه اصلی را بخوانند تا تصمیم بگیرند که سایت شما را دوست دارند با خیر.)

برای شفاف سازی ایده های سایت خود و تاثیر گذاری بیشتر بر بازدیدکنندگانی که به سایت شما می آیند، به یک hero image نیاز دارید.

تصویر قهرمان (hero image) به شرح زیر به اهداف سایت می پردازد:

– آنها یک برند را معرفی می کنند و به شرح داستان تجاری آن می پردازند.

-آنها ارزش یک برند را بالا می برند

– آنها به شرح ویژگی های یک محصول  پرداخته و به سوالات مشتریان پاسخ می دهند.

به دلایل گفته شده ما چنین تصاویری (images) را قهرمان(hero) می نامیم. آنها در سریع ترین زمان ممکن کاربران را تحت تاثیر قرار می دهند. اگر یک تصویر قهرمان را درست طراحی کنید، هدف پیج را بسیار سریع تر به کاربر منتقل کرده و او را نیز به مقصودش می رسانید و user experience(تجربه کاربر) مثبتی ایجاد می کنید. تصاویر قهرمان ( hero images) از طریق رنگ و شکل خود، احساسات و هدف را به مشتری منتقل می کنند.

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

انواع گرافیک استفاده شده برای تصویر قهرمان:

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

شما ازhero image چه میخواهید؟

– آیا باید کاربران یک باران را ببینند؟

– آیا لازم است ماهیت اطلاعات یک وب سایت را منعکس کند؟

– آیا مزایای یک پیشنهاد را نشان می دهد؟ یا شاید شما می‌خواهید اصالت را نمایان کرده و احساسات مربوطه را در بازدیدکنندگان برانگیزد تا وفاداری و اعتماد را افزایش دهند.

همچنین نوع گرافیک تصویر قهرمان ممکن است به ظرفیت وب‌سایت بستگی داشته باشد. عکس های HD، گرافیک های ۳ بعدی یا فیلم ها ممکن است سرعت بارگذاری  را تا حد زیادی تحت تاثیر قرار دهند.

هنگام طراحی یک hero image، می توانید یکی از انواع گرافیکی زیر را انتخاب کنید.

۱. عکس ها

 

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

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

این نوع گرافیک، غالباً برای بخش e-commerce استفاده میشود.

۲. تصاویر طراحی شده

 

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

با این حال هنگام تصمیم گیری برای طراحی یک تصویر زیبا و معتبر به عنوان hero image، مطمئن شوید که مرز دقیق بین آنچه با اصالت است و آنچه مد است را درک می کنید.

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

۳. گرافیک های سه بعدی:

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

 

 

بهترین تمرینات طراحی برای hero images:

شاید این مطلب را نیز بپسندید :سبک های نوین طراحی دو

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

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

 

۱. برانگیختن احساسات:

 

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

بنابراین اگر در عکسی فردی خندان یا افرادی که چهره های خنده دار را نشان می دهند ببینیم، باعث می شود با لبخند(حتی به صورت ناخودآگاه) واکنش نشان دهیم. و برعکس تصاویر با پیش زمینه ی منفی، مانند گریه کردن مردم، خون، جنگ، بلایا و غیره را نگاه نمی کنیم تا از بروز احساسات منفی در خودمان جلوگیری کنیم. بنابراین تمام تلاش خود را به کار گیرید که hero images شما احساسات مورد نظر کاربر را برانگیزد. به عنوان مثال Pampers، با استفاده از عکس جان لجند با حالتی که ممکن است هنگام تعویض پوشک کثیف داشته باشد، احساسات مشتری را هدف قرار داده و به ایجاد اعتماد برند کمک می کند.

 

۲. آن را با کیفیت بالا و CTA قابل توجه بسازید:

 

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

همیشه می گویند، شما شانس دونی برای ایجاد اولین برداشت و تاثیرگذاری لحظه اول را نخواهید داشت. تصاویر قهرمان (hero images) اولین چیز هایی هستند که مردم میبینند، و اگر تصویری با کیفیت پایین ببینند، بلافاصله اعتمادشان را به یک نام تجاری و کیفیت محصولات آن برند، از دست می دهند. اگر می خواهید یک hero image به صفحه خودتان اضافه کنید، اطمینان حاصل کنید که به اندازه کافی چشمگیر است انا در عین حال کل صفحه نمایش را به خود اختصاص نمی دهد. شما باید تعادل ایجاد کنید. یک رنگ و مکان CTA را روی تصویر مد نظر قرار دهید، آن را در نزدیکی سایر دکمه های صفحه مانند منو و… قرار ندهید و آن را به رنگی طراحی نکنید که در مقابل سایر آیتم های اطرافش چشمگیر نباشد.

 

۳. از تصاویر مرتبط استفاده کنید:

 

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

۴. متن های موجود در سایت خود را در نظر بگیرید:

 

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

 

۵. فنگ های آمریکایی (American fangs):

 

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

سخن آخر:

 

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

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

شاید این مطلب را نیز بپسندید :رنگ در لوگو

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

 

بازدیدها: 118