الگوهای طراحی, وبسایت و پروفایل شخصی داود جمیری

راهنمای نهایی تصاویر قهرمانان [بهترین روشها + مثالها]

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

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

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

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

→ Download Now: 50+ Free Social Media Image Templates

تصویر قهرمان در طراحی وب

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

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

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

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

ابعاد تصویر قهرمان

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

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

1 ابعاد تصویر تمام صفحه و بنر

اندازه ایده آل برای تصویر قهرمان تمام صفحه ، 1200 پیکسل عرض با نسبت ابعاد 16: 9 است. برای یک تصویر قهرمان بنر ، اندازه ایده آل 1600 500 500 پیکسل است.

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

با PageSpeed ​​Insights Google می توانید سرعت بارگیری خود را برای دسک تاپ و موبایل بررسی کنید این یک نگاه جامع به اینکه محتوای سایت ابتدا بارگیری می شود و جایی که امکان پیشرفت دارد ، می دهد. هدف صفحه زمان لود از یک تا دو ثانیه را به خاطر شما اگر بیش از پنج ثانیه طول بکشد ، افراد را از دست خواهید داد.

2. ابعاد تصویر قهرمان قهرمان موبایل

اندازه ایده آل برای تصویر قهرمان موبایل 800 1، 1200 پیکسل است.

اگرچه مهم است که به نظر می رسد تصویر قهرمان شما در یک میز کار چیست ، اما نمی توانید تجربه تلفن همراه را نادیده بگیرید. تقریباً 55٪ از ترافیک وب سایت جهانی در سال 2021 بر روی تلفن همراه ایجاد می شود.

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

3 فشرده سازی تصویر قهرمان

اگر حجم پرونده زیادی دارید می خواهید تصویر قهرمان خود را فشرده کنید (هر چیزی بیش از 1 مگابایت بیش از حد بزرگ است). می توانید از سایتهایی مانند TinyJPG ، فشرده سازی JPG ، یا کمپرسور فتوشاپ Adobe برای کاهش اندازه بدون کاهش کیفیت. فقط مطمئن شوید که از قبل ابعاد را درست دریافت کرده اید وگرنه ممکن است تصویر مات یا کشیده به نظر برسد.

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

HTML قهرمان قهرمان

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

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

مهمترین مواردی که باید به خاطر بسپارید موارد زیر است:

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

برای تنظیم یک تصویر قهرمان چشم نواز ، این مراحل را دنبال کنید. توجه: مثالهای زیر شامل عناصر HTML و قوانین CSS هستند ، اما من تفاوت این دو را بعداً توضیح خواهم داد.

1 ساختار را ایجاد کنید.

با استفاده از قراردادهای برنامه نویسی وب سایت خود ، دو کانتینر برای تصویر قهرمان خود تنظیم کنید. به عنوان مثال ، مثال اول زیر از .hero برای ساختار و .hero-content برای تصویر ، متن و دکمه استفاده می کند ، در حالی که در مثال دوم از .image استفاده شده است. -کانتینر و . ظرف-ظرف .

how to create an HTML structure for hero images منبع تصویر

hero-image-html-structure منبع تصویر

2. محتوای خود را اضافه کنید.

وقتی ساختار درست شد ، وقت آن است که تصویر خود را شخصی سازی کنید. یک تصویر اضافه کنید ، یک قلم سفارشی انتخاب کنید ، یک هدر و زیر عنوان درست کنید و یک دکمه با CTA فریبنده ایجاد کنید. اگر می خواهید یک فیلتر به تصویر پس زمینه خود اضافه کنید (بدون اعمال آن روی متن) ، DeveloperDrive توصیه می کند فیلتر را قبل از کد .hero-content خود قرار دهید.

how to personalize your hero image with HTML

منبع تصویر

توجه داشته باشید که عرض و ارتفاع زیر بخش .hero چگونه روی 100vw و 100vh تنظیم شده اند. این تضمین می کند تصویر متناسب با کل نمای دید ، چه به صورت عمودی و چه به صورت افقی ، بنابراین در کل صفحه قرار دارد.

هیچ تصویر قهرمان بدون دکمه ای که افراد را به اقدام سوق دهد ، کامل نمی شود. یکی را در تصویر خود با عنصر font-family را وارد کنید زیرا متن به طور خودکار از عنصر .hero-content ترجمه نمی شود.

3 محتوا را در مرکز قرار دهید.

همه تصاویر قهرمان دارای متن متمرکز نیستند ، اما بیشتر آنها دارای یک تصویر مرکز هستند. برای تراز کردن تصویر پس زمینه خود ، می توانید با قرار دادن نمایش ، محتوای توجیه و تراز کردن موارد در زیر خود یک ظرف فلکسی درست کنید. عنصر قهرمان
how to center content in hero images

منبع تصویر

برای متن متمرکز ، یک قانون .text-align: center را در زیر عنصر محتوای اصلی خود قرار دهید. در مثال زیر ، متن در زیر کد .hero-content قرار گرفته است.

the center rule in HTML

منبع تصویر

4 آن را پاسخگو کنید.

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

how to create a responsive hero image in HTML

منبع تصویر

5. نمای را امتحان کنید.

تبریک می گویم ، ساختار HTML شما تنظیم شده است! نحوه نمایش تصویر ، متن ، دکمه ، حاشیه ها ، پر کردن و مرکزیت را در اندازه های مختلف صفحه بررسی کنید. اگر چیزی خاموش به نظر می رسد ، کد خود را شانه بزنید تا ببینید آیا می توانید مشکلی پیدا کنید. برای دستورالعمل های دقیق در مورد ایجاد و عیب یابی با HTML ، این مقاله را از DeveloperDrive . همه خوب به نظر می رسند؟ وقت آن است که سبک را با CSS اضافه کنید.

Hero Image CSS

در حالی که HTML نظم ایجاد می کند ، CSS (Cascading Style Sheets) به شما لطیفه می بخشد. این یک زبان مبتنی بر قاعده است که با استفاده از جلوه های سبک ، عناصر HTML را تکمیل می کند. به عنوان مثال ، CSS به شما امکان می دهد متن را در هدر تصویر قهرمان به رنگ زرد روشن تبدیل کنید تا در پس زمینه بنفش ظاهر شود.

اگر CSS را در تصویر قهرمان خود وارد نکنید ، عناصر HTML در ویژگی های اصلی مرورگر مانند مثال زیر پیش فرض هستند.

CSS for hero images منبع تصویر

جذاب ترین صفحه وب نیست ، درست است؟

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

الگوی زیر HTML و CSS اساسی مورد نیاز برای ایجاد یک تصویر قهرمان تمام صفحه را بیان می کند. می توانید سبک را با تغییر قوانین در عناصر .hero یا .hero-text تنظیم کنید ، مانند font-family ، رنگ ، حاشیه یا بالشتک .

how to create a full screen hero image in HTML and CSS منبع تصویر

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

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

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

برای ایجاد یک تصویر قهرمان مربوطه امروز ، به این روندهای طراحی نگاه کنید.

1 انیمیشن اختلاف منظر و پیمایش

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

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

2. ترکیبات انتزاعی

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

3 طرح های رنگ نرم

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

An example of a hero image منبع تصویر

4 محصولات به عنوان عناصر طراحی

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

Design elements using products منبع تصویر

An example of products in hero images منبع تصویر

5. رنگ واقعی

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

An example of lifelike color in hero images منبع تصویر

6. فیلم ها

تحقیقات Wyzowl نشان داد که 84٪ مردم متقاعد شده اند که یک محصول یا خدمات را با تماشای فیلم مارک . این باعث می شود ویدئو به محتوای بصری ایده آل برای یک تصویر قهرمان جلب توجه شود. اگر تصمیم دارید از ویدئویی استفاده کنید ، بهتر است آن را زیر 30 ثانیه و در یک حلقه نگه دارید. همانطور که در بالا ذکر شد ، شما می خواهید ویدیو را برای یک تصویر قهرمان ثابت برای سایت تلفن همراه خود خاموش کنید تا داده ها را کم نکند یا بارگیری آنها طولانی شود.

بهترین شیوه های قهرمان قهرمان

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

1 اندازه

ما قبلاً در مورد بهترین ابعاد تصاویر قهرمان در بالا صحبت کردیم (1200 پیکسل و نسبت ابعاد 16: 9) ، بنابراین این را یادآوری کنید که اهمیت اندازه مناسب مهم است. شما نمی خواهید مرورگرها یک تصویر برای شما تغییر اندازه دهند یا ممکن است با یک تصویر جذاب و کشیده که بازدیدکنندگان را از بین می برد ، پیچیده شوید.

نکته حرفه ای: با فایل های PNG و JPG آزمایش کنید تا بفهمید چه چیزی منجر به سرعت بارگذاری صفحه سریعتر می شود.

2. هارمونی

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

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

3 سازمان

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

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

4 اصالت

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

شما می توانید با ایجاد تصاویر قهرمان اصلی با Canva خلاقیت خود را انعطاف دهید یا از آنها الهام بگیرید Behance. Lacking quality photos? Browse Unsplash or Pexels for a variety of high-quality photos that can be used for commercial and non-commercial purposes.

5. Consistency

The biggest struggle to create engaging visuals? 43% of marketers say it’s producing them consistently. To get on a set schedule, set aside the time and resources you need to create visuals — even add it to your marketing budget.

If you’re crunched for time, consider revamping your old graphics. It’s a smart way to save time, and 51% of companies have found it’s efficient and effective.

There’s nothing worse than landing on a web page that looks like it was made in the dotcom bubble. It looks sketchy, and you’re afraid to click on anything in case it redirects you to some kind of virus. On the other hand, being greeted by a beautiful hero image makes you want to stay and explore the page.

As the first touchpoint people have with your brand, hero images have a major impact on your brand perception, website traffic, and conversion. So it’s time to put your newfound knowledge into practice and design one that draws people in from the first look.

social Media images

نوشته ها مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *