استفاده از تکنولوژی HD در طراحی سایت

با توجه به پیشرفت دنیای تحت وب تکنیک های طراحی سایت با سرعت بالا در حال رشد می باشند و روز به روز از روش های نوینی در طراحی سایت رونمایی می شود. تصاویر و ویدئوهای HD جزو جدیدترین ها در این زمینه هستند.

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

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

استفاده از تصاویر HD در هدر سایت

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

استفاده از تصاویر HD در طراحی سایت سبب می شود کاربران درک بهتری از تصاویر داشته باشند و تجربه کاربری خوبی را از صفحات سایت شما کسب کنند. استفاده از این نوع تصاویر فرصت مناسبی را برای کاربران فراهم می کند تا با جزئیات بیشتری تصاویر را ببینند و دید بصری مناسبی را کسب کنند.

با رعایت نکات کلیدی زیر همواره می توانید تصاویری با کیفیت بالا تولید کنید.

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

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

تصاویر HD در طراحی سایت

 

استفاده از ویدیو HD در طراحی سایت

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

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

وبسایت Life of Pi که برای فیلمی با همین عنوان ساخته شده است یک نمونه بسیار موفق و زیبا از بکارگیری ویدئوی HD در طراحی سایت محسوب میشود.

ویدئوی hd در طراحی سایت

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

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

طراحی سایت با استفاده از انیمیشن HD

یکی از تکنیک هایی که ممکن است در آینده رواج بیشتری پیدا کند استفاده از انیمیشن HD در هدر سایت می باشد. استفاده از انیمشن ها در گذشته رواج داشته است ولی درآینده استفاده از انیمیشن هایی که بر مبنای تصاویر HD ساخته شده است رواج خواهد یافت.

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

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

وبسایت madebyfieldwork.com نمونه بسیار موفقی از بکارگیری انیمیشن با کیفیت HD در طراحی سایت است.

طراحی سایت با استفاده از انیمیشن HD

 

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

پاسخ‌گوی سوالات شما هستیم سوال شما توسط کارشناسان وبسیما پاسخ داده شده و از طریق پیامک اطلاع رسانی می‌شود
نام و نام خانوادگی نام و نام خانوادگی به فارسی
آدرس ایمیل sample@domain.com
تلفن همراه 09 XX XXX XXXX
متن نظر
ثبت دیدگاه
  • alibalavipour
    21/02/2017

    با توجه به اهمیت روز اقزون تکنولوژی hd لطفا بیشتر مطالب در این مورد داشته باشید.

  • سیروان
    10/07/2016

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

    • وبسیما
      WEBSIMA
      11/07/2016

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

مشاهده همه