09357613765 - 09196607560 - 86034825

هیرو هدر را در طراحی سایت بیشتر بشناسید

بدون نظر

طراحی سایت فعالیتی به شدت پویاست که هر روز با مفاهیم، نوآوری ها، خلاقیت ها و ترندهای تازه ای روبرو می شود. به همین دلیل است که طراحی سایت هایی که ۱۰ سال یا حتی ۲ سال پیش یا اصلا همین پارسال! انجام شده اند امروز از نظر تکنیک های طراحی گرافیکی و طراحی بصری قدیمی و کهنه به نظر می رسند. این شدت از پویایی و نوآوری در طراحی سایت های اینترنتی شاید کمی طراحان سایت را به دردسر بیندازد اما قطعا چالش های جذاب و زیبایی را می آفریند.

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

هیرو هدر ارتباط تنگاتنگی با طراحی فلت و طراحی متریال دارد و شاید اصلا بتوان گفت هیرو هدر محصول طراحی فلت و طراحی متریال است. به عنوان مثال برای درج عبارات، نوشته ها (که البته همه باید کوتاه باشند) باید به صورت مونوکروم (تک رنگ)، بدون سایه و … عمل کرد. بهتر است برای حداکثر اثرگذاری تصویر نوشته ها و عبارات را به منتهی الیه پایین یا گوشه های سمت راست و چپ تصویر برد. اگر قرار است متن بر روی تصویر درج شود بهتر است این کار بدون بک گراند یا بک گراند شفاف و … صورت گیرد.
اگر در Hero header قرار است از دکمه ها استفاده کنید بهتر است آن ها را به شکل transparent یا شفاف پیاده کنید. از قرار دادن زیر منو پرهیز کنید. به شکل کلی از قرار دادن هر المانی که برای دیده شدن تصویر مزاحمت ایجاد می کند اجتناب کنید.
تصاویر زیر نمونه هایی از هیرو هدر هستند:

یک: یک هیرو هدر بدون متن ها، منوها و المان های ناوبری بیش از حد؛ 

03-cleverbird-creative-agency-website

دو: یک هیرو هدر با منویی با بک گراند شفاف برای حداکثر تمرکز روی تصویر؛

07-sweet-basil-restaurant-website-background

سه: هیرو هدر به شدت مینیمال؛ جانمایی متن در گوشه پایین جهت بهره گیری حداکثری از تصویر؛

05-christian-woo-furniture-website-homepage

چهار: یک هیرو هدر کادر بندی شده؛ بر خلاف موارد قبلی هیچ نوشته ای بر روی تصویر جانمایی نشده است؛

04-gladz-homepage-hero-photo-image

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *