تکنیکHero header در طراحی سایت
یکی از متد های جدید و رایج در طراحی سایت استفاده از یک تصویر بزرگ در بخش ابتدایی سایت همراه مقدار کمی متن است بطوری که کل صفحه نمایش را در بر می گیرد و هم اندازه صفحه نمایش می باشد و گیرایی زیادی به طراحی وب سایت شما می بخشد. نام این روش hero header در طراحی سایت است.
تکنیک های Hero header در طراحی سایت چیست؟
هیرو هدر ها استفاده از تصاویر گرافیکی و متن هایی است که در صفحه اصلی سایت و یا در دیگر صفحات سایت استفاده می شود.
حالات مختلفی از این روش استفاده می شود از جمله تصاویر بزرگ، تصاویر با متن، تصاویر اسلایدی، تصویر ثابت یا متحرک، ویدیو و انیمیشن که این طراحی می تواند رئال به نظر برسد.
در صورت استفاده از این تکنیک اولین چیزی که در سایت شما مشاهده می شود تصاویر هیرو هدرها هستند. هدف جذب کاربر و ارائه کلی و مختصر از خدماتی است که سایت آن ها را عرضه می نماید.
استفاده مناسب و صحیح فونت ها، رنگ ها، المان ها و آیکون های گرافیکی ساده در تکنیک هیرو هدر تاثیر بسزایی در طراحی وب سایت دارد.
با قرار دادن سایر المان ها مانند لوگو، نام برند و دیگر ابزارها در سمت چپ یا راست صفحه نمایش تمزکز و حواس کاربر را بر روی تصویر حفظ بنماییم. هیرو هدر ها در سبک و انواع مختلفی در طراحی سایت بکار می روند.
نکاتی برای استفاده از hero header در طراحی سایت
- قراردادن لوگو و یا نام برند در قسمت بالایی در سمت چپ تصویر و یا در مرکز تصویر. رنگ لوگو یا برند را مشکی یا سفید انتخاب کنید زیرا استفاده از رنگ های متفرقه قابل شناسایی از تصویر زمینه نیستند.
- عناوین و تیتر ها را پرنگ (BOLD) قرار دهید که موجب جذب کاربر می شود.
- برای خوانایی رنگ تصویر باید در تضاد رنگ متن باشد برای مثال اگر از تصاویر رنگی بهره میبرید سایر المان ها اطراف آن باید سیاه و یا سفید باشد و بلعکس اگر تصاویر زمینه سیاه و سفید است از پلت تک رنگ برای متون استفاه کنید.
- قراردادن متن باید به گونه ای باشد که مانع دید ه شدن تصاویر نشود .
- برای خوانایی بیشتر از فونت ظریف با سایز بزرگ استفاده کنید.
- پیشنهاد می کنیم در طراحی خود از یک دکمه تخت و شفاف استفاده کنید.
- برای user friendly کردن سایت و دسترسی آسان به بخش های مختلف سایت ترجیحا از منوی ثابت استفاده کنید تا کاربر با استفاده از اسکرول به راحتی به صفحات دیگر سایت راه یابد.
- برای تاثیر گذاری بیشتر از تکنیک های سایه و رنگهای محو برای متمایز کردن برخی متون از تصاویر استفاده نمایید.
- هدر ایجاد شده باید responsive باشد تا در موبایل، تبلت و صفحات کوچکتر به خوبی قابل نمایش باشد.
نمونه طراحی سایت هیرو هدرها توسط شرکت طراحی سایت مبنا
