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

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

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

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

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

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

هدر چیست؟

سربرگ یا هدر وبسایت قسمت بالایی یک آن است که لوگو، پیمایش و گاهی اطلاعات دیگر، پیوندها و دکمه ها در آن قرار دارند.

هدر بخش ارزشمندی از هر وب سایت است؛ زیرا:

• به عنوان خانه لوگوی برند عمل می کند و ممکن است تنها جایی باشد که بازدیدکنندگان با آن روبرو می شوند.
• اولین برداشت (first impression) از وب سایت را به بازدیدکنندگان ارائه می دهد.
• به عنوان فهرست مطالب برای سایت کار می کند.
• کاوش سایت را با یک کلیک یا جستجو آسان می کند.
• اطلاعات اضافی مربوط به شرکت، نحوه تماس با آن و موارد دیگر را ارائه می دهد.

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

در بحث امور طراحی سایت همیشه طراحی گرافیکی هم مطرح است. خوب است بدانید انواع طراحی ها و ارتباط ان ها با برندیگ تا چه اندازه رد شناخته شدن شما تأثیر دارند.

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

هدر تک خطی با لوگوی راست چین

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

هدر بهینه شده برای موبایل با منوی همبرگری

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

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

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

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

هدر با مگا منو

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

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

هدر عمودی

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

هدر با نوار ابزار

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

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

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

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

اجزای هدر سایت چیست؟

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

لوگو

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

لینک های ناوبری

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

CTA

CTA یا Call to Action به معنی فراخوان برای اقدام است. هر سایت هدفی دارد  که سعی می کند کاربر را به سمت آن سوق داده و او را تشویق به اقدامی کند. این اقدام می تواند خرید، ثبت سفارش، دریافت خدمات و غیره باشد. توصیه می شود CTA خود را در طراحی هدر سایت بگنجانید.

نوار جستجو

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

ای کامرس (Ecommerce)

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

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

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

استفاده هوشمندانه از فضای خالی

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

هدر موبایل را سفارشی طراحی کنید

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

فونت های ساده و خوانا انتخاب کنید

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

هدر را ثابت کنید

حتماً سایت هایی را دیده اید که وقتی اسکرول می شوند، منوی آن ها هم از صفحه خارج می شود، این ویژگی خوبی نیست. کاربر باید بتواند از هر جای صفحه به المان ها و منوی هدر دسترسی داشه باشد. به همین دلیل باید آن را به صورت ثابت یا به اصطلاح طراحی سایت، «sticky» کنید.

طراحی سایت حرفه ای

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