Hero Header چیست و چه کاربردی دارد؟

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

 Hero Header چیست؟

Hero Header به کاربرد عکس بزرگ، متن و المان های مکان یابی وب سایت در صفحه اول و یا در بالای هر صفحه وب سایت گفته میشود. Hero Header میتواند به شکل های گوناگون مورد استفاده قرار گیرد که از نمونه آن میتوان به عکس، عکس به همراه متن، اسلاید تصاویر، تصاویر ثابت، ویدیو یا تصاویر متحرک اشاره کرد. طراحی چنین المانی هم میتواند واقعی باشد و هم گرافیکی.
تصاویر بزرگی که به عنوان Hero Header مورد استفاده قرار می گیرند اولین المانی هستند که بیننده مشاهده میکند و به منظور آن طراحی میشوند که نگاه فرد را به وب سایت جذب نمایند. به همین منظور این المان باید دارای تمرکز و جذابیت بصری بالایی باشد.
برای طراحی Hero Header تمرکز بسیار زیادی بر المان های بصری اعمال میشود. تایپوگرافی های ساده، رنگ های مینیمال و المان های کمکی با اشکال ساده اغلب اولین انتخاب ها در طراحی چنین هدرهایی میباشند. یکی از اصولی که در ساخت Hero Header بیشتر مشاهده میشود آن است که اغلب المان های طراحی در بالای تصویر قرار می گیرند و به گونه ای استراتژیک طراحی میشوند تا متن در جایگاه مشخصی از صفحه نمایش جای گیرد. مکان یاب، لوگو و دیگر ابزار وب سایت اطراف لبه های خارجی این المان قرار دارند عمدتاً در گوشه های بالا سمت راست و چپ. این روش موجب میشود که توجه ها به تصویر معطوف شود.
بکارگیری Hero Header بسیار گسترده شده است و تقریباً با شیوه طراحی وب سایت هماهنگ است. جدا از مسائلی که در بالا در رابطه با نحوه طراحی آن اشاره شده است، یک موضوع کلیدی برای ایجاد Hero Header قوی وجود دارد و آن بکارگیری یک تصویر فوق العاده میباشد.
پس از آنکه تصمیم گرفتید از یک Hero Header در طراحی خود استفاده نمایید، مسائلی وجود دارد که باید به هنگام طراحی در ذهن داشته باشید. طرح شما باید ساده باشد و عناصر طراحی نباید موجب پوشیده شدن تصویر اصلی شوند. جداسازی المان ها در این شیوه طراحی میتواند عملی ضروری و لازم تلقی گردد. در اینجا به چند نکته اشاره خواهیم کرد که باید در استفاده از Hero Header به خاطر داشته باشید:

برند خود را جاسازی نمایید

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

تایپوگرافی تیترها باید بزرگ و گیرا باشند

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

در رابطه با استفاده از رنگ ها دقت داشه باشید

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

متن تصویر خود را در جایی قرار دهید که جریان بصری عکس را بر هم نزند

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

---