یکی از جدیدترین و محبوب ترین تکنیک های طراحی سایت در حال حاضر استفاده از تصاویر بزرگ در بخش بالای سایت می باشد، اما نه فقط یک تصویر بزرگ معمولی.در حقیقت از تصویری جذاب و تاثیرگذار به همراه مقدار کمی متن استفاده می شود که به اندازه صفحه نمایش به نظر برسد. وقتی از چنین تصاویری در بالا ترین بخش صفحه استفاده شود به آن تکنیک Hero Header یا هیرو هدر می گویند.
هیرو هدر در طراحی سایت حرفه ای به صورت های متنوعی می تواند تهیه شود از جمله تصاویر بزرگ،تصاویری توام با متن،تصاویر اسلایدری، تصاویر ثابت و یا متحرک و ویدئو از جمله مواردی هستند که در تهیه ی هیرو هدر می توان از آن استفاده کرد.
تصاویر هیرو اولین چیزی است که در سایت دیده می شود و طراحی آن باعث می شود که کاربر به مشاهده سایت علاقه مند شود، بنابراین باید تمرکز زیادی روی آن گذاشته شود.
تکنیک Hero Header در معمولا تکیه بر مسائلی چون فونت نوشته ها،استفاده از رنگ های محدود و المان های گرافیکی ساده دارد. بقیه ی المان ها در اطراف تصاویر قرار می گیرند.می توان لوگو،نام تجاری و ابزارها را در لبه های صفحه نمایش،چپ یا راست قرار داد تا تمرکز روی تصویر از بین نرود.
چند نکته برای استفاده از Hero Header
برای استفاده از این تکنیک چندین مورد را باید در نظر داشته باشید:طراحی باید مرتب باشد و نوشته ها نباید در داخل تصویر و یا ویدئو قرار بگیرند.ایجاد عناصر جدا از هم در این تکنیک اهمیت بسیاری دارد. در اینجا به چند مورد که هنگام طراحی این تکنیک باید به آن توجه کنیم،اشاره می کنیم:
1)نام تجاری خود را در هنگام طراحی هیرو هدر لحاظ کنید.بالای صفحه سمت چپ و یا مرکز تصویر فضای مناسبی برای این کار است.برای لوگوی خود می توانید رنگ سفید و یا مشکی را انتخاب کنید.دقت کنید که بخوبی تصویر زمینه قابل شناسایی باشد و از استفاده از رنگ های مختلف برای این کار اجتناب کنید.
2) عناوین را پررنگ کنید.طرز استفاده از فونت و تصاویر می تواند برای کاربر بسیار جالب توجه باشد.
3) در انتخاب رنگ ها دقت کنید.اگر شما از یک تصویر رنگی استفاده می کنید بقیه موارد اطراف آن را سفید و یا سیاه کنید. اگر تصویر سیاه و سفید است از یک پلت تک رنگ برای متن هدر استفاده کنید.
4) متن خود را در جایی قرار دهید که مانع از دیده شدن تصاویر نشود.
5) از حروفی با سایز بزرگ و فونتی ظریف استفاده کنید.این کار خوانایی متن را بالا می برد.
6) از سایه و رنگ محو برای متمایزکردن نوشته ها از تصاویر استفاده کنید.همه ی نوشته ها برای موثر واقع شدن می بایست خوانا باشند.
7)هدری ایجاد کنید که responsive بوده و در موبایل و تبلت نیز بخوبی کار کند.به این موضوع هم فکر کنید که در صفحات نمایش کوچک تر چگونه ارائه می شود و چه تصویر و متنی نمایش می دهد.
در واقع Hero Header یکی از بهترین و زیباترین طرح های بصری است که در طراحی سایت می توان به کاربرد. برتری این تکنیک در آن است که هرگونه سبکی را اعم از طراحی flatو یا minimal می توان همراه با آن به کار برد.