.

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

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

تهیه شده توسط پارسا امین زاده

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

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

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

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

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

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

هدر سایت شامل چه مواردی است؟

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

موارد مهمی که در اصول طراحی هدر باید وجود داشته باشد:

لوگو سایت

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

کال تو اکشن

  • کال تو اکشن یا فراخوانی برای اقدام المانی است که کاربر را ترغیب به انجام کاری می کند. مشاوره ی رایگان، تماس با ما، پر کردن فرم، همکاری با ما و یا ثبت سفارش همگی می توانند متن های دکمه هایی جذاب باشند به عنوان یک cta یا همان کال تو اکشن مورد استفاده قرار گیرد.
طراحی سایت با وردپرس یا  php

متن یا عنوان کلی

  • متنی که خلاصه ای از فعالیت شما و یا شعار کاری شما را بازگو می کند. مثلا “سرمایه گذاران موفق، کاریزما دارند” این متنی است که سایت کاریزما در هدر سایت خود گذاشته است.
طراحی سایت با وردپرس یا  php

منو یا فهرست سایت

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

باکس سرچ

  • شاید در خیلی از سایت ها قسمت سرچ گذاشته نشود ولی بودن این قسمت می تواند تجربه ی بهتری به کاربر بدهد و راحت تر خدمات و یا محصولات خود را پیدا کند.
طراحی سایت با وردپرس یا  php

اطلاعات شبکه های اجتماعی

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

اطلاعات تماس

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

سبد خرید

  • در سایت های فروشگاهی و ووکامرسی وجود سبد خرید در هدر سایت می تواند بسیار کاربردی باشد و راحت تر کاربر می تواند ارتباط برقرار کند.
طراحی سایت با وردپرس یا  php

 

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

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

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

سایز هدر

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

هدر چسبان

هدر چسبان یکی از اصول طراحی هدر سایت است که با نام “sticky headers”  نیز شناخته شده است. استیکی هدر به این معناست که با اسکرول صفحه هدر و یا منو چسبان هستند و قابل مشاهده هستند. این منو چسبان برای سایت های فروشگاهی که سبد خرید باید همیشه در جلوی چشم کاربر باشد و سایت های خدماتی که نیاز به cta  و اطلاعات تماس دارند  بیشتر استفاده می شود.

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

به طراحی سایت احتیاج داری؟

همین الان سفارش بده تا تخفیف های ویژه رو از دست ندی

پیامی که توسط هدر منتقل می شود

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

سخن آخر

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

شاید دوست داشته باشید بدانید

نظرات شما عزیزان…

0 Comments

ارسال نظر

نشانی ایمیل شما منتشر نخواهد شد.