تکنیک Hero header در طراحی سایت چیست؟
با دیدن کلمه "hero" شاید بیشتر تصوری از قهرمان های خیالی همچون بتمن، سوپرمن و یا دیگر شخصیت های رمان گرافیکی داشته باشید، اما ما در مورد قهرمانانی چون مرد آهنین، بت من و مرد عنکبوتی صحبت نمی کنیم، در واقع کلمه "hero " برای طراحی سایت یک معنی کاملا متفاوت دارد.
"hero" در طراحی سایت متشکل از یک پس زمینه ، یک تصویر ، یک تیتر، یک زیر عنوان، و در برخی از نسخه همراه با متن یک یا دو کلمه ای می باشد.
به لطف صفحه نمایش بزرگتر و استفاده از پهنای باند بالاتر استفاده از تصاویر بزرگ در طراحی وب سایت در طول سال های اخیر به یکی از بروز ترین و محبوب ترین تکنیک های طراحی سایت تبدیل شد .
استفاده از تصاویر بزرگ (hero header) در طراحی سایت
امروزه طراحان وب سایت از تصویری جذاب و تاثیر گذار به همراه متن در اندازه بزرگتر بدون اینکه آسیبی به سرعت بارگذاری وب سایت وارد شود، استفاده می کنند. با توجه به اینکه "hero image" یا همان تصاویر بزرگ اولین چیزی است که در سایت دیده می شود استفاده از آن در طراحی سایت و توجه به چند نکته اساسی از جمله شفاف و گویا بودن تصویر و عدم استفاده از تصاویر مبهم و شلوغ باعث می شود از یک سو کاربران به مشاهده سایت علاقه مند شوند، و از سوی دیگر تصویر روشنی از وب سایت شما در ذهن خواهند داشت.
در ادامه چند نمونه از قالب وب سایت ها با رعایت "hero header" آورده شده است.
قالب وب سایت طراحی سایت وب کو وب
قالب طراحی سایت تبلیغات کلیکی
قالب طراحی سایت درگاه پرداخت
نکاتی برای استفاده از HERO HEADER در طراحی سایت
در طراحی سایت با استفاده از hero header چند ین مورد را باید در نظر داشته باشید که مهمترین آنها شامل موارد زیر می باشد:
از تصویر بزرگ و یا ویدئو به عنوان پس زمینه استفاده نمائید
استفاده از تیتر اصلی در یک قسمت از پس زمینه با فونت مناسب
بکارگیری متن کوتاه و اجتناب از شلوغ نمودن تصویر
استفاده از دکمه ها با فرم های زیبا و جذاب
در انتخاب رنگ ها دقت کنید، اگر شما از یک تصویر رنگی استفاده می کنید بقیه موارد اطراف آن را سفید و یا سیاه کنید. اگر تصویر سیاه و سفید است از رنگ آمیزی تک رنگ برای متن بالای سایت استفاده کنید. متن خود را در قسمتی از پس زمینه قرار دهید که مانع از دیده شدن تصاویر نشود. شما نیاز به استفاده از فونت های جذاب و جسورانه برای انتقال پیام خود به کاربران، دارید. از حروفی با سایز بزرگ و فونتی ظریف استفاده کنید این کار خوانایی متن را بالا می برد. همه نوشته ها برای موثر واقع شدن می بایست خوانا باشند. قرار دادن یک دکمه شفاف و با طراحی تخت در هدر زیبایی header را از یک طرف و راحتی کار کاربران را از سوی دیگر افزایش می دهد.
پیدا کردن بهترین مکان برای منوی در "hero image" و استفاده از منوی ثابت در این نوع طراحی سایت ،به کاربران اجازه می دهد به راحتی و با کلیک در اطراف صفحه بدون از دست دادن فرصت به بخش های دیگر صفحه راه یابند.
محل متن، دکمه ها و دیگر عناصر طراحی به گونه ای باید باشد که بخش مهمی از عکس مانند چهره انسان و یا محصولات با نام تجاری را نپوشاند.
استفاده از عناوین فوق العاده جسورانه
استفاده از فونت نازک برای متن چند خطی
رعایت فاصله بین حروف در تیترهایی با فونت ضخیم
استفاده از فونت ضخیم و نازک در کنار هم
اضافه کردن برخی از رنگ ها به کلمات تک واژه
اشتراک گذاری در :
مقالاتی که پیشنهاد می شود بخوانید
اصول و قواعد طراحی سایت
بازدید: 1286
برای اینکه بتوانید آمار بازدید سایت خود را افزایش دهید و باعث پیشرفت کسب و کار خود شوید باید نکاتی را در طراحی سایت رعایت نمایید. برای صرفه جویی در هزینه و جلوگیری از مشکلات احتمالی که در طراحی سایت پیش می آید و هم چنین صرفه جویی در زمان و افزایش دقت به نکات زیر باید توجه کرد. این نکات علاوه بر تاثیر خوبی که بر طراحی سایت دارند بر سئو سایت نیز تاثیر می گذارند چون مدیران گوگل برنامه هایی را اجرایی می کنند تا [...]
طراحی وب سایت استاندارد و جلوگیری از خروج کاربران وب سایت و روش کاهش Bounce rate سایت
بازدید: 1166
ساختار استاندارد و مناسب با تکیه بر محتوای مناسب و کاربردی میتوانید میزان خروج کاربران از وب سایت قبل از بازدید تنها یک صفحه را بگیرید و بازدید کننده را ترغیب به دیدن تمامی صفحات وب سایت نماید .یک طراحی مناسب می تواند میزان خروج کاربران از وب سایت را کاهش داده و موجب افزایش فعالیت کاربران در وب سایت شود .تنها راه جلوگیری از خروج کاربران از وب سایت کاهش کاهش Bounce rate می باشد.Bounce rate چیست ؟مقیاسی است مناسب جهت بررسی [...]
اینفوگرافیک چیست و کاربرد اینفوگرافیک در طراحی سایت چیست؟
بازدید: 2515
اولین اینفوگرافیک ها را می توان در نگاره های داخل غار انسان های نخستین یافت. با گذشت زمان و پیشرفت بشر ، اینفوگرافیک ها جنبه علمی تر و کاربردی تری به خود گرفتند . به گونه ای که اواخر سال 1400 میلادی لئوناردو داوینچی برای بیان ایده ها و تشریح مسائل علمی خود از اینفوگرافیک استفاده نمود. یکی از نخستین اینفوگرافیک های مدرن و کاربردی ، در کتاب اطلس سیاسی و تجاری ویلیام سیلوستر مورد استفاده قرارگرفت. این کتاب توسط [...]
چگونه طراح وب سایت شویم؟
بازدید: 2276
انتخاب شغل برای تمام افراد، از مهمترین تصمیمات در زندگیشان به حساب می آید. بسیار مهم است شغلی را انتخاب کنیم که به آن علاقه داشته باشیم و موجب افزایش توانایی ما باشد. همچنین در بسیاری اوقات، شغل مناسب سبب رفع نقاط ضعف ما می شود. شغلی که ما انتخاب می کنیم باید امکان ارتقاء داشته و از طریق آن توان تامین هزینه های زندگی و رسیدن به اهداف شخصی و اجتماعی خود را داشته باشیم.فاکتورها و عوامل زیادی وجود دارد که در راه به [...]
سایت واکنشگرا ( Responsive ) یا سایت پاسخ گرا و واکنشی چیست؟
بازدید: 1841
ریسپانسیو در اصطلاح به معنای پاسخ گرا یا واکنشی می باشد. به این معنا که طراحی وب سایت به گونه‌ای می باشد که در صفحات مختلف و ابزارهای متفاوت سایت به درستی نمایش داده می شود، به فرض مثال زمانی که شما از طریق گوشی یا تبلت سایت را تماشا می کنید ساختار ظاهری سایت به گونه ای تغییر پیدا می کند که قابلیت پیمایش سایت در این ابزارها به راحتی فراهم گردد.از طرفی در مانیتورهای با رزولوشن بالا نیز سایت به گونه‌ای مناسب [...]
اچ تی ام ال (HTML) و یا به عبارت دیگر زبان نشانه‌گذاری ابرمتنی چیست؟
بازدید: 1967
اچ تی ام ال زبان توصیف ساختار صفحه‌های وب است. دستورعمل‌های این زبان، برچسب (Tag) نام دارند در زبان html دستورات و متون مربوطه داخل تگ ها قرار می گیرند که هر کدام از این تگ ها خواص و کاربرد خاص خود را دارندزبانی‌است برای نشانه‌گذاری ابرمتن که برای تدوین قالب و طراحی صفحه‌های وب به کار می‌برند.HTMLمخفف عبارت Hyper TextMarkup Language می باشد که به معنای زبان نشانه گذاری متن می باشد. HTMLدر کنار [...]