استودیو راست کلیکاستودیو راست کلیکاستودیو راست کلیکاستودیو راست کلیک
  • طراحی سایت وردپرس
    • طراحی سایت آموزشی
    • طراحی سایت فروشگاهی
    • طراحی سایت شرکتی
    • طراحی سایت شخصی
  • وبلاگ
  • درباره ما
  • ارتباط با ما
سفارش طراحی سایت
✕

۶ ایده ناب برای طراحی هدر سایت

6 ایده ناب برای طراحی هدر سایت

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

  • لوگو و اسم‌ برند
  • رنگ و فونت هماهنگ
  • لیست صفحات مهم سایت
  • دکمه‌ی ورود به سایت و سبد خرید
  • کال تو اکشن
  • متمایز بودن
  • خلاصه آنچه گفتیم
سرفصل مطالب
این مقاله چقدر مفید بود؟

به این آموزش چه امتیازی می دهید؟

میانگین امتیاز 4.9 / 5. تعداد آرا: 12

۶ ایده ناب برای طراحی هدر سایت – در Header سایت چه قرار دهیم؟

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

 

لوگو و اسم‌ برند یا سایت با گرافیک مناسب

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

 

لوگو و اسم‌ برند یا سایت با گرافیک مناسب

پس یک جای مناسب برای لوگوی سایت خود در هدر آن در نظر بگیرید و آن را به صفحه اصلی سایت، لینک‌دهی کنید.

 

استفاده از رنگ و فونت‌های هماهنگ

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

 

لیست مختصری از صفحات مهم سایت

مورد بعد که خیلی مهم است این است که هدر سایت برای لیست صفحات مهم سایت ساخته شده و قرار دادن یک منوی کوتاه از آن‌ها در Header سایت، الزامی است. پس ما باید این صفحات را به بهترین شکل مدیریت کرده و به نمایش بگذاریم.
آکادمی هاب‌اسپات (HubSpot Academy) با تمام عظمتی که دارد، یک هدر بسیار ساده برای سایت خود طراحی کرده‌است؛ زیرا متوجه شده‌است که خلوتی و ساده بودن آن باعث می‌شود تا مخاطب بهتر مسیرش را انتخاب کند.

لیست مختصری از صفحات مهم سایت

 

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

 

آیکون سبد خرید و دکمه‌ی ورود به سایت

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

 

آیکون سبد خرید و دکمه‌ی ورود به سایت

 

کال تو اکشن اصلی سایت

مورد بعد که خیلی اهمیت دارد، قرار دادن کال تو اکشن (Call to Action) یا دعوت به اقدام اصلی سایت در هدر است. می‌توانید آن را به شکل یک دکمه‌ی برجسته که از بقیه طرح‌ها متفاوت است، قرار دهید.
برای مثال در سایت ما، آکادمی راست‌کلیک، عمل “ثبت‌نام کاربر” اهمیت زیادی دارد. این یک اقدام رایگان است، اما ما تمایل داریم که مخاطب در سایت ما یا در واقع، در خانواده‌ی ما، عضو شود و از امکانات سایت ما بیشتر استفاده کند. بنابراین آن را به صورت یک Call to Action خاص و با یک دکمه‌ی رنگی “ثبت‌نام کنید” در هدر سایت، قرار دادیم.

همچنین اگر اشتراک یا دکمه‌ی خرید خاصی دارید، فکر خوبی است که آن به این صورت در هدر سایت خود قرار دهید.
پس Call to Action یا دعوت به اقدام اصلی سایت خود را فراموش نکنید.

 

کال تو اکشن اصلی سایت

 

متمایز باشید

متمایز باشسعی کنید یک Header متفاوت داشته باشید. برای مثال می‌بینید که در برخی از سایت‌های شخصی، نیازی به هدر نیست. پس نگران نباشید و اگر در مواردی نیازی به هدر نبود، حتی می‌توانید آن را حذف کنید.
مورد دیگر مثلا می‌بینیم که خیلی از قالب‌های آماده، دارای هدر چسبان (sticky) هستند؛ یعنی به بالای صفحه می‌چسبند و حتی وقتی اسکرول می‌کنیم، یک هدر بزرگ در چشم مخاطب قرار دارد که برای او اذیت‌کننده است. این نوع هدرها باعث می‌شوند که مخاطب احساس ناراحتی کند.
پس سعی کنید هدر را در بالای صفحه نگه دارید و اگر کوتاه است، فقط موارد مهم را در حالت sticky یا چسبان، قرار دهید.
این مورد در نسخه‌ی موبایل مخصوصا در سایت‌های ایرانی هم خیلی فراموش می‌شود که به منوی سایت توجه نمی‌کنند.

 

خلاصه آنچه گفتیم

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

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

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

 

 



دعوت به گذاشتن کامنت

شما برای طراحی جذاب هدر سایت خود، چه ایده‌ای دارید؟

به نظر شما مهم‌ترین بخشی که باید در هدر بولد باشد، چیست؟

ارسال دیدگاه




یک لقمه تجربه برای رشد بیشتر کسب‌وکار شما

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



اشتراک گذاری

مطالب مرتبط

مهارت شبکه سازی چیست؟ - استفاده از مهارت‌های شبکه‌سازی در کسب و کار

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

۲۸ خرداد ۱۴۰۱

استفاده از مهارت‌های شبکه‌سازی در کسب و کار


اطلاعات بیشتر
7 اشتباه رایج در طراحی صفحه اصلی سایت

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

۲۱ خرداد ۱۴۰۱

آشنایی با رشته کامپیوتر – معرفی رشته مهندسی کامپیوتر


اطلاعات بیشتر
تفاوت Frontend و Backend - فرق فرانت اند و بک اند

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

۱۴ خرداد ۱۴۰۱

تفاوت Frontend و Backend – فرق فرانت اند و بک اند


اطلاعات بیشتر

2 Comments

  1. هدی گفت:
    ۱۷ اردیبهشت ۱۴۰۱ در ۲۱:۰۷

    خیلی مفید بود مرسییییی

    پاسخ
    • تیم مدیریت استودیو راست‌کلیک گفت:
      ۳ خرداد ۱۴۰۱ در ۱۲:۰۸

      مرسی هدی جان، مرسی که فیدبک دادی

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

تمامی حقوق این وبسایت متعلق به استودیو راست‌کلیک می‌باشد.

سایت شخصی | سایت شرکتی | سایت آموزشی | فروشگاه اینترنتی

logo-samandehi