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

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

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

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

نمونه ای از خانه نرم افزار

Kadence WP

اما ابتدا، هدر وب سایت دقیقاً چیست؟ بنابراین واضح است که سربرگ وب‌سایت معمولاً قسمت بالای یک وب‌سایت است که شامل عناصر نام تجاری، ناوبری و هر چیزی است که کاربران ممکن است برای پیمایش در برند شما مفید بدانند. هدرها اغلب در هر صفحه از یک وب سایت قرار دارند، اما اغلب از نظر بصری روی صفحه اصلی یا صفحات فرود تأثیر بیشتری دارند.

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

• ناوبری، منو، منوی ناوبری: لیستی از پیوندهای قابل کلیک به بخش های مختلف وب سایت.
• منوی همبرگر: یک نماد سه خطی انباشته که با کلیک در منوی پیمایش گسترش می یابد. در حالی که آنها در دستگاه های تلفن همراه رایج هستند، اما برای ناوبری دسکتاپ نیز بیشتر ظاهر می شوند.
• فراخوانی برای اقدام: دکمه/پیوندی که بازدیدکنندگان را تشویق به انجام یک اقدام خاص، مانند خرید، عضویت در خبرنامه، یا انجام عمل دیگری می‌کند.
• فهرست کشویی: منویی که وقتی کاربر روی یک آیتم می‌چرخد یا روی آن کلیک می‌کند، گسترش می‌یابد و آیتم‌های زیرمنو دیگری را نشان می‌دهد.
• چسبنده: سرصفحه ای که در بالای صفحه با پیمایش کاربر قابل مشاهده باقی می ماند.
• هدر یا تصویر: یک تصویر یا ویدیوی بزرگ که بیشتر فضای هدر را اشغال می کند. همچنین می تواند شامل عناصر متنی یا فراخوانی برای اقدام باشد.
• مگا منو مگا منوها از پنجره های بازشو بزرگ برای نمایش طیف وسیعی از گزینه ها استفاده می کنند که معمولاً از طریق روش های دیگر در دسترس نیستند. آنها این مزیت را دارند که به کاربران اجازه می دهند مقصد خود را بدون پیمایش در لایه های سلسله مراتبی منو انتخاب کنند.

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

درخشش آزمایشگاهی

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

[X] آزمایشگاه

[X]این آزمایشگاه از یک منوی ناوبری کشویی استفاده می کند که ناوبری را برای انواع خاصی از بازدیدکنندگان برجسته می کند. اطلاعات درباره ما و اطلاعات تماس در بالاتر از ناوبری محتوای کلی متفاوت است.

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

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

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

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

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

هدر همپوشانی معمولاً پس از کلیک کاربر روی یک دکمه یا نماد ظاهر می شود و محتوای وب سایت را با منو یا گزینه های دیگر پوشش می دهد. این نوع هدر می تواند انتخاب خوبی برای وب سایت های موبایلی باشد که فضا محدود است. هدر همپوشانی اغلب در ترکیب با نماد/منوی همبرگر استفاده می شود و با کلیک باز می شود.

هدر مگا منو شامل یک منوی کشویی چند ستونی بزرگ است که وقتی کاربر روی یک آیتم منو می‌چرخد یا روی آن کلیک می‌کند ظاهر می‌شود. این نوع هدر می تواند انتخاب خوبی برای وب سایت هایی با محتوا و اطلاعات زیاد باشد.

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

عناصری که باید در هدر وب سایت گنجانده شوند

پلانولی

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

اورا بورا

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

نوع هدری که برای طراحی وب سایت خود انتخاب می کنید اغلب بستگی به اطلاعاتی دارد که باید حاوی آن باشد. عناصر استانداردی وجود دارد که کاربران انتظار دارند در هدر وب سایت پیدا کنند.

عناصر متداول هدر وب سایت عبارتند از:

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

بهترین روش ها برای طراحی هدر وب سایت

مشاوره Wergs

پیمایش ساده که محل حضور شخصی در سایت را با حاشیه ساده/زیر خط پایین مشخص می کند، گزینه خوبی برای یک سایت ساده است.

بی رحمانه زندگی کن

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

احتمالاً به طور شهودی فوراً یک ضربه خوب را از یک ضربه بد می شناسید. یک هدر که به خوبی طراحی شده باشد، واضح است، به راحتی قابل درک است و به شما کمک می کند در وب سایت خود حرکت کنید. یک هدر با طراحی خوب نیازهای کاربران را در اولویت قرار می دهد و به مخاطبان شما کمک می کند آنچه را که به دنبال آن هستند پیدا کنند.

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

• سادگی. به یاد داشته باشید، شما فقط 2 ثانیه فرصت دارید تا تأثیر بگذارید. هدر خود را با اطلاعات ضروری ساده و بدون شلوغی نگه دارید تا بازدیدکنندگان سایت را به تعامل بیشتر راهنمایی کند.
• پاسخگویی. اطمینان حاصل کنید که طراحی هدر شما پاسخگو باشد و بتواند با اندازه های مختلف صفحه نمایش سازگار شود.
• تمیز و شفاف. از تصاویر یا ویدیوهای با کیفیت بالا که برای استفاده در وب بهینه شده اند استفاده کنید. تصاویر تار یا پیکسلی می توانند وب سایت شما را غیرحرفه ای جلوه دهند.
• حمایت از برند. نام تجاری خود را در هدر با استفاده از لوگو و رنگ های برند خود معرفی کنید تا به بازدیدکنندگان کمک کنید تا وب سایت شما را شناسایی و به خاطر بسپارند.
• روشن. از برچسب های منوی واضح و مختصر استفاده کنید که به راحتی قابل درک باشد.
• به طور خلاصه. ساده کردن تعداد گزینه های منوی موجود؛ انتخاب های بیش از حد ممکن است به هم ریخته و گیج کننده به نظر برسند. به کاربران کمک کنید فقط با چند گزینه سطح بالا در یک مسیر منطقی حرکت کنند.
• آسان. تایپوگرافی را انتخاب کنید که به راحتی خوانده شود و سبک برند شما را تکمیل کند. از سبک های فونت برای راهنمایی بازدیدکنندگان در طراحی هدر استفاده کنید. اسکن و درک آن باید آسان باشد.
• بهینه شده است. مطمئن شوید که هدر شما برای سرعت طراحی شده است. تصاویر بزرگ و طرح های پیچیده می توانند سرعت وب سایت شما را کاهش دهند، بنابراین هدر خود را برای بارگذاری سریع بهینه کنید. از بارگذاری انیمیشن ها خودداری کنید زیرا می توانند وب سایت را کندتر نشان دهند.
• در دسترس. نه تنها انطباق با ADA توسط قوانین مختلف الزامی است، بلکه صرفاً تمرین خوبی است تا اطمینان حاصل شود که سایت شما برای همه، خواه از مرورگر، صفحه‌خوان یا دستگاه دیگری استفاده می‌کنند، قابل دسترسی باشد.

شروع به طراحی کنید

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

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

ساخت هدر با Kadence

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

و اگر به دنبال کنترل دقیق‌تری هستید، می‌توانید هدرها را بر اساس شرایط خاص با استفاده از بخش‌های محتوای Kadence Elements و تنظیم آن برای جایگزینی هدرها جایگزین کنید.

سایت خود را با Kadence رشد دهید

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