Hero Header در طراحی سایت

0 Comments

فوت وفن hero header در طراحی سایت حرفه ای

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

حال چیجوری میشه از فوت وفن hero header در طراحی سایت آخر استفاده رو برد؟ به چه ابزاری واسه شروع نیازه؟

اینجا به چند راهنمایی واسه به کار گیری هدر بزرگ که می تونین از اونا در طراحی سایت خود استفاده کنین، پراختیم.

فوت وفن Hero header در طراحی سایت چیه؟

Hero header به کار گیری تصاویر بزرگ و متن هاییه که در بالای صفحه اصلی سایت و یا همه صفحات سایت نشون داده می شه. hero header به صورتای متنوعی می تونه جفت و جور شه، تصاویر بزرگ، تصاویری همراه با متن ، تصاویر اسلایدری، تصاویر ثابت و یا متحرک و ویدیو از جمله مواردی هستن که در جفت و جور hero header میشه از اونا استفاده کرد.

تصاویر hero اولین چیزیه که در سایت دیده می شه و طراحی اون باعث می شه که کاربر به مشاهده سایت علاقه مند شه، پس باید تمرکز زیادی روی اون گذاشته شه.

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

به کار گیری hero header در طراحی سایت وبسیما

ایجاد یه روند چشمی مطلوب درhero header بستگی به یه نکته کلیدی داره و اونم به کار گیری یه عکس جالبه.

 

نکاتی واسه به کار گیری  hero header در طراحی سایت

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

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

مثالای الهام بخش در طراحی سایت

در زیر مثالایی از hero header رو می بینین. این مثالا از وب سایتایی مشغول به کار بعد از طراحی اونا بوسیله آژانس خلاقیت وبسیما هستن.

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

فوت وفن hero header در طراحی سایت

طراحی فروشگاه اینترنتی گلاریس با فوت وفن hero header:

hero header در طراحی سایت گلاریس

سخن پایانی

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

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

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

 

پاسخی بگذارید

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