ایجاد یک روند بصری مطلوب درhero header بستگی به یک نکته کلیدی دارد و آن هم استفاده از یک عکس جالب است.

نکاتی برای استفاده از  hero header در طراحی سایت

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

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

سخن پایانی

Hero header یکی از بهترین و زیباترین طرح های بصری است که در طراحی سایت می توان به کاربرد. برتری این تکنیک در آن است که هرگونه سبکی را اعم از طراحی flat و یا minimal می توان همراه با آن به کار برد. این مقاله توسط بهاره سادات حسینی و با بهره گیری از چند منبع خارجی جهت ارائه در تی مدیا تهیه شده است.

آیا شما نیز در پروژه های خود از hero header استفاده می کنید؟ آیا نمونه هایی از بکارگیری تکنیک hero header در طراحی سایت های خارجی و شناخته شده مشاهده کرده اید؟

در بخش دیدگاه تجربیات خود را با ما درمیان بگذارید، دیدن پروژه هایی که شما در آن کار می کنید برای ما جالب توجه است.