تکنیک Hero header در طراحی سایت چیست؟
با دیدن کلمه "hero" شاید بیشتر تصوری از قهرمان های خیالی همچون بتمن، سوپرمن و یا دیگر شخصیت های رمان گرافیکی داشته باشید، اما ما در مورد قهرمانانی چون مرد آهنین، بت من و مرد عنکبوتی صحبت نمی کنیم، در واقع کلمه "hero " برای طراحی سایت یک معنی کاملا متفاوت دارد.
"hero" در طراحی سایت متشکل از یک پس زمینه ، یک تصویر ، یک تیتر، یک زیر عنوان، و در برخی از نسخه همراه با متن یک یا دو کلمه ای می باشد.
به لطف صفحه نمایش بزرگتر و استفاده از پهنای باند بالاتر استفاده از تصاویر بزرگ در طراحی وب سایت در طول سال های اخیر به یکی از بروز ترین و محبوب ترین تکنیک های طراحی سایت تبدیل شد .
استفاده از تصاویر بزرگ (hero header) در طراحی سایت
امروزه طراحان وب سایت از تصویری جذاب و تاثیر گذار به همراه متن در اندازه بزرگتر بدون اینکه آسیبی به سرعت بارگذاری وب سایت وارد شود، استفاده می کنند. با توجه به اینکه "hero image" یا همان تصاویر بزرگ اولین چیزی است که در سایت دیده می شود استفاده از آن در طراحی سایت و توجه به چند نکته اساسی از جمله شفاف و گویا بودن تصویر و عدم استفاده از تصاویر مبهم و شلوغ باعث می شود از یک سو کاربران به مشاهده سایت علاقه مند شوند، و از سوی دیگر تصویر روشنی از وب سایت شما در ذهن خواهند داشت.
در ادامه چند نمونه از قالب وب سایت ها با رعایت "hero header" آورده شده است.
قالب وب سایت طراحی سایت وب کو وب
قالب طراحی سایت تبلیغات کلیکی
قالب طراحی سایت درگاه پرداخت
نکاتی برای استفاده از HERO HEADER در طراحی سایت
در طراحی سایت با استفاده از hero header چند ین مورد را باید در نظر داشته باشید که مهمترین آنها شامل موارد زیر می باشد:
از تصویر بزرگ و یا ویدئو به عنوان پس زمینه استفاده نمائید
استفاده از تیتر اصلی در یک قسمت از پس زمینه با فونت مناسب
بکارگیری متن کوتاه و اجتناب از شلوغ نمودن تصویر
استفاده از دکمه ها با فرم های زیبا و جذاب
در انتخاب رنگ ها دقت کنید، اگر شما از یک تصویر رنگی استفاده می کنید بقیه موارد اطراف آن را سفید و یا سیاه کنید. اگر تصویر سیاه و سفید است از رنگ آمیزی تک رنگ برای متن بالای سایت استفاده کنید. متن خود را در قسمتی از پس زمینه قرار دهید که مانع از دیده شدن تصاویر نشود. شما نیاز به استفاده از فونت های جذاب و جسورانه برای انتقال پیام خود به کاربران، دارید. از حروفی با سایز بزرگ و فونتی ظریف استفاده کنید این کار خوانایی متن را بالا می برد. همه نوشته ها برای موثر واقع شدن می بایست خوانا باشند. قرار دادن یک دکمه شفاف و با طراحی تخت در هدر زیبایی header را از یک طرف و راحتی کار کاربران را از سوی دیگر افزایش می دهد.
پیدا کردن بهترین مکان برای منوی در "hero image" و استفاده از منوی ثابت در این نوع طراحی سایت ،به کاربران اجازه می دهد به راحتی و با کلیک در اطراف صفحه بدون از دست دادن فرصت به بخش های دیگر صفحه راه یابند.
محل متن، دکمه ها و دیگر عناصر طراحی به گونه ای باید باشد که بخش مهمی از عکس مانند چهره انسان و یا محصولات با نام تجاری را نپوشاند.
استفاده از عناوین فوق العاده جسورانه
استفاده از فونت نازک برای متن چند خطی
رعایت فاصله بین حروف در تیترهایی با فونت ضخیم
استفاده از فونت ضخیم و نازک در کنار هم
اضافه کردن برخی از رنگ ها به کلمات تک واژه
اشتراک گذاری در :
مقالاتی که پیشنهاد می شود بخوانید
اصول و قواعد طراحی سایت
بازدید: 3057
برای اینکه بتوانید آمار بازدید سایت خود را افزایش دهید و باعث پیشرفت کسب و کار خود شوید باید نکاتی را در طراحی سایت رعایت نمایید. برای صرفه جویی در هزینه و جلوگیری از مشکلات احتمالی که در طراحی سایت پیش می آید و هم چنین صرفه جویی در زمان و افزایش دقت به نکات زیر باید توجه کرد. این نکات علاوه بر تاثیر خوبی که بر طراحی سایت دارند بر سئو سایت نیز تاثیر می گذارند چون مدیران گوگل برنامه هایی را اجرایی می کنند تا [...]
چرا پست مهمان میتواند بسیار مفید و اهمیت داشته باشد؟
بازدید: 1415
نوشتن پست های مهمان که حاوی پیشنهاد های خوب و اطلاعاتی مفیدی باشند بهترین روش برای معرفی خود به مشتریان بالقوه و شناساندن کار و تجارت شما به دیگران است و همچنین اثر بسیار مثبتی روی سئو سایت می گذارد.نوشتن پست های مهمان پلی ارتباطی است بین خوانندگان مطالب و عناصر اصلی و مهم سئو پست های مهمان، برند سازی یا برندینگ را افزایش می دهند. همان طور که در مقاله " در راه اندازی یک [...]
CMS یا سیستم مدیریت محتوا چيست و چه كاربردهايی دارد؟
بازدید: 2366
به زبان ساده CMS نرم‌افزاری است برای طراحی وب‌سایتی حرفه‌ای.به این نکته توجه داشته باشید که عبارت CMS که مخفف Content Management System است و تنها منحصر به وب نیست و به مدیریت هر نوع محتوایی برمی‌گردد، ولی بیشترین کاربرد را در وب دارد.نرم‌افزار مدیریت محتوا یا ( Content Management System) CMS برنامه‌ای است که بطور کامل از ایجاد، مدیریت و بروزرسانی یک وب‌سایت پشتیبانی می‌کند و تمام ابزارهای مورد نیاز را برای مدیریت [...]
چرا موتورهای جستجو نمی توانند بدون SEO وب سایت شمارا بیابند
بازدید: 2278
بهینه سازی موتور جستجو سئو (SEO) چیست؟ SEO شامل به کارگیری فرایند ها در جهت بهبود و افزایش تعداد بازدیدکنندگان یک وب سایت به واسطه ی موتورهای جستجو گفته می شود. جنبه های زیادی در SEO وجود دارد که از کلمات موجود در صفحه ی شما تا ارتباطی که با دیگر صفحات برقرار می کنید را در بر می گیرد. بهینه سازی موتورهای جستجو تنها اشاره به این موتورها ندارد. بلکه اشاره به بهبود آن برای انسان ها نیز دارد. این مقاله ی آموزشی به توصیف [...]
CIW یا Certified Internet Web چیست؟
بازدید: 1658
CIW چیستکلمه CIW مخفف Certified Internet Web است که نام گروهی از طراحان وب بوده که در دهه 1990 این موسسه را تاسیس کردند و به سرعت جایگاه خود را میان شرکت‌های بزرگ پیدا کردند. استقبال از این مدارک به گونه‌ای بوده که این موسسه تا سال 1997 حدود 145000 مدرک را به دانشجویان خود داده است. در ابتدا پایه کار این گروه بر این اصل بنا شده بود که هیچ برنامه خاصی را آموزش نمی‌دادند چون با این کار خود را فقط به یک محصول منحصر می‌کردند. اما [...]
نقش طراحی سایت واکنش گرا در سئو سایت و بهینه سازی وب سایت شما
بازدید: 2561
طراحی سایت واکنش گرا چرا برای سئو سایت و بهینه سازی وب سایت شما مهم و موثر می باشد؟ طراحی سایت واکنش گرا یا Responsive web design که بطور خلاصه به آن RWD نیز گفته می شود، شامل مجموعه ای از تکنیک های پیچیده که اجازه می دهد تا وب سایت خود را برای انطباق با هر اندازه صفحه نمایش طراحی نمائید و محتوای سایت شما در یک فرم و شکل بدون به هم ریختگی به راحتی قابل خواندن و پیمایش برای کاربران باشد.با توجه به استراتژی های جدید موتورهای [...]