تکنیک Hero header در طراحی سایت چیست؟
با دیدن کلمه "hero" شاید بیشتر تصوری از قهرمان های خیالی همچون بتمن، سوپرمن و یا دیگر شخصیت های رمان گرافیکی داشته باشید، اما ما در مورد قهرمانانی چون مرد آهنین، بت من و مرد عنکبوتی صحبت نمی کنیم، در واقع کلمه "hero " برای طراحی سایت یک معنی کاملا متفاوت دارد.
"hero" در طراحی سایت متشکل از یک پس زمینه ، یک تصویر ، یک تیتر، یک زیر عنوان، و در برخی از نسخه همراه با متن یک یا دو کلمه ای می باشد.
به لطف صفحه نمایش بزرگتر و استفاده از پهنای باند بالاتر استفاده از تصاویر بزرگ در طراحی وب سایت در طول سال های اخیر به یکی از بروز ترین و محبوب ترین تکنیک های طراحی سایت تبدیل شد .
استفاده از تصاویر بزرگ (hero header) در طراحی سایت
امروزه طراحان وب سایت از تصویری جذاب و تاثیر گذار به همراه متن در اندازه بزرگتر بدون اینکه آسیبی به سرعت بارگذاری وب سایت وارد شود، استفاده می کنند. با توجه به اینکه "hero image" یا همان تصاویر بزرگ اولین چیزی است که در سایت دیده می شود استفاده از آن در طراحی سایت و توجه به چند نکته اساسی از جمله شفاف و گویا بودن تصویر و عدم استفاده از تصاویر مبهم و شلوغ باعث می شود از یک سو کاربران به مشاهده سایت علاقه مند شوند، و از سوی دیگر تصویر روشنی از وب سایت شما در ذهن خواهند داشت.
در ادامه چند نمونه از قالب وب سایت ها با رعایت "hero header" آورده شده است.
قالب وب سایت طراحی سایت وب کو وب
قالب طراحی سایت تبلیغات کلیکی
قالب طراحی سایت درگاه پرداخت
نکاتی برای استفاده از HERO HEADER در طراحی سایت
در طراحی سایت با استفاده از hero header چند ین مورد را باید در نظر داشته باشید که مهمترین آنها شامل موارد زیر می باشد:
از تصویر بزرگ و یا ویدئو به عنوان پس زمینه استفاده نمائید
استفاده از تیتر اصلی در یک قسمت از پس زمینه با فونت مناسب
بکارگیری متن کوتاه و اجتناب از شلوغ نمودن تصویر
استفاده از دکمه ها با فرم های زیبا و جذاب
در انتخاب رنگ ها دقت کنید، اگر شما از یک تصویر رنگی استفاده می کنید بقیه موارد اطراف آن را سفید و یا سیاه کنید. اگر تصویر سیاه و سفید است از رنگ آمیزی تک رنگ برای متن بالای سایت استفاده کنید. متن خود را در قسمتی از پس زمینه قرار دهید که مانع از دیده شدن تصاویر نشود. شما نیاز به استفاده از فونت های جذاب و جسورانه برای انتقال پیام خود به کاربران، دارید. از حروفی با سایز بزرگ و فونتی ظریف استفاده کنید این کار خوانایی متن را بالا می برد. همه نوشته ها برای موثر واقع شدن می بایست خوانا باشند. قرار دادن یک دکمه شفاف و با طراحی تخت در هدر زیبایی header را از یک طرف و راحتی کار کاربران را از سوی دیگر افزایش می دهد.
پیدا کردن بهترین مکان برای منوی در "hero image" و استفاده از منوی ثابت در این نوع طراحی سایت ،به کاربران اجازه می دهد به راحتی و با کلیک در اطراف صفحه بدون از دست دادن فرصت به بخش های دیگر صفحه راه یابند.
محل متن، دکمه ها و دیگر عناصر طراحی به گونه ای باید باشد که بخش مهمی از عکس مانند چهره انسان و یا محصولات با نام تجاری را نپوشاند.
استفاده از عناوین فوق العاده جسورانه
استفاده از فونت نازک برای متن چند خطی
رعایت فاصله بین حروف در تیترهایی با فونت ضخیم
استفاده از فونت ضخیم و نازک در کنار هم
اضافه کردن برخی از رنگ ها به کلمات تک واژه
اشتراک گذاری در :
مقالاتی که پیشنهاد می شود بخوانید
اهمیت و دقت رتبه بندی الکسا برای وب سایت
بازدید: 364
شاید گوشه کنار وب بارها عنوان رتبه الکسا (Alexa) را دیده و مطالبی در این خصوص الکسا خوانده باشید؛ سایتها و سرویس های خاصی نیز در این رابطه در گستره وب شکل گرفته اند که در مجموع تحت عنوان بهینه سازی و افزایش رتبه سایت SEO یا (Search Engine Optimization) فعالیت می کنند، اینکه الکسا چیست، چگونه آمار بازدیدهای یک سایت را به دست می آورد و رتبه بندی آن تا چه میزان اهمیت دارد، مطلبی است که در این مقاله به آن خواهیم پرداخت تا نهایتا به [...]
وب سایت داینامیک چیست و نقش آن در سئو سایت
بازدید: 358
در طراحی سایت های داینامیک از تکنولوژی هایی مانند دات نت، Perl، JSP، ASP Cold Fusion، و PHP استفاده می شود، و پیاده سازی آن به گونه ای است که در واقعیت صفحه ای وجود ندارد و تنها با درخواست کاربر ایجاد می گردد. وب سایت هایی هستند که به کمک برنامه نویسی وب و سیستم مدیریت محتوا تولید شده و محتوای این وب سایت ها توسط صاحبان آنها قابل بروز رسانی و تغییر است. از تکنولوژی های Ajax و Silverlight نیز بهره می برند. برتری وب سایت داینامیک نسبت به [...]
بهینه سازی وب سایت هایی با چند نام دامنه
بازدید: 307
از آنجایی که موتورهای جستجو از جمله گوگل ارزش زیادی برای کلمات واقعی در مورد نام دامنه قائل هستند، بسیاری از صاحبان سایت ها و کسب و کارهای آنلاین برای حضور وب سایت شان در بهینه سازی موتور جستجو توسط خریدن نام های دامنه ای که حاوی کلمات کلیدی هدفمندی هستند، اقدام نمایند.انجام این کار شاید صدمه ای به کسب و کار وارد نکند ولی اگر بر فرض 30 نام دامنه دارای کلمات کلیدی هدفمند وجود داشته باشد ولی نام دامنه سایت اصلی [...]
گامهای اولیه طراحی صفحات وب چیست؟
بازدید: 502
طراحی صفحات وب مهارتی اســت که جنبه های فنی ، هنری و نظری فراوانی دارد. جنبه های فنی طراحی وب ســایت بر شیوه های پیاده سازی وب سایت و فن آوری های به کار گرفته شده در آن تمرکز دارد تا وب سایت با سرعت مناسب و کارایی قابل قبول پیاده سازی شود و از امنیت کافی هم برخوردار باشد. در جنبه های هنری هم ملزومات ایجاد یک سایت با جذابیت های بصری بالا و زیبایی ظاهری مورد بحث قرار میگیرد.در جنبه های نظری این مهارت، روش شناســی طراحی [...]
ابزارها و وب سایتهای برای تست وب سایتهای طراحی شده در موبایل
بازدید: 383
با توجه به تنوع زیاد وسایل استفاده کننده از اینترنت مثل موبایل ، تلویزیون های هوشمند ، تبلت و ... در طراحی سایت و سئو سایت سازگار با تمامی وسایل بسیار مشکل خواهد بود یکی از مهمترین مشکلات عدم دسترسی به تمام وسایل و مدل ها برای تست های واقعی است.با توجه به این چالش بزرگ شبیه سازهای بسیار مختلفی برای تست و بررسی وب سایت ها در وسایل مختلف ساخته شده است. خوشبختانه شبیه سازهای موبایل انجام این کار را [...]
طراحی وب سایت استاندارد و جلوگیری از خروج کاربران وب سایت و روش کاهش Bounce rate سایت
بازدید: 384
ساختار استاندارد و مناسب با تکیه بر محتوای مناسب و کاربردی میتوانید میزان خروج کاربران از وب سایت قبل از بازدید تنها یک صفحه را بگیرید و بازدید کننده را ترغیب به دیدن تمامی صفحات وب سایت نماید .یک طراحی مناسب می تواند میزان خروج کاربران از وب سایت را کاهش داده و موجب افزایش فعالیت کاربران در وب سایت شود .تنها راه جلوگیری از خروج کاربران از وب سایت کاهش کاهش Bounce rate می باشد.Bounce rate چیست ؟مقیاسی است مناسب جهت بررسی [...]
