هدر (Header) بالاترین بخش هر سایت است که نقش حائز اهمیتی را در فرآیند طراحی سایت حرفه ای و جلب توجه بازدیدکنندگان ایفا می‌کند. هدر یکی از عناصر بصری اصلی سایت شناخته می‌شود و معمولا اولین چیزی است که کاربر پس از ورود به یک وب سایت مشاهده می‌کند. از این رو طراحی هدر سایت از اهمیت بالایی برخوردار است زیرا در نگاه اول اطلاعات کلیدی را درباره نوع محتواها و رویکرد سایت شما در اختیار کاربر قرار می‌دهد. تمامی هدرها الزما به یک روش طراحی نمی‌شوند و برخی طراحان برای صفحه اصلی وب سایت خود از روش‌های متفاوتی استفاده می‌کنند تا از طریق آن بتوانند توجه کاربران را به محتواهای سایت جلب کرده و آنان را با خود همراه سازند.
اگر طراحی هدر سایت شما جذاب و منحصر به فرد نباشد و نتواند در چند ثانیه اول توجه مخاطبان را به خود جلب کند، قطعا توجه طیف گسترده‌ای از بازدیدکنندگان را از دست می‌دهید. بنابراین برای آنکه بتوانید توجه و البته اعتماد کاربران را جلب نمایید باید یک هدر جذاب و حرفه‌ای برای وب سایت خود طراحی کنید تا بتوانید آنان را نسبت به بازدید از بخش‌های مختلف سایت‌تان ترغیب نمایید. اما چگونه هدر وب سایت را طراحی کنیم تا بتوانیم میزان بازدید از سایت خود را افزایش دهیم؟ در ادامه این مطلب هر آنچه که باید درباره ساخت هدر برای سایت بدانید را به شما توضیح می‌دهیم و روش‌های طراحی هدر سایت را نیز به طور کامل بررسی خواهیم کرد. با ما همراه باشید.
![طراحی هدر سایت]()
هدر سایت چیست؟
هدرسایت ابتدایی‌ترین و اولین تصویری است که کاربر پس از ورود به یک وب سایت مشاهده می‌کند و حاوی اطلاعات و بخش‌های مختلفی است. هدر در واقع یک تصویر بصری یا یک عنصر تایپوگرافی است که در بالای صفحه اصلی وب سایت قرار می‌گیرد و اطلاعات کلیدی را درباره محتوای وب سایت و رویکرد کلی آن در اختیار مخاطب قرار می‌دهد. هدر صفحه اصلی سایت می‌تواند با هدر سایر صفحات آن تفاوت داشته باشد و یا از یک هدر برای تمامی صفحات استفاده شود. هدرها از عناصر مختلفی همچون لوگو سایت، نوار جستجو، تصویر مرتبط با هدف سایت، عنوان اصلی، منوی سایت، اطلاعات مربوط به آدرس شبکه‌های اجتماعی، اطلاعات تماس، دکمه کال تو اکشن (CTA)، ثبت نام، سبد خرید، خدمات وب سایت و یا گزینه تغییر زبان است که تمامی اطلاعات مورد نیاز کاربران را به صورت یک جا در اختیار آنان قرار می‌دهد.
نوشتن عنوان جذاب و انتخاب تصویر مناسب یکی از مهم‌ترین بخش‌های طراحی هدر سایت در نظر گرفته می‌شود زیرا این دو آیتم، اولین مواردی هستند که در نگاه اول توجه کاربر را به خود جلب می‌کنند. جالب است بدانید که بر اساس گزارش گوگل، کاربران تنها در طول 2 الی 3 ثانیه پس از باز کردن یک وب سایت تصمیم به ادامه بازدید از آن را می‌گیرند. قطعا هدر سایت اولین چیزی است که در این مدت زمان محدود توجه بازدیدکنندگان را جلب می‌کند و آنان را نسبت به بازدید از سایر صفحات ترغیب خواهد کرد. بنابراین طراحی حرفه‌ای و جذاب هدر سایت از اهمیت بالایی برخوردار است و نقش مهم و تاثیرگذاری را در میزان بازدید از آن ایفا می‌کند.
انواع هدر سایت
طراحی هدر سایت به دو روش ثابت و متحرک انجام می‌شود که انتخاب این روش‌ها کاملا به سلیقه و ترجیح شما بستگی دارد. هدر ثابت همانطور که از نام آن پیداست به هدری اشاره دارد که به صورت ثابت طراحی می‌شود و هیچگونه حرکتی ندارد. نقطه مقابل آن نیز هدر متحرک یا پویا است که بخشی از آن با استفاده از ابزارها و روش‌های گرافیکی به صورت متحرک طراحی می‌شود و به راحتی می‌تواند توجه بیننده را به خود جلب نماید. با این حال اکثر وب سایت‌های موفق و پربازدید برای طراحی هدر سایت خود هدر ثابت را انتخاب می‌کنند و به جای تمرکز بر متحرک بودن عناصر مختلف آن به سایر المان‌های مهم هدر از جمله جذابیت بصری آن توجه می‌کنند.
اصول طراحی هدر سایت
طراحی هدر سایت شاید در نگاه اول، ساده به نظر برسد و با خود گمان کنید که تنها با انتخاب یک تصویر و قرار دادن گزینه‌ها و بخش‌های مختلف در آن به پایان می‌رسد. در صورتی که چنین نیست و برای طراحی هدر سایت باید به استانداردها و موارد مختلفی توجه داشته باشید و هدر خود را بر اساس آنها طراحی کنید. برخی از مهم‌ترین مواردی که در طراحی هدر سایت باید به آنها توجه داشته باشید شامل:
![آموزش طراحی کردن هدر سایت]()
سایز هدر
برای پاسخ به این سوال که هدر باید در چه سایزی طراحی شود، پاسخ صریح و قطعی وجود ندارد. اما به طور کلی اندازه هدر سایت باید متناسب با هدف و طراحی کلی سایت انتخاب شود تا بتواند تاثیر خوبی بر مخاطب داشته باشد. سایز هدر نباید طوری باشد که بر درک بازدیدکنندگان از محتوای سایت تاثیر بگذارد و به نوعی حواس آنها را از سایر بخش‌های مهم پرت کند. به عنوان مثال وب سایت‌های آموزشی و یا اطلاعاتی بهتر است هدر خود را در اندازه‌های کوچک طراحی کنند اما لندینگ پیج‌ها به منظور جلب توجه مخاطب باید هدر خود را در ابعاد بزرگ طراحی نمایند. بنابراین اندازه هدر به نوع طراحی و رویکرد سایت بستگی دارد و قانون مشخصی برای تعیین سایز آن وجود ندارد.
هدر ثابت یا چسبان
هدر چسبان (Sticky Header) یکی از روش‌های قدیمی برای طراحی هدر سایت است که در گذشته تمامی هدرها به همین روش طراحی می‌شدند. یعنی بخش‌های مختلف هدر در تمامی صفحات و با اسکرول کردن صفحه همچنان در بالای سایت قرار دارند و قابل مشاهده هستند. این روش در حال حاضر کمتر مورد استفاده قرار می‌گیرد و هدر معمولا در قالب یک تصویر مرتبط با وب سایت به همراه عناوین جذاب طراحی می‌شود. با این حال وب سایت‌های فروشگاهی باید هدر خود را به صورت چسبان طراحی کنند تا خدمات و گزینه‌های موردنیاز همچون بخش جستجوی محصول، افزودن به سبد خرید، اطلاعات تماس و غیره به راحتی در دسترس قرار داشته باشند تا کاربر برای پیدا کردن آنها دچار مشکل نشود. هدر چسبان موجب بهبود تجربه کاربران خواهد شد زیرا در این صورت به راحتی می‌توانند در وب سایت شما به خدمات مورد نظر خود دسترسی پیدا کنند.
پیام هدر
پیش از طراحی هدر ابتدا باید شکل ظاهری سایت و هدف اصلی آن را مشخص نمایید. اگر وب سایت شما یک وب سایت فروشگاهی جهت عرضه محصولات مختلف است، طراحی هدر سایت باید شامل لینک‌هایی به بخش‌های اصلی سایت و همچنین یک تصویر اصلی و بزرگ در صفحه اول باشد زیرا هدف اصلی چنین وب سایتی، ارائه محصولات مختلف به روشی تاثیرگذار و جذاب است. این روش از طراحی هدر برای وب سایت‌های تجاری و بیزینسی کمی تفاوت دارد زیرا کاربر در این نوع وب سایت‌ها باید به راحتی بتواند با مدیر سایت ارتباط برقرار کند، سفارشات خود را ثبت کرده و آنها را پیگیری کند. بنابراین طراحی هدر سایت های بیزینسی باید دارای گزینه‌های مختلفی باشد تا کاربر خیلی سریع بتواند به بخش‌های موردنظر خود دسترسی پیدا کند. یک هدر می‌تواند پیام‌های مختلفی را به کاربران انتقال دهد که برخی از مهم‌ترین آنها شامل:
ترغیب کاربر نسبت به انجام یک کار
جلب توجه و اعتماد کاربر
تشویق بازدیدکننده نسبت به کسب اطلاعات بیشتر
نمایش رویکرد کلی سایت
بنابراین پیش از طراحی هدر سایت ابتدا باید هدف خود از طراحی آن را مشخص کنید تا در مسیر درستی از طراحی این بخش مهم قرار بگیرید.
![انواع هدر سایت]()
تصاویر مرتبط
انتخاب تصویر مناسب و مرتبط یکی دیگر از مهم‌ترین اصول طراحی هدر سایت است و تصویر مورد استفاده در هدر باید به طور مستقیم اطلاعات مربوط به کسب و کار موردنظر را به کاربر انتقال دهد. به عنوان مثال اگر وب سایت شما با هدف ارائه خدمات مربوط به تحویل غذا طراحی شده است، تصویر هدر آن باید تصویری مرتبط با غذا و پیک موتوری باشد تا مخاطب با نگاه اول بتواند با حوزه فعالیت و نوع خدمات شما آشنا شود. تصاویر یکی از اصلی‌ترین ابزار کار طراحان وب در نظر گرفته می‌شود زیرا عکس‌ها قادر به روایت یک داستان، جلب توجه و همچنین برانگیختن احساسات بازدیدکننده هستند و تاثیر بسزایی بر میزان بازدید از یک وب سایت دارند.
طراحی حرفه ای کال تو اکشن (CTA)
قرار دادن گزینه‌های مختلف CTA یکی دیگر از مواردی مهمی است که در زمان طراحی هدر سایت باید به آن توجه داشته باشید. افزودن آیتم‌هایی همچون «ورود»، «ثبت نام» و یا «کسب اطلاعات بیشتر» از جمله CTA های کاربردی هستند که می‌توانند در هدر سایت قرار داده شوند. بنابراین برای آنکه توجه کاربر به این گزینه‌ها جلب شود و نسبت به کلیک بر روی آنها ترغیب شود، باید دکمه‌های کال تو اکشن هدر را در مکان مناسبی قرار دهید؛ یعنی این گزینه‌ها در جایی قرار داده شوند که در معرض دید کاربر باشند. بنابراین اگر کاربر نسبت به کلیک بر دکمه CTA ترغیب شود، میزان نرخ کلیک و بازدید از سایت شما به تدریج افزایش پیدا کرده و همین موضوع نیز موجب بهبود سئو و جایگاه سایت شما خواهد شد.
فونت مناسب برای هدر
کابران پس از ورود به یک وب سایت، پیش از هر چیز به بخش‌ها و گزینه‌های مختلف سایت و همچنین اطلاعات درج شده در آن همچون نام شرکت، اطلاعات تماس و پیشنهادات ویژه آن توجه می‌کنند. از این رو باید از فونت‌های ساده، واضح و خوانا استفاده کنید تا کاربر در نگاه اول بتواند آن را به راحتی بخواند. استفاده از فونت‌های فانتزی و عجیب و غریب برای بخش‌های مختلف هدر موجب حواس پرتی کاربران شده و هیچ جذابیتی برای آنان ندارد. تمامی وب سایت‌های موفق و پربازدید همواره از فونت‌های ساده برای هدر و همچنین سایر بخش‌های سایت خود استفاده می‌کنند تا کاربر برای خواندن محتواها و یا پیدا کردن گزینه‌های موردنظر خود دچار سردرگمی نشود.
عنوان جذاب
نوشتن عنوان جذاب نیز یکی دیگر از موارد حائز اهمیتی است که در زمان طراحی هدر سایت باید به آن توجه کنید. هر هدر دارای یک عنوان اصلی است که معمولا در قالب یک جمله کوتاه همچون شعار کسب و کار و در وسط هدر قرار داده می‌شود. عنوان اصلی هدر نیز باید متناسب با هدف سایت و به صورت کوتاه نوشته شود تا کاربر با خواندن آن بتواند تشخیص دهد که وب سایت شما دارای چه محتواها و یا چه خدماتی است. نوشتن عنوان جذاب نقش مهمی را در جلب توجه کاربران ایفا می‌کند؛ بنابراین برای نوشتن آن دقت زیادی داشته باشید.
![طراحی هدر سایت با html]()
طراحی ساده هدر
«رعایت اصل سادگی» نیز مهم‌ترین نکته‌ای که برای طراحی هدر سایت خود باید به آن توجه داشته باشید تا بتوانید توجه کاربران را جلب کرده و آنها را نسبت به بازدید از بخش‌های مختلف سایت ترغیب نمایید. اگر هدر خود را ساده و همسو با اهداف اصلی سایت طراحی کنید به راحتی می‌توانید کاربران را با خود همراه سازید و دنبال آن میزان بازدید از سایت‌تان را افزایش دهید. از بکار بردن عناصر بصری متعدد و تصاویر شلوغ و پر نقش در هدر خودداری کرده و برای طراحی آن از رنگ‌های متضاد استفاده کنید.
طراحی هدر سایت با المنتور
روش‌های مختلفی برای طراحی هدر سایت وجود دارد که با استفاده از آنها می‌توانید هدر خود را بر اساس نیاز و رویکرد سایت‌تان طراحی کنید. اگر وب سایت شما مبتنی بر وردپرس است، برای طراحی هدر می‌توانید از افزونه قالب ساز المنتور (Elementor) استفاده کنید. این افزونه برای ساخت بخش‌های مختلف سایت همچون هدر بسیار کاربردی است و با استفاده از قالب‌های متعدد آن می‌توانید هدر دلخواه خود را طراحی کرده و آن را بر اساس سلیقه خود شخصی سازی کنید.
طراحی هدر سایت با بوت استرپ
بوت استرت (BootStrap) یک فریم ورک متن باز و کاربردی جهت طراحی سایت و صفحات مختلف آن است که با ارائه ابزارها و قابلیت‌های کاربردی به شما امکان می‌دهد تا هدر سایت خود را طراحی کرده و یا از هدرهای رایگان و از پیش آماده شده آن استفاده نمایید.
جمع بندی
هدر یکی از مهم‌ترین بخش‌های یک وب سایت در نظر گرفته می‌شود و در واقع اولین صفحه‌‌ای است که کاربر پس از ورود به سایت مشاهده می‌کند. در گذشته برای طراحی هدر سایت تنها به ساخت یک منوی ابزار ساده شامل بخش جستجو و گزینه‌های خدماتی مختلف بسنده می‌شد. اما امروزه وب مسترها و طراحان وب سایت به دلیل تاثیر بسزای جذابیت بصری هدر بر جلب توجه و اعتماد کاربر و همچنین بهبود سئوی سایت، توجه ویژه‌ای به طراحی خاص و منحصر به فرد هدر دارند. هدر سایت باید متناسب با هدف و رویکرد سایت طراحی شود و در آن از تصاویر مرتبط، عناوین جذاب، فونت و رنگ‌های متناسب استفاده شود تا بتواند در نگاه اول توجه کاربر را به خود جلب نماید. بنابراین برای طراحی هدر سایت خود حتما به نکاتی که در این مقاله به شما آموزش دادیم، توجه ویژه داشته باشید تا بتوانید هدری جذاب و خاص برای وب سایت خود طراحی نمایید.
منبع:
uxplanet.org/website-header-design-in-2020-best-practices-and-examples-1992f80ddd69