تکنیک Hero header در طراحی سایت چیست؟
با دیدن کلمه "hero" شاید بیشتر تصوری از قهرمان های خیالی همچون بتمن، سوپرمن و یا دیگر شخصیت های رمان گرافیکی داشته باشید، اما ما در مورد قهرمانانی چون مرد آهنین، بت من و مرد عنکبوتی صحبت نمی کنیم، در واقع کلمه "hero " برای طراحی سایت یک معنی کاملا متفاوت دارد.
"hero" در طراحی سایت متشکل از یک پس زمینه ، یک تصویر ، یک تیتر، یک زیر عنوان، و در برخی از نسخه همراه با متن یک یا دو کلمه ای می باشد.
به لطف صفحه نمایش بزرگتر و استفاده از پهنای باند بالاتر استفاده از تصاویر بزرگ در طراحی وب سایت در طول سال های اخیر به یکی از بروز ترین و محبوب ترین تکنیک های طراحی سایت تبدیل شد .
استفاده از تصاویر بزرگ (hero header) در طراحی سایت
امروزه طراحان وب سایت از تصویری جذاب و تاثیر گذار به همراه متن در اندازه بزرگتر بدون اینکه آسیبی به سرعت بارگذاری وب سایت وارد شود، استفاده می کنند. با توجه به اینکه "hero image" یا همان تصاویر بزرگ اولین چیزی است که در سایت دیده می شود استفاده از آن در طراحی سایت و توجه به چند نکته اساسی از جمله شفاف و گویا بودن تصویر و عدم استفاده از تصاویر مبهم و شلوغ باعث می شود از یک سو کاربران به مشاهده سایت علاقه مند شوند، و از سوی دیگر تصویر روشنی از وب سایت شما در ذهن خواهند داشت.
در ادامه چند نمونه از قالب وب سایت ها با رعایت "hero header" آورده شده است.
قالب وب سایت طراحی سایت وب کو وب
قالب طراحی سایت تبلیغات کلیکی
قالب طراحی سایت درگاه پرداخت
نکاتی برای استفاده از HERO HEADER در طراحی سایت
در طراحی سایت با استفاده از hero header چند ین مورد را باید در نظر داشته باشید که مهمترین آنها شامل موارد زیر می باشد:
از تصویر بزرگ و یا ویدئو به عنوان پس زمینه استفاده نمائید
استفاده از تیتر اصلی در یک قسمت از پس زمینه با فونت مناسب
بکارگیری متن کوتاه و اجتناب از شلوغ نمودن تصویر
استفاده از دکمه ها با فرم های زیبا و جذاب
در انتخاب رنگ ها دقت کنید، اگر شما از یک تصویر رنگی استفاده می کنید بقیه موارد اطراف آن را سفید و یا سیاه کنید. اگر تصویر سیاه و سفید است از رنگ آمیزی تک رنگ برای متن بالای سایت استفاده کنید. متن خود را در قسمتی از پس زمینه قرار دهید که مانع از دیده شدن تصاویر نشود. شما نیاز به استفاده از فونت های جذاب و جسورانه برای انتقال پیام خود به کاربران، دارید. از حروفی با سایز بزرگ و فونتی ظریف استفاده کنید این کار خوانایی متن را بالا می برد. همه نوشته ها برای موثر واقع شدن می بایست خوانا باشند. قرار دادن یک دکمه شفاف و با طراحی تخت در هدر زیبایی header را از یک طرف و راحتی کار کاربران را از سوی دیگر افزایش می دهد.
پیدا کردن بهترین مکان برای منوی در "hero image" و استفاده از منوی ثابت در این نوع طراحی سایت ،به کاربران اجازه می دهد به راحتی و با کلیک در اطراف صفحه بدون از دست دادن فرصت به بخش های دیگر صفحه راه یابند.
محل متن، دکمه ها و دیگر عناصر طراحی به گونه ای باید باشد که بخش مهمی از عکس مانند چهره انسان و یا محصولات با نام تجاری را نپوشاند.
استفاده از عناوین فوق العاده جسورانه
استفاده از فونت نازک برای متن چند خطی
رعایت فاصله بین حروف در تیترهایی با فونت ضخیم
استفاده از فونت ضخیم و نازک در کنار هم
اضافه کردن برخی از رنگ ها به کلمات تک واژه
اشتراک گذاری در :
مقالاتی که پیشنهاد می شود بخوانید
تصورات غلط و رایج درباره طراحان وب
بازدید: 1910
اصولا امروزه هر فردی که یک کتاب طراحی وب را مطالعه کرده باشد ، تصورش اینست که دیگر خدای طراحی است و کسی بالای دست او کار نمی کند، اما واقعا یک طراحی وب شامل دانسته هایی از حیطه های مختلف مثل CSS3, HTML5,Javascript,PHP,jQuery و موارد زیاد دیگر است که همه با هم می تواند یک طراح وب را به جلو سوق دهد. برخی از تصورات غلط و البته رایج در مورد یک طراح وب را که اکثرشان هم درست نیستند ، توضیح داده و نکاتی مهم وقابل توجهی را بیان می [...]
بهینه سازی وب سایت هایی با چند نام دامنه
بازدید: 1868
از آنجایی که موتورهای جستجو از جمله گوگل ارزش زیادی برای کلمات واقعی در مورد نام دامنه قائل هستند، بسیاری از صاحبان سایت ها و کسب و کارهای آنلاین برای حضور وب سایت شان در بهینه سازی موتور جستجو توسط خریدن نام های دامنه ای که حاوی کلمات کلیدی هدفمندی هستند، اقدام نمایند.انجام این کار شاید صدمه ای به کسب و کار وارد نکند ولی اگر بر فرض 30 نام دامنه دارای کلمات کلیدی هدفمند وجود داشته باشد ولی نام دامنه سایت اصلی [...]
محتوای تکراری در طراحی سایت چیست و انواع روش‌های رفع مشکل محتوای تکراری کدامند؟
بازدید: 2157
امروزه علمی به نام سئو (seo یا Search Engine Optimization) نقشی کلیدی در موفقیت یک سایت یا وبلاگ بازی می کند، البته این علم چیزی نیست جزء رعایت یک سری موارد در جهت ایجاد محتوای استاندارد در وب و آگاهی از نحوه عملکرد موتورهای جستجوگر به عنوان رکن تعیین کننده در افزایش بازدیدها و از طرفی ایجاد محتوای مفید و کاربرپسند برای یاری رساندن به مخاطبان و در نتیجه جلب محبوبیت بیشتر برای سایت یا وبلاگ شما نزد آنان، اما آنچه که سبب می شود [...]
پروتوتایپ چیست و چه کاربردی در طراحی سایت دارد؟
بازدید: 7795
وقتی صحبت از پروتوتایپ می شود منظور طرحی محاوره ای است که به کاربر اجازه می دهد تا بین صفحات سایت بگردد و از قابلیت هایی مثل منو های دراپ داون استفاده کند. پروتوتایپ وب می تواند نسخه ی آزمایشی از یک وب سایت بعد از تولید و طراحی آن باشد. پروتوتایپ می تواند از یک طراحی کاغذی گرفته تا html ، و قابل کلیک کردن باشد.. راه های مختلفی برای ساختن پروتوتابپ وجود دارد. ما مثال های قابل کلیک پروتوتایپ را در پاورپوینت و سندهای [...]
بهینه سازی سایت و سئو تضمینی سایت یا فروشگاه شما
بازدید: 2099
سئو چیست و چگونه انجام می پذیرد؟سئو عبارت است از بهینه سازی وب سایت برای موتورهای جستجوگر که گوگل مهمترین آنهاست و تعریفی که ما برای سئو ارائه می دهیم راهنمایی کاربران به وبسایت هایی که مرتبط ترین موضوع را با کلمه کلیدی مورد جستجو آنها دارد اما چگونه به گوگل بگوییم که سایت ما مرتبط ترین سایت با کلمه کلیدی مورد جستجو می باشد ؟ پاسخ این سوال در استراتژی سئو سایت میباشد که از مهمترین آنها می توان به تولید محتوای [...]
ای‌جکس چیست و راه حل های رفع مشکل سئو در AJAX
بازدید: 3481
مقدمهحدود سال 2010 شرکت گوگل اعلام نمود برنامه ها و وب سایتهایی که از Ajax می کنند، قابل Crawl هستند. همانگونه که اغلب شما می دانید، موتورهای جستجو کدهای HTML را خیلی سریع ایندکس می نمایند اما نمی توانند محتواهای جاوا اسکریپت و اِی جکس (AJAX ) را درک کنند.هدف از این مقاله معرفی AJAX، بررسی مشکل Crawl محتواهای AJAX و ارائه راه حل های متخلف برای رفع این مشکل می باشد.ای جکس چیست؟ای جکس AJAX مخفف کلمات( Asynchronous JavaScript And XML)، [...]