Your browser does not support JavaScript!
طراحی بنر سایت
راهنمای طراحی تصاویر هیرو سایت

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

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

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

و اما یک تصویر هیرو موثر و قوی چه ویژگی هایی را باید داشته باشد؟

  • داشتن دکمه فراخوان مناسب و جذاب
  • دارا بودن پس زمینه ای با کیفیت 
  • وجود کنتراست کافی
  • تاثیر گذار بودن تصویر هیرو و ارتباط داشتن آن با محتوا سایت

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

اورلی

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

 تکنیک اورلی

پس زمینه برای متن

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

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

پس زمینه تار

استفاده از افکت بلور در تصویر یکی از بهترین شیوه های نشان دادن حس تصویر می باشد. می توان از افکت تار کننده  بلار و تیلت شیفت به کمک نرم افزار in-built image editor برای این منظور استفاده کرد.

 تکنیک پس زمینه تار برای هیرو سایت

پس زمینه با رنگ های نیرومند

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

 تکنیک پس زمینه با رنگ های نیرومند برای هیرو سایت

ترکیب بندی

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

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

استفاده از ویدئو به عنوان پس زمینه

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

 استفاده از ویدئو به عنوان پس زمینه در هیرو سایت

اینفوگرافیک خصوصیات یک هیرو قدرتمند و موثر

اینفوگرافیک خصوصیات یک هیرو قدرتمند و موثر