تکنیک Hero header در طراحی سایت چیست؟
با دیدن کلمه "hero" شاید بیشتر تصوری از قهرمان های خیالی همچون بتمن، سوپرمن و یا دیگر شخصیت های رمان گرافیکی داشته باشید، اما ما در مورد قهرمانانی چون مرد آهنین، بت من و مرد عنکبوتی صحبت نمی کنیم، در واقع کلمه "hero " برای طراحی سایت یک معنی کاملا متفاوت دارد.
"hero" در طراحی سایت متشکل از یک پس زمینه ، یک تصویر ، یک تیتر، یک زیر عنوان، و در برخی از نسخه همراه با متن یک یا دو کلمه ای می باشد.
به لطف صفحه نمایش بزرگتر و استفاده از پهنای باند بالاتر استفاده از تصاویر بزرگ در طراحی وب سایت در طول سال های اخیر به یکی از بروز ترین و محبوب ترین تکنیک های طراحی سایت تبدیل شد .
استفاده از تصاویر بزرگ (hero header) در طراحی سایت
امروزه طراحان وب سایت از تصویری جذاب و تاثیر گذار به همراه متن در اندازه بزرگتر بدون اینکه آسیبی به سرعت بارگذاری وب سایت وارد شود، استفاده می کنند. با توجه به اینکه "hero image" یا همان تصاویر بزرگ اولین چیزی است که در سایت دیده می شود استفاده از آن در طراحی سایت و توجه به چند نکته اساسی از جمله شفاف و گویا بودن تصویر و عدم استفاده از تصاویر مبهم و شلوغ باعث می شود از یک سو کاربران به مشاهده سایت علاقه مند شوند، و از سوی دیگر تصویر روشنی از وب سایت شما در ذهن خواهند داشت.
در ادامه چند نمونه از قالب وب سایت ها با رعایت "hero header" آورده شده است.
قالب وب سایت طراحی سایت وب کو وب
قالب طراحی سایت تبلیغات کلیکی
قالب طراحی سایت درگاه پرداخت
نکاتی برای استفاده از HERO HEADER در طراحی سایت
در طراحی سایت با استفاده از hero header چند ین مورد را باید در نظر داشته باشید که مهمترین آنها شامل موارد زیر می باشد:
از تصویر بزرگ و یا ویدئو به عنوان پس زمینه استفاده نمائید
استفاده از تیتر اصلی در یک قسمت از پس زمینه با فونت مناسب
بکارگیری متن کوتاه و اجتناب از شلوغ نمودن تصویر
استفاده از دکمه ها با فرم های زیبا و جذاب
در انتخاب رنگ ها دقت کنید، اگر شما از یک تصویر رنگی استفاده می کنید بقیه موارد اطراف آن را سفید و یا سیاه کنید. اگر تصویر سیاه و سفید است از رنگ آمیزی تک رنگ برای متن بالای سایت استفاده کنید. متن خود را در قسمتی از پس زمینه قرار دهید که مانع از دیده شدن تصاویر نشود. شما نیاز به استفاده از فونت های جذاب و جسورانه برای انتقال پیام خود به کاربران، دارید. از حروفی با سایز بزرگ و فونتی ظریف استفاده کنید این کار خوانایی متن را بالا می برد. همه نوشته ها برای موثر واقع شدن می بایست خوانا باشند. قرار دادن یک دکمه شفاف و با طراحی تخت در هدر زیبایی header را از یک طرف و راحتی کار کاربران را از سوی دیگر افزایش می دهد.
پیدا کردن بهترین مکان برای منوی در "hero image" و استفاده از منوی ثابت در این نوع طراحی سایت ،به کاربران اجازه می دهد به راحتی و با کلیک در اطراف صفحه بدون از دست دادن فرصت به بخش های دیگر صفحه راه یابند.
محل متن، دکمه ها و دیگر عناصر طراحی به گونه ای باید باشد که بخش مهمی از عکس مانند چهره انسان و یا محصولات با نام تجاری را نپوشاند.
استفاده از عناوین فوق العاده جسورانه
استفاده از فونت نازک برای متن چند خطی
رعایت فاصله بین حروف در تیترهایی با فونت ضخیم
استفاده از فونت ضخیم و نازک در کنار هم
اضافه کردن برخی از رنگ ها به کلمات تک واژه
اشتراک گذاری در :
مقالاتی که پیشنهاد می شود بخوانید
اینفوگرافیک چیست و کاربرد اینفوگرافیک در طراحی سایت چیست؟
بازدید: 1440
اولین اینفوگرافیک ها را می توان در نگاره های داخل غار انسان های نخستین یافت. با گذشت زمان و پیشرفت بشر ، اینفوگرافیک ها جنبه علمی تر و کاربردی تری به خود گرفتند . به گونه ای که اواخر سال 1400 میلادی لئوناردو داوینچی برای بیان ایده ها و تشریح مسائل علمی خود از اینفوگرافیک استفاده نمود. یکی از نخستین اینفوگرافیک های مدرن و کاربردی ، در کتاب اطلس سیاسی و تجاری ویلیام سیلوستر مورد استفاده قرارگرفت. این کتاب توسط [...]
نقش طراحی سایت واکنش گرا در سئو سایت و بهینه سازی وب سایت شما
بازدید: 1609
طراحی سایت واکنش گرا چرا برای سئو سایت و بهینه سازی وب سایت شما مهم و موثر می باشد؟ طراحی سایت واکنش گرا یا Responsive web design که بطور خلاصه به آن RWD نیز گفته می شود، شامل مجموعه ای از تکنیک های پیچیده که اجازه می دهد تا وب سایت خود را برای انطباق با هر اندازه صفحه نمایش طراحی نمائید و محتوای سایت شما در یک فرم و شکل بدون به هم ریختگی به راحتی قابل خواندن و پیمایش برای کاربران باشد.با توجه به استراتژی های جدید موتورهای [...]
اچ تی ام ال (HTML) و یا به عبارت دیگر زبان نشانه‌گذاری ابرمتنی چیست؟
بازدید: 1245
اچ تی ام ال زبان توصیف ساختار صفحه‌های وب است. دستورعمل‌های این زبان، برچسب (Tag) نام دارند در زبان html دستورات و متون مربوطه داخل تگ ها قرار می گیرند که هر کدام از این تگ ها خواص و کاربرد خاص خود را دارندزبانی‌است برای نشانه‌گذاری ابرمتن که برای تدوین قالب و طراحی صفحه‌های وب به کار می‌برند.HTMLمخفف عبارت Hyper TextMarkup Language می باشد که به معنای زبان نشانه گذاری متن می باشد. HTMLدر کنار [...]
چرا پست مهمان میتواند بسیار مفید و اهمیت داشته باشد؟
بازدید: 672
نوشتن پست های مهمان که حاوی پیشنهاد های خوب و اطلاعاتی مفیدی باشند بهترین روش برای معرفی خود به مشتریان بالقوه و شناساندن کار و تجارت شما به دیگران است و همچنین اثر بسیار مثبتی روی سئو سایت می گذارد.نوشتن پست های مهمان پلی ارتباطی است بین خوانندگان مطالب و عناصر اصلی و مهم سئو پست های مهمان، برند سازی یا برندینگ را افزایش می دهند. همان طور که در مقاله " در راه اندازی یک [...]
بک لینک چیست و بک لینک در بهینه سازی سایت چقدر مهم است؟
بازدید: 899
بک لینک به پیوندهای گفته میشود که از سایتهای دیگر به سایت شما داده میشود ، زمانی که از سایت خود به سایت دیگر پیوند میدهید، سایت مقابل از سایت شما بک لینک دریافت کرده است . در طراحی سایت امروزه بحث بک لینک به دنبال سئو از مهمترین دغدغه ها در دنیای اینترنت به حساب می آید. همچنین روش مناسبی برای بازاریابی اینترنتی در مبحث تجارت الکترونیک می باشد. ویرایشگران ویکی‌پدیا می‌گونید که بک لینک یک لینک خروجی از یک [...]
ویدیو مارکتینگ یا بازاریابی ویدئویی چیست و فوائد آن در بازاریابی اینترنتی
بازدید: 1081
یکی از جدیدترین ابزارهای شگفت انگیز برای جذب مخاطبان در بازار و رشد تجارت ما بازاریابی از طریق ویدئومی باشد. ویدئو مارکتینگ یا بازاریابی از طریق ویدئو شکلی از بازاریابی اینترنتی است که از طریق ویدئو به جذب مخاطب می پردازد. با توجه به اینکه بازاریابی از طریق ویدئو یک ابزار قدرتمند برای افزایش ترافیک سایت است و به رونق کسب و کار به طور چشمگیری کمک می کند؛ با این وجود هنوز بسیاری از صاحبان وب سایتها و مشاغل آن را [...]