استفاده از hero header در طراحی قالب

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

بارگذاری از تصاویر بزرگ، تصاویر اسلایدی، تصاویر حاوی متن، تصویرثابت یا متحرک، ویدئو و انیمیشن از جمله روش های Heroheader می باشد که موجب تعادل در طراحی قالب می‎شود.

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

کاربرد صحیح و مناسب رنگ‌ها‎، فونت‌ها‎، المان‌ها‎و آیکون‌ها‎ی گرافیکی ساده در تکنیک Heroheader تأثیرمطلوبی در طراحی قالب سایت بر جا می‎گذارد. همچنین موجب زیبایی و گیرایی طراحی سایت می‎شود.

تکنیک‌ها‎ی Heroheader در طراحی قالب

1. استفاده از منوی ثابت برای دوستانه کردن فضای سایت و همچنین ایجاد شرایطی که دسترسی آسان به قسمت‌ها‎ی مختلف سایت برای کاربران امکان پذیر شود. این کار را می توان با استفاده از اسکرول انجام داد.

2. پر رنگ کردن و Bold نمودن عناوین و تیتر‌ها‎ که موجب جذب کاربران می‎گردد.

3. استفاده از یک دکمه شفاف و تخت روش مناسبی برای طراحی قالب سایت می‎باشد.

4. ایجاد تضاد رنگ میان متون صفحات با تصویر زمینه؛ برای مثال اگر از تصاویر رنگی استفاده می‎شود، سایر فاکتورهای اطراف آن باید سیاه و یا سفید باشند و اگر تصاویر زمینه سیاه و سفید می‎باشد از پلت تک رنگ برای متون تأثیر بیشتری بر جای خواهد گذاشت.

5. قراردادن لوگوی شرکت و یا نام برند تجاری در قسمت بالا و در سمت چپ و یا در مرکز صفحه؛ اگر رنگ لوگو یا برند مشکی یا سفید انتخاب شود، بهتر می‎تواند نظر بازدیدکننده را به خود جلب نماید زیرا استفاده از رنگ‌ها‎ی متفرقه قابلیت شناسایی از تصویر زمینهرا ندارند.

6. جای گذاری متون و تصاویر باید به گونه‏ای باشد که جلوی دیده شدن یکدیگر را نگیرند. بهتر است برای این کاراز فاصله و کلید enter استفاده نمود.

7. استفاده از تکنیک تضاد سایز و فونت میان عناوین و مطالب نقش زیادی در جلب توجه کاربران دارد.

8. استفاده از روش‌ها‎ی سایه و رنگ‌ها‎ی محو کننده برای ایجاد تضاد در متون و تصاویر موجب تأثیرگذار یبیشتر سایت می‎گردد.

9. Hero header باید به صورت responsive باشد تا وب سایت قابلیت بارگذاری درانواع سیستم عامل هایی چون موبایل، تبلت و صفحات کوچکتر را داشته باشد.

10. استفاده از یک تصویر بزرگ در بخش ابتدایی سایت همراه با متن نقش زیادی در افزایش میزان تاثیر سایت ایفا می‎کند.

11. تصاویر بزرگی که به عنوان Hero Header مورد استفاده قرار می‎گیرند، اولین المانی هستند که بیننده مشاهده می‎کند و نگاه فرد را جذب وب سایت می‎نماید، به همین منظور تصاویر باید از جذابیت بصری خاصی برخوردار باشند.

12. ایجاد توضیحات و مطالب کوتاه در زیر تصاویر به فهم بیشتر آنها کمک می‎کند.

13. برای خوانا شدن بهترمطالب و متون استفاده از فونت‌ها‎ی ظریف و با سایز بزرگ، طرفدار بیشتری دارد.

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

نکته: استفاده از تصاویری که صفحات را کامل پوشش می‌دهد نباید زیاده روی نمود این امر موجب بالا رفتن حجم سایت و در نتیجه ایجاد مشکل در بارگذاری صفحات می‎شود.