تکنیک‌های مهم طراحی هدر سایت

طراحی هدر سایت بهتر است با توجه به نکات ارائه شده در این مقاله انجام شود تا بهترین و جذاب ترین هدرسایت را داشته باشید.

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

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

ویژگی های هدر موردانتظار

 

 

طراحی هدر سایت باید بر اساس ویژگی های خاصی صورت بگیرد که مهمترین آنها شامل موارد زیر است:

• لوگو
• عنوان صفحه
• ناوبری
• جستجو کردن
• سبد خرید (مخصوص وب سایت های تجارت الکترونیک)
• ورود و خروج
• لینک پروفایل کاربری
• و …

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

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

برای طراحی هدر باید به اصولی توجه داشت و این اصول را مو به مو اجرا کرد:

مرحله یک: ورود به المنتور

پس از نصب افزونه المنتور پرو، بخشی در پیشخوان تحت عنوان قالب ها افزوده می شود. چنانچه بر روی تب قالب ها بایستید، از بخش Theme builder این تب می توان به فضای المنتور ورود نمود.

مرحله دوم: انتخاب قالب هدر

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

مرحله سوم طراحی هدر سایت : انتخاب رنگ پس زمینه

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

مرحله چهارم: تعیین بخش داخلی و تعداد ستون ها

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

مرحله پنجم: پر کردن ستون ها

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

مرحله ششم: طراحی ستون مهم دیگر

در ادامه روند طراحی سربرگ باید ستون بعدی را پر کرد. در ستون بعدی باید ابزارک یا عنصر nav menu به کار گرفته شود تا بتوانیم منوی وب سایت را در این ستون ها با بهره گیری از این عناصر ایجاد نمود.

مرحله هفتم طراحی هدر سایت : انجام تنظیمات پایانی

در بخش ستون سوم برای گنجاندن شماره تماس از ابزارک تیتر کمک گرفته می شود و در بخش زیر این ابزارک، تیتر ابزارک جعبه گذاشته می شود تا بتوان یک حساب کاربری در این بخش بوجود آورد. در این بخش باید به جای آیکون جعبه از آیکون متناسبی با حساب کاربری استفاده نمود و این آیکون را بارگذاری نمود. پس از ویرایش، باید تنظیماتی مانند رنگ، تایپوگرافی و … قرار داده شود.

نکات کلیدی و تکمیلی برای ایجاد هدرسایت

برای اینکه طراحی هدر سایت به صورت حرفه ای انجام شود، باید به نکات زیر توجه نمود:

• اندازه سربرگ باید به درستی انتخاب شود. اندازه خاصی برای سربرگ تعیین نشده است. اما اغلب طراحان توصیه می کنند که عرض 1024 الی 1920 پیکسل برای هدر، ایده آل می باشد.
• به منظور آرایش درست المان در هدر بایستی به اهمیت هر بخش دقت نظر داشت. به منظور دسترسی راحت به اطلاعات وب سایت باید سلسله مراتب بصری در هدر رعایت شود.
• بهترین مکان باید برای قرارگیری لوگوی سایت، انتخاب شود. مکان قرارگیری لوگو یا آرم وب سایت را با توجه به آرایش طراحی سایت انتخاب می کنند.
• ناوبری سایت باید کاملاً کاربرپسند باشد. توجه داشته باشید که زیاده روی در پیوندها موجب نامنظم دیده شدن هدر می شود. در طراحی هدر سایت توجه شود که تنها پیوندهای مهم در این بخش قرار بگیرد.
• قرار دادن مهمترین CTA در سربرگ باید موردتوجه قرار بگیرد. در هر وب سایتی مواردی مانند “با ما تماس بگیرید”، ” افزودن به سبد خرید”، “مشاوره رایگان” و … وجود دارند. توجه داشته باشید که اگر CTA خوبی را در هدر قرار ندهید حتماً در فروش دچار مشکل می شوید.
• تناسب طراحی سربرگ با دیگر بخش های وب سایت، بسیار مهم است. اگر به این مسئله توجهی نشود، یک تناقض بسیار بد ایجاد می شود. هدر را به گونه ای طراحی نموده که ضمن قابل توجه بودن نسبت به بخش های دیگر، با سایر بخش ها هماهنگ و متناسب باشد.
• نکته دیگری که در طراحی هدر سایت باید موردتوجه قرار بگیرد این است که وضعیت هدر در صفحه گوشی همراه بررسی شود. زیرا بسیاری از کاربران اینترنت، توسط گوشی همراه در اینترنت حضور دارند. بنابراین هدر ایجاد شده باید با صفحه گوشی همراه سازگار باشد و در صفحه گوشی همراه به خوبی دیده شود. زمانی که وب سایت به صورت ریسپانسیو طراحی شده باشد و بهینه سازی برای موبایل به خوبی انجام شود، حتماً هدر در سایز مناسبی ایجاد خواهد شد که برای موبایل بهینه است.