۱۳ عناوین عالی برای هدر وب سایت ها

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

این روزها استفاده از هدر در وب سایت های به چه معنایی است ؟

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

بنابراین، شما با این فضا برای جذابیت علاقه مندی های بازدید کننده خود چه کارهایی باید انجام دهید؟

در این بخش ما میخواهیم برخی از روند های طراحی هدر رد سال های اخیر را بررسی کنیم.

روند طراحی هدر وب سایت در سال ۲۰۱۷

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

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

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

۱ : Oversized Hero Image

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

۲ :Sliding Images

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

۳ : Transformative Parallax Imagery

Parallax scrolling هنوز هم بهترین  و مناسب ترین طرح هدر برای طرح های وب سایت ها میباشد با استفاده از Parallax scrolling طراحان وب سایت ها می توانند تغییرات چشم گیری را در هدر وب سایت های خود ایجاد کنند.

۴ :Video Backgrounds

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

۵ : Hidden Navigation

اگر هدر شما جایی برای معرفی وب سایت شما برای بازدید کنندگان است ، بهتر است که آن را از طریق معرفی آنها به «شخصیتها» که در کنار آن قرار می گیرند پاکسازی کنید. اگر سایت شما با استفاده از mascots نام تجاری – به عنوان سایت WPMU DEV انجام می دهد – این زمان و مکان برای نشان دادن آنها است.

۷ : Eye-Catching Typography

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

۸ :Products First

۹ : CTA Front-and-Center

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

۱۰ : Vibrant Colors and Textures

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

۱۱ : Animation

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

۱۲ :Geometric Designs

طراحی وبسایت هندسی واقعا در حال حاضر کار بسیار دشواری است زیرا این طراحی ها دارای خطوط منطقی و تمیز مورد نیاز برای طراحی پاسخگو  هستند بنابراین جای تعجب نیست که ما وب سایت های بیشتری را مشاهده می کنیم مانند API for Perspective عناصر هندسی را به طراحی هدر اضافه می کنیم دیگران مانند Stripe و WPMU DEV وجود دارند که از خطوط مورب برای ایجاد چشم انداز بصری منحصر به فرد و غیر منتظره برای بازدیدکنندگان استفاده می کنند.

۱۳:Experimental

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

نتیجه :

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

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