اصول طراحی هدر سایت

اصول طراحی هدر سایت

اصول طراحی هدر سایت

طراحی هدر(Header) سایت از مهم ترین تاثیرگذار ترین بخش های سایت محسوب می شود و در صورتی که هدر سایت از دید کاربر گزینه مناسبی نباشد در زمانی سریع به طور کلی از سایت خارج خواهد شد. در نظر داشته باشید که در عصر کنونی اینترنت حرف اول را می زند و به نوعی از بایدهای زندگی کنونی محسوب می شود. هر روز تعداد کسانی که از طریق اینترنت مشغول به کسب و کار هستند افزایش می یابد و این موضوع سبب می شود که طراحی هدر سایت بسیار مهم و ضروری محسوب شود. در واقع طراحی هدر سایت به نوعی بیبلورد و بنر سایت بوده و از ارکان بسیار مهم در طراحی محسوب می شود و یکی از مهمترین ارکان سایت شما میباشد.

هدر از چند بخش ساخته میشه؟

هدر ها میتونن از یک یا دو و یا سه بخش تشکیل شوند. در انواع سه بخشی یک نوار در بالای صفحه قرار میگیره که به آن ( Top Bar ) گفته میشه و یک نوار در وسط که به آن Main Bar گفته میشه، که معمولا در این قسمت از یک تصویر یا تصاویری مرتبط با موضوع و هدف سایت استفاده میشه که کاربر با دیدن آن به صورت بصری در عرض چند ثانیه متوجه نوع کسب و کار و موضوع سایت شما بشه و یک نوار پایینی در که به آن Botton Bar گفته میشه که طراح باید با استفاده از نیازی که برای سایت حس میکنه از یک یا هر سه بخش در طراحی هدر وب سایت استفاده کنه. در گذشته برای ساخت هدر وب سایت معمولا از یک نوار باریک در بالای صفحه اصلی استفاده میشد ولی جالب بدونین که امروزه دیگه اون طراحی خیلی مرسوم نیست و بیشتر سعی میشه که در طراحی هدر از کل فضای صفحه اصلی استفاده بشه و اکثر طراحی های امروز به این صورت میباشد.

مهم ترین اصول طراحی هدر سایت

اصول طراحی هدر سایت
برای طراحی هدر هیچ محدودیت و مرزبندی خاصی وجود ندارد و دست شما برای طراحی کامل باز است. اما یکسری اصول کلی است که باید قبل از طراحی به عنوان یک طراح بدانیم.

سایز هدر

هیچ پاسخ قطعی وجود ندارد که اندازه و سایز هدر دقیقا چقدر باید باشد. شاید برخی از منابع سعی کنند اندازه هایی رو تعیین کنند اما بهترین سایز، سایزی است که متناسب با سایت و طراحی کلی صفحات شما باشد. پس خیلی دنبال سایز های پیکسلی نباشید و متناسب با صفحات خودتان جلو روید. هدر نباید بسیار طولانی و خسته کننده باشد و یا خیلی کوتاه و مختصر و باید این موضوع را برعهده طراح بگذارید تا متناسب با سایر قسمت های سایت اندازه هدر را مشخص کنند.

هدر چسبان

هدر چسبان یکی از اصول طراحی هدر سایت است که با نام “sticky headers” نیز شناخته شده است. استیکی هدر به این معناست که با اسکرول صفحه هدر و یا منو چسبان هستند و قابل مشاهده هستند. این منو چسبان برای سایت های فروشگاهی که سبد خرید باید همیشه در جلوی چشم کاربر باشد و سایت های خدماتی که نیاز به cta و اطلاعات تماس دارند بیشتر استفاده می شود که یکسری از قابلیت ها جلوی چشم کاربر باقی بماند.

مزایای هدر سایت زیبا:

چرا طراحی هدر سایت زیبا آنقدر پر اهمیت است؟ سوالی که بارها پرسیده می شود. در نظر داشته باشید که رنگ و تصاویر مرتبط به همراه یک سری ایده پردازی های خاص سبب می شود که فضای موجود در سایت بسیار زیبا نشان دهد. در نظر داشته باشید که هدر سایت یک نوع معرف قوی برای سایت است، طبق بررسی های انجام شده هر کاربر در ابتدا به محض ورود به سایت به هدر آن توجه می کند. هدر در حدود 50 درصد از زیبایی های سایت شما را به خود اختصاص می دهد. اینطور که مشخص شده است شما با داشتن یک وب سایت زیبا با هدری خاص و تکراری یک تیر و دو نشان کرده اید. بهتر است که هدرها خاصیت بزرگ نمایی داشته باشند و به صورت دقیق کاربر را از وضعیت موجود سایت مطلع سازند و کاربر بتواند مسیر خودش را از طریق هدر به راحتی پیدا کند. یکی از اصل هایی که برای طراحی هدر سایت دیده می شود استفاده از تصاویر بسیار زیبا برای بخش هدر سایت است، بهتر است که تصاویر برای هدر سایت با حجم کم انتخاب شود به این ترتیب لود شدن آن سریعتر بوده و می تواند بسیار کاربردی تر باشد چرا که سرعت لود هدر مهمترین مسئله است.

عناصر اصلی در طراحی هدر

اصول طراحی هدر سایت
با توجه به موضوع و نوع فعالیت سایتتون میتونین از این عناصر در طراحی هدر سایتتون استفاده کنین:

لوگو

همان طور که میدانید هر کسب و کار یا تجارتی برند یا یک شعار تبلیغاتی مختص به خودش داره، با قرار دادن لوگو تجارتتون در هدر هم باعث میشین که موتورهای جستجوی گوگل سریع تر متوجه موضوع سایت شما بشن و هم باعث ماندگاری بشتردر ذهن مخاطب سایتتون میشین چرا که با اینکار شما همیشه در جلوی چشم مخاطب هستید.

امکان جستجو

قابلیت جستجو برای کاربر خیلی مهم است چون کاربر شما دو ست داره مطلب یا صفحه ای که دنبالش میگرده رو زود پیدا کنه.

خدمات وب سایت

این قسمت معمولا در نوار سربرگ قرار داده میشه مثلا اگه در حوزه طراحی سایت فعال هستید میتونین این قسمت یعنی طراحی سایت را در نوارسربرگ قرار دهید و یا اگر خدمات دیگری مانند خرید هاست و دامین هم دارین میتوانین اگر نوار سربرگ شما شلوغ نیست این قسمت ها را هم در نوار سربرگ قرار دهید. و یا به عنوان زیر گزینه های طراحی سایت قرار بدید.

اطلاعات تماس

کاربری که وارد سایت شما شده به هر دلیلی ممکن نیاز داشته باشه با شما تماس بگیره به همین خاطر باید حواستون باشه که اطلاعات تماستون مثل شماره اصلی، ایمیل در صورت امکان آدرستون رو در فهرست ناوبری قرار بدین یا اینکه یه گزینه تحت عنوان تماس با ما در فهرست ناوبری داشته باشین که کاربر با رفتن به اون صفحه بتونه به اطلاعات تماس با شما دسترسی پیدا کنه.

شبکه های اجتماعی

همون طور که میدونین شبکه های اجتماعی در دنیای تجارت امروز اهمیت ویژه ای دارند و جایگاه خودشون رو در بین مردم پیدا کردن پس بهتره آیکون شبکه های اجتماعی تون رو درهدر قرار بدین تا اگه کاربر میخواد شما رو از اون طریق پیگیری کنه این امکان براش فراهم باشه.

گزینه ثبت نام یا سابسکریپشن

یک سری از سایت ها قسمت مقالات و اخبار دارند و کاربر با ثبت نام در سایت این امکان رو پیدا میکنه از طریق ایمیلی که براش فرستاده میشه از آخرین مقالات و اخبار اطلاع پیدا کنه.

سبد خرید

اصول طراحی هدر سایت
اگه سایتی که دارین طراحی میکنین فروشگاهی، میتونین موقع طراحی هدر آیکون سبد خرید در هدر تمامی صفحات قرار بدید اینجوری نرخ تبدیل سایتتون هم افزایش پیدا میکنه که این از نظر سئو و بهینه سازی خیلی برای سایتتون خوبه در این مورد تو مقاله های بعدیمون بیشتر براتون توضیح میدیم.

سوییچ تغییر زبان

اگه سایتی که دارین فقط مخاطب های فارسی زبان نداره و اصطلاحا سایتتون چند زبانه است میتونین موقع طراحی فوتر یک تب با عنوان تغییر زبان در آن قرار بدین اینطوری همون اول کاربر میتونه زبان سایت عوض کنه و گیج نشه همانند سایت شرکت طراحی سایت و برنامه نویسی دات وب که در هدر سایت مشاهده میکنید.

تصویر یا عکس

موقع طراحی فوتر میتونین در قسمت میانی فوتر یه عکس از مدیر عامل یا صاحب سایت و یا یه تصویر خوب از نمونه کاراتون قرار بدین اینطوری میتونین بیشتر نظر مخاطبتون جلب کنین.

فهرست ناوبری

این گزینه هایی که عنوان کردیم مثل شبکه های اجتماعی، تماس با ما، خانه ( صفحه اصلی )، سوییچ ( تغییر زبان )، گزینه ثبت نام را میتونین در این نوار قرار بدین.

وقتی دارین هدر سایتتون رو طراحی میکنین لزومی نداره تمام این مواردی که گفتیم رو در هدر قرار بدین، چون هدر سایت شلوغ میشه و این مورد علاوه بر اینکه ظاهر زیبایی نداره ممکن است باعث گیجی و سردرگمی کاربر بشه به علاوه تاثیرات فنی منفی هم داره یکیش این که، باعث سنگین شدن سایت میشه و سرعت لود شدن این قسمت بالا میبره و این مورداز نظر گوگل یک امتیاز منفی برای سایت شما در نظر گرفته میشه، زیرا به احتمال زیاد کاربر منتظر لود شدن سایت نمیمونه و سایت شما رو ترک میکنه و این خروج همان طور که می دونین به لحاظ سئو به سایت شما آسیب میزنه و امتیاز ساییتون رو پایین میاره. پس سعی کنین تا جایی که امکان داره اصول طراحی فوتر رو رعایت کنین.

جهت اطلاعات بیشتر میتوانید از طریق صفحه تماس باما و یا صفحه اینستاگرام با تیم ما در ارتباط باشید.

DOTWEB
ما در تیم تولید محتوای شرکت طراحی سایت و برنامه نویسی دات وب در تلاش هستیم تا بهترین مقالات آموزشی در زمینه طراحی سایت و کسب‌و‌کارهای اینترنتی را برای شما فراهم کنیم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

error: