تکنیک Hero header در طراحی سایت چیست؟
با دیدن کلمه "hero" شاید بیشتر تصوری از قهرمان های خیالی همچون بتمن، سوپرمن و یا دیگر شخصیت های رمان گرافیکی داشته باشید، اما ما در مورد قهرمانانی چون مرد آهنین، بت من و مرد عنکبوتی صحبت نمی کنیم، در واقع کلمه "hero " برای طراحی سایت یک معنی کاملا متفاوت دارد.
"hero" در طراحی سایت متشکل از یک پس زمینه ، یک تصویر ، یک تیتر، یک زیر عنوان، و در برخی از نسخه همراه با متن یک یا دو کلمه ای می باشد.
به لطف صفحه نمایش بزرگتر و استفاده از پهنای باند بالاتر استفاده از تصاویر بزرگ در طراحی وب سایت در طول سال های اخیر به یکی از بروز ترین و محبوب ترین تکنیک های طراحی سایت تبدیل شد .
استفاده از تصاویر بزرگ (hero header) در طراحی سایت
امروزه طراحان وب سایت از تصویری جذاب و تاثیر گذار به همراه متن در اندازه بزرگتر بدون اینکه آسیبی به سرعت بارگذاری وب سایت وارد شود، استفاده می کنند. با توجه به اینکه "hero image" یا همان تصاویر بزرگ اولین چیزی است که در سایت دیده می شود استفاده از آن در طراحی سایت و توجه به چند نکته اساسی از جمله شفاف و گویا بودن تصویر و عدم استفاده از تصاویر مبهم و شلوغ باعث می شود از یک سو کاربران به مشاهده سایت علاقه مند شوند، و از سوی دیگر تصویر روشنی از وب سایت شما در ذهن خواهند داشت.
در ادامه چند نمونه از قالب وب سایت ها با رعایت "hero header" آورده شده است.
قالب وب سایت طراحی سایت وب کو وب
قالب طراحی سایت تبلیغات کلیکی
قالب طراحی سایت درگاه پرداخت
نکاتی برای استفاده از HERO HEADER در طراحی سایت
در طراحی سایت با استفاده از hero header چند ین مورد را باید در نظر داشته باشید که مهمترین آنها شامل موارد زیر می باشد:
از تصویر بزرگ و یا ویدئو به عنوان پس زمینه استفاده نمائید
استفاده از تیتر اصلی در یک قسمت از پس زمینه با فونت مناسب
بکارگیری متن کوتاه و اجتناب از شلوغ نمودن تصویر
استفاده از دکمه ها با فرم های زیبا و جذاب
در انتخاب رنگ ها دقت کنید، اگر شما از یک تصویر رنگی استفاده می کنید بقیه موارد اطراف آن را سفید و یا سیاه کنید. اگر تصویر سیاه و سفید است از رنگ آمیزی تک رنگ برای متن بالای سایت استفاده کنید. متن خود را در قسمتی از پس زمینه قرار دهید که مانع از دیده شدن تصاویر نشود. شما نیاز به استفاده از فونت های جذاب و جسورانه برای انتقال پیام خود به کاربران، دارید. از حروفی با سایز بزرگ و فونتی ظریف استفاده کنید این کار خوانایی متن را بالا می برد. همه نوشته ها برای موثر واقع شدن می بایست خوانا باشند. قرار دادن یک دکمه شفاف و با طراحی تخت در هدر زیبایی header را از یک طرف و راحتی کار کاربران را از سوی دیگر افزایش می دهد.
پیدا کردن بهترین مکان برای منوی در "hero image" و استفاده از منوی ثابت در این نوع طراحی سایت ،به کاربران اجازه می دهد به راحتی و با کلیک در اطراف صفحه بدون از دست دادن فرصت به بخش های دیگر صفحه راه یابند.
محل متن، دکمه ها و دیگر عناصر طراحی به گونه ای باید باشد که بخش مهمی از عکس مانند چهره انسان و یا محصولات با نام تجاری را نپوشاند.
استفاده از عناوین فوق العاده جسورانه
استفاده از فونت نازک برای متن چند خطی
رعایت فاصله بین حروف در تیترهایی با فونت ضخیم
استفاده از فونت ضخیم و نازک در کنار هم
اضافه کردن برخی از رنگ ها به کلمات تک واژه
اشتراک گذاری در :
مقالاتی که پیشنهاد می شود بخوانید
نکات کلیدی و کاربردی برای طراحی سایت
بازدید: 4091
سرعت بارگذاری سایت آزار دهنده ترین نکته برای کاربردر هنگام بازدید از سایت ، انتظار بیش ازحدش برای بار گذاری سایت است که اگر این زمان از یک حد مجاز بیشتر شود باعث آزردگی کاربر خواهد شد ، اگرچه سایت شما یکی از بزرگترین سایت ها باشد. ممکن است سایت شما از طراحی بسیار زیبایی بهره مند باشد، اما به علت سرعت کم بارگذاری آن فقط تعداد کمی از افراد توانایی دیدن و استفاده کردن از سایت را دارند.گوگل چگونه سرعت صفحات وب [...]
وب چیست و چگونه کار میکند؟
بازدید: 32128
وب (WEB)یک سیستم مبتنی بر سرویس دهنده سرویس گیر (Client/Server) بر روی اینترنت است که با استفاده از ابزار فرامتن(HyperText) و پیوند(Link) دادن اجزای اطلاعات به یکدیگر دسترسی به منابع اطلاعاتی را تسهیل می کند .وب از ابزار فوق رسانه ای (HyperMedia) که شامل فوق متن و چند رسانه ای (MultiMedia) است بهره می گیرد. از طریق وب می توان اطلاعات را ارسال ویا دریافت نمود و متفاوت بودن سیستمهای سخت افزاری و نرم افزاری (سیستم عامل( مانع ایجاد ارتباط [...]
ترافیک وب سایت چیست و روش های افزایش ترافیک وب سایت
بازدید: 7154
ترافیک وب سایت مهمترین فاکتوری موفقیت یک وب سایت تلقی شده است" ، اما این اظهار نظر دارای شرایطی می باشد. اگرچه ترافیک یک وب سایت یک شریان حیاتی وب سایت است، اما کیفیت ترافیک به مراتب مهمتر از کمیت آن است. البته هر مقدار از ترافیک، بهتر از بدون ترافیک بودن است، اما اگر وب سایت شما ایده آل ترین سایت هم باشد ولی اگر بازدید کنندگان شما به محصولات شما و یا دسترسی کامل به اطلاعات شما نداشته باشند، قطعا در آینده محکوم [...]
افزایش سرعت سایت با mod_pagespeed گوگل برای Apache
بازدید: 2459
افزایش سرعت سایت با mod_pagespeed گوگل برای Apacheتوسعه دهندگان نرم افزاری شرکت گوگل از دو سال پیش شروع به ساخت ماژول mod_pagespeed برای آپاچی (Apache) کرده‌اند که با استفاده از آن در سرور سایت خود بدون نیاز به هیچ گونه تغییراتی در محتوای سایت خود می‌توانید سرعت سایت‌های خود را تا حد زیادی افزایش دهید و همان طور که می‌دانید یکی از نکات ضروری در مورد سئو و بهینه سازی سایت‌ها نیز همین سرعت پاسخگویی سرور و بارگذاری صفحات [...]
هر رنگ در طراحی وبسایت چه معنای دارد؟
بازدید: 3597
هر رنگ در ضمیر ناخودآگاه انسان تاثیر خاصی می گذارد برای همین رنگ ها در طراحی سایت خیلی مهم هستند مثلا بعضی رنگ ها کاربر را به خرید تشویق می کند، بعضی رنگ ها احساس اعتماد ایجاد می نماید و همچنین بعضی رنگ ها به انسان احساس گسنگی می دهد و ... یعنی شما با رنگ ها به طور غیر مستقیم می توانید احساسات کاربران خود را برانگیخته نمایید.نکات مهم در هنگام انتخاب رنگ برای سایت• رنگ متمم رنگهای [...]
بهینه سازی وب سایت هایی با چند نام دامنه
بازدید: 2024
از آنجایی که موتورهای جستجو از جمله گوگل ارزش زیادی برای کلمات واقعی در مورد نام دامنه قائل هستند، بسیاری از صاحبان سایت ها و کسب و کارهای آنلاین برای حضور وب سایت شان در بهینه سازی موتور جستجو توسط خریدن نام های دامنه ای که حاوی کلمات کلیدی هدفمندی هستند، اقدام نمایند.انجام این کار شاید صدمه ای به کسب و کار وارد نکند ولی اگر بر فرض 30 نام دامنه دارای کلمات کلیدی هدفمند وجود داشته باشد ولی نام دامنه سایت اصلی [...]