طراحی سربرگ کامل فرآیندی سفارشیتر از آن چیزی است که فکر میکنید. هنگام ایجاد وب سایت خود، به خاطر داشته باشید که هدر اولین چیزی است که بازدیدکنندگان هنگام ورود به صفحه اصلی شما با آن مواجه می شوند.
مانند تمام جنبه های سایت شما، باید برند شما را منعکس کند و تفکر استراتژیک و خلاقانه را در بر گیرد.
چه از ابتدا شروع کنید یا یک وبسایت را اصلاح کنید ، ما مجموعهای از بهترین روشها را برای ایجاد یک طراحی هدر بینقص که به اندازه بقیه وبسایتهای شما هوشمند و جذاب است، ارائه کردهایم.
پس بیایید ببینیم چه چیزی در این مقاله داریم.
هدر وب سایت چیست؟
هدر قسمت بالای صفحه وب سایت است. عنوان اصلی شامل لوگو و منوها در بالای وب سایت است. یک هدر همیشه تمام صفحات وب سایت را به طور مداوم نشان می دهد.
به بیان ساده، سرصفحههای وبسایت نسخه اصلاحشده سرفصلهایی هستند که در یک مطبوعات کاغذی معمولی یافت میشوند. آنها نشانه هایی برای عنوان و زیرنویس هستند که به درستی مرتب شده اند. این عناوین و زیرنویس ها در محتوای صفحه در قسمت <body> ظاهر می شوند و به عنوان تگ سرصفحه نیز شناخته می شوند.
وقتی از آنها استفاده می کنید، یک محتوای مشخص از بقیه متمایز می شود – فونت برجسته تر و پررنگ تر است. به لطف آن، کاربران راحتتر متوجه جزئیات ضروری در وبسایت میشوند و ایدهای کلی از محتوای محتوا پیدا میکنند.
این برای ارائه یک طرح کلی واضح از محتوای وب سایت شما به کاربران و دعوت از آنها برای رفتن به داخل صفحات و مشاهده موارد بیشتر استفاده می شود. به همان اندازه عملکرد آن به عنوان یک ابزار ناوبری مهم است. همانطور که کاربران از یک صفحه به صفحه دیگر حرکت می کنند، یک هدر وب سایت می تواند جهت روشنی را به آنها ارائه دهد.
هدر وب سایت همیشه لحن را برای وب سایت کامل تعیین می کند.
ویژگی های استاندارد هدر
با بازگشت به یک سربرگ همانطور که بازدیدکنندگان شما آن را تجربه می کنند، چندین ویژگی استاندارد وجود دارد که تقریباً هر وب سایتی دارد. این ویژگیها باعث میشود تا افراد به راحتی بتوانند وبسایت شما را شناسایی کنند.
هدرها همچنین می توانند ثابت یا شناور باشند. هدرهای ثابت در بالای صفحه در جای خود باقی می مانند. آنها در موقعیت خود گیر کرده اند و هنگام اسکرول کردن به پایین، از نمای مرورگر خود پیروی نمی کنند.
یک هدر شناور شما را در حین پیمایش دنبال می کند. این هدر ممکن است در حین اسکرول تغییر کند، بسته به طرح، فشرده تر شود. این به کسی اجازه میدهد تا پس از خواندن به پایین صفحه، سریعاً به قسمت دیگری از سایت حرکت کند، بدون اینکه ابتدا پشتیبانگیری کند.
عناصر هدر ثابت وب را به مکانی کاربرپسندتر تبدیل می کند. وب سایت ها می توانند از نظر طراحی تقریباً بی نهایت متفاوت باشند، اما با حفظ مجموعه ای اصلی از ویژگی ها، پیمایش سایت شما بسیار آسان تر خواهد بود.
ویژگی های هدر عبارتند از:
- لوگو / هویت
- ناوبری (منوی اصلی)
- عنوان صفحه
- جستجو کردن
- سبد خرید ( سایت تجارت الکترونیک )
- CTA (Call to action)
- داخل شدن و خارج شدن
- انتخابگر زبان
لوگو / هویت
آن را تصویر، علامت تجاری یا شناسه برند بنامید. یک لوگو در هدر وب سایت به افراد کمک می کند تا سایت شما را برای مدت طولانی تری به خاطر بسپارند. این اولین چیزی است که در یک وب سایت بازدیدکننده می بیند و درک خود را از سایت شما ایجاد می کند.
اگر خشن طراحی شده باشد، می توانید حدس بزنید که بازدیدکنندگان احتمالاً اظهارات تند و زننده ای ارائه می دهند. در حالی که، اگر کار بزرگی روی آن انجام داده باشید، مطمئناً با تحسین به وب سایت شما ادامه می دهند.
منوی پیمایش
هدف دیگر هدر این است که به بازدیدکنندگان وب سایت کمک کند مناطق مختلف سایت را به راحتی کشف کنند. هدر وب سایت جایی است که منوهای ناوبری وب سایت شما در دسترس هستند. ناوبری وب سایت مانند صفحه درباره ما ، صفحه تماس با ما هر یک را به مکان تعیین شده خود پیوند می دهد.
و می توانید با افزودن پیوندها یا پیوندهای ناوبری (منوی اصلی) اگر دقیقاً گفته شود، به این امر دست یابید.
پیوندهای ناوبری عناصر وب سایتی هستند که کاربران برای رسیدن به صفحات خاصی بیشتر با آنها تعامل دارند.
شما نمی توانید آنها را از دست بدهید، و اگر این کار را انجام دهید، بازدیدکنندگان خود را در یک اقیانوس یا صحرا قرار خواهید داد.
عنوان صفحه
عنوان صفحه معمولاً یک فضای زیر لوگو و ناحیه ناوبری هدر را اشغال می کند. حتی ممکن است طراحی کمی متفاوت از بقیه قسمتهای هدر به خود بگیرد و به شکل مناسبتری با بقیه قسمتهای صفحه مطابقت داشته باشد.
اگر در صفحه درباره یک وب سایت هستید، ممکن است انتظار داشته باشید که کلمه «درباره» با حروف بزرگ و پررنگ در بالای صفحه چاپ شود. این از نظر فنی بخشی از هدر است.
جستجو کردن
جستجوی موثر سایت به معنای قابلیت استفاده بهتر است تا مشتریان بتوانند چیزها را سریعتر پیدا کنند. وب سایت هایی با آرشیو عظیم محتوا یا موجودی محصولات از داشتن نوار جستجو در سربرگ بسیار سود می برند.
این کار را می توان با استفاده از کادر جستجو در قسمت هدر وب سایت خود انجام داد. کادر جستجو باید دقیقاً همین باشد، بسته ای که برای جستجوی چیزهای موجود در وب سایت استفاده می شود.
سبد خرید (سایت تجارت الکترونیک)
اگر وبسایت شما شامل محصولات آنلاین برای فروش است، افزودن یک سبد خرید به سربرگ وبسایت، فرآیند پرداخت خریدار را سادهتر و بهبود میبخشد. این به بازدیدکنندگان کمک می کند تا به راحتی محصولات را به صورت آنلاین از وب سایت شما خریداری کنند.
تقریباً هر سایت تجارت الکترونیک یک نقطه دسترسی به سبد خرید در همان مکان دارد: گوشه سمت راست بالای هر صفحه در فروشگاه. هنگامی که شخصی مرور محصولات را به پایان رساند و آماده خرید است، داشتن یک مکان ثابت برای دسترسی به سبد خرید برای بررسی، حیاتی است.
CTA (Call to action)
هر وب سایت یک اقدام یا هدف دارد که بازدیدکنندگان را به سمت آن سوق می دهد. در حالی که این وبسایت شامل فراخوانهای عملی چشمگیر در سراسر صفحات خود میشود، ایده خوبی است که CTA را با قرار دادن آن در سربرگ نیز در ذهن بازدیدکنندگان نگه دارید.
CTA شما نیز باید در انتهای سمت راست هدر قرار گیرد. این پیوند چشم نواز نه تنها تعادل بصری را به هدر می آورد، بلکه به عنوان میانبر مفیدی برای تبدیل نیز عمل می کند.
این با اصل طراحی اثر موقعیت سریال توضیح داده می شود که می گوید افراد اولین و آخرین موارد یک سری را بیشتر از بقیه به خاطر می آورند. بنابراین، زمانی که آنها آماده هستند
تبدیل، آنها مجبور نخواهند بود که CTA را در محتوای سایت جستجو کنند. آنها می دانند که می توانند برای انجام این کار مستقیماً به Header بروند.
داخل شدن و خارج شدن
وبسایتهایی که بازدیدکنندگان میتوانند در آن عضو شوند، اغلب دارای ویژگیهای ورود/خروج در جایی در نوار هدر هستند. دکمه های ورود و ثبت نام به بازدیدکنندگان کمک می کند تا وارد وب سایت شوند. اگر کاربران در وب سایت شما ثبت نام نکرده باشند، دکمه ثبت نام نیز وجود دارد.
این روش معمول است که دکمه ورود به سیستم به تنهایی ایستاده و تصویر نمایه کاربر را با دسترسی کشویی به میانبر خروج جایگزین کند. این کشویی تصویر همچنین به کاربر امکان دسترسی به پروفایل و تنظیمات خود را می دهد. صفحه اصلی گوگل به این صورت تنظیم شده است.
اگر گزینه عضویت در وب سایت شما وجود دارد، معمولاً کاربران باید وارد وب سایت شوند. بنابراین، شما باید یک مکان واضح برای ورود آنها داشته باشید، و واضح ترین مکان برای نشان دادن فرم ورود در سربرگ صفحه اصلی شما است، جایی که همه می توانند آن را پیدا کنند.
انتخابگر زبان
فرض کنید وب سایت شما چندین نسخه را بر اساس زبان ارائه می دهد. اگر میخواهید یک نسخه از سایت را به کاربران زبانهای مختلف به نمایش بگذارید، نمایش انتخابگر زبان در سربرگ ارزش تمام تلاشهای شما را دارد.
این به کاربران زبان خاص کمک می کند تا به راحتی سایت را کاوش کنند و به شما امکان می دهد افراد بیشتری را از مکان ها و دیدگاه های مختلف پوشش دهید. با این حال، بهتر است که تبدیل زبان را برای وب سایت خود نیز یکپارچه کنید تا این کار را به طور موثر انجام دهید.
علاوه بر این، هنگامی که انتخابگر زبان را اضافه میکنید، به جای متن، به سراغ نماد بروید زیرا کاربران زبانهای مختلف ممکن است متن منو را درک نکنند. اما با یک آیکون به راحتی می توانند آن را تشخیص دهند.
بیایید به چند عنوان وب سایت نگاه کنیم
هدر وب سایت ثابت شد
نوارهای پیمایش دائمی، یا به عبارت دیگر “هدرهای چسبنده” به این معنی است که هنگام پیمایش، پیمایش شما را در سراسر صفحه دنبال می کند. اکنون این یک استاندارد طراحی وب است.
Sticky Header همانی است که وقتی صفحه به پایین اسکرول می شود، منو را در بالای صفحه ثابت می کند. امروزه می بینیم که بسیاری از وب سایت ها دارای سربرگ ثابت هستند. هدر ثابت ظاهر جذابی به وب سایت شما می دهد.
اگر هدر مفهوم کلی طراحی شما را نقض نمی کند، آن را ثابت کنید. این یک ایده خوب برای طراحی دسکتاپ و موبایل است:
- وب سایت های تجارت الکترونیک – سبد خرید همیشه جلوی کاربر است.
- وبسایتهای خدماتی – شماره تلفن یا CTA دائماً نمایش داده میشوند.
هدرهای ثابت تجربه مشتری را بهبود می بخشد، کاربران را متمرکز نگه می دارد و به آنها کنترل بیشتری می دهد.
ناوبری پنهان (منوی همبرگر)
این راه حلی است که به طور فزاینده ای برای طراحی وب سایت استفاده می شود. منوی همبرگر یک نماد کوچک از سه نوار در سمت چپ یا راست بالا است که با کلیک کردن، منوی کامل را نشان می دهد. زمانی که طراحان نیاز به تمرکز بر روی صفحه نمایش اصلی دارند، از این تکنیک استفاده می کنند.
منوهای همبرگر فقط در نمای موبایل برای پاسخگویی هدر استفاده می شود. با این حال، زمانی که هدر آیتم های منوی اضافی یا اطلاعات دیگری در مورد وب سایت داشته باشد، در نمای دسکتاپ نیز استفاده می شود.
از نظر قابلیت استفاده سایت، این گزینه خوبی است. چنین منوی از طراحی موبایل آمده و قبلاً برای کاربران آشنا است. همبرگر برای سایت های تبلیغاتی مناسب است، جایی که تاکید اصلی بر ارائه با کیفیت محصول با استفاده از عکس یا فیلم است.
این گزینه ممکن است برای فروشگاه های آنلاین کمتر مناسب باشد زیرا مشتری باید یک سبد، محصولات انتخاب شده و یک قسمت جستجو در دسترسی سریع داشته باشد.
هدر موبایل (پاسخگو).
هدر باید در نسخه دسکتاپ وب سایت و نسخه موبایل به درستی نمایش داده شود. بنابراین باید پاسخگو باشد و بتواند به خوبی با هر دستگاه تلفن همراه تنظیم شود.
طراحی هدر واکنش گرا یک چیز باورنکردنی در وب سایت ها است. اما اگر طراح وب نیستید، ممکن است تعجب کنید که این اصطلاح به چه معناست.
ریسپانسیو هدر محتوا و عناصر خود را برای مطابقت با اندازه صفحه نمایشی که مشاهده می شود، مقیاس می کند. طراحی هدر واکنشگرا برای جلوگیری از تغییر اندازه، پیمایش و بزرگنمایی محتوای غیر ضروری در قسمت هدر استفاده می شود.
استفاده روزانه از دستگاههای تلفن همراه منجر به طراحیهای وبسایتی شد که حتی در تجسم دسکتاپ آنها نیز موبایل محور به نظر میرسند. به عنوان مثال، اجرای تصاویر قهرمان بزرگ و منوهای همبرگر ریشه در قالب موبایل دارد.
در نتیجه
هدر وب سایت شما بخش مهمی از تجربه وب سایت بازدید کننده شما است. یک هدر کاربردی و سازگار می تواند دنیایی از تفاوت در قابلیت استفاده سایت شما ایجاد کند. بنابراین هنگام طراحی وب سایت حداکثر توجه را به هدر داشته باشید.
شما میتوانید کارهای زیادی انجام دهید تا هدر خود را منحصر به فرد کنید و تا زمانی که ویژگیهای استاندارد اصلی وجود داشته باشد، محتوا و طراحی شما به خوبی میدرخشد.
و آخرین بهترین روش طراحی هدر وب سایت: تغییرات منظمی را انجام دهید تا وب سایت خود را تازه و به روز نگه دارید.
