گرایش استفاده از Video Background در طراحی وب

تاریخ انتشار 1395/07/25 . 698 . گروه رازهای طراحی وب سایت

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

شبکه های اجتماعی مبتنی بر فیلم مانند یوتیوب پا گرفت و استریمینگ آنلاین فیلم ، نیمی از پهنای باند اینترنت را اشغال کرد. همزمان با افزوده شدن تگ <video> به HTML5 و بهبود CSS3 و توانایی مرورگرها در نمایش ویدیوهای فرمت H.264 بصورت مستقل و شروع اتوماتیک ، استفاده از ویدیو در پس زمینه صفحه وب ، رواج یافت. از سال ۲۰۱۴ به این سو ، استفاده از ویدیو در پس زمینه , یکی از گرایش های محبوب طراحی و توسعه وب بوده است.

فلسفه فکری philosophy

ویدیو همیشه یکی از قوی ترین فرم های ارائه اطلاعات بصری بوده است.فرایندی که با تصاویر متحرک در تلویزیون و سینما شروع شده و به ترند ویدیو بک گراند در طراحی وب ختم شده است , گرایشی که البته بر خلاف سینما ، بیشتر معطوف به انتقال یک حس است تا نقل یک داستان. یعنی نمی بایست ویدیوی پس زمینه را , صرفا بابت زیبایی یا چون گرایش روز طراحی وب است ، بکار گرفت, بلکه الزاما باید , دارای پیامی برای مخاطب و منتقل کننده حسی به او باشد . یک ویدیو در پس زمینه سایت می تواند به طراحی call to action کمک کند. در عمل یک ویدیو در صفحه اصلی سایت به یک تور شخصی می ماند. توری کوتاه که در آن شرکت تان را معرفی می کنید , یا حال خوب مشتری و نحوه استفاده او از محصول تان را به مخاطب نشان می دهید. تکنیکی که می تواند به شفافیت و اعتماد بیشتر مخاطب به شما کمک کند. خصوصا ویدیویی کوتاه و بدون صوت با سناریویی طبیعی و صادقانه و نه ساختگی و تصنعی که بصورت تمام صفحه (full-screen) و با پخش خودکار (auto-play) در پس زمینه صفحه اصلی و زیر هدر سایت کار شود .

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

انواع پیاده سازی types of implemen ta tion

ویدیو همیشه یکی از قوی ترین فرم های ارائه طلاعات بصری بوده است.فرایندی که با تصاویر متحرک در تلویزیون و سینما شروع شده و به ترند ویدیو بک گراند در طراحی وب ختم شده است , گرایشی که البته بر خلاف سینما ، بیشتر معطوف به انتقال یک حس است تا نقل یک داستان. یعنی نمی بایست ویدیوی پس زمینه را , صرفا بابت زیبایی یا چون گرایش روز طراحی وب است ، بکار گرفت, بلکه الزاما باید , دارای پیامی برای مخاطب و منتقل کننده حسی به او باشد . یک ویدیو در پس زمینه سایت می تواند به طراحی call to action کمک کند. در عمل یک ویدیو در صفحه اصلی سایت به یک تور شخصی می ماند. توری کوتاه که در آن شرکت تان را معرفی می کنید , یا حال خوب مشتری و نحوه استفاده او از محصول تان را به مخاطب نشان می دهید. تکنیکی که می تواند به شفافیت و اعتماد بیشتر مخاطب به شما کمک کند. خصوصا ویدیویی کوتاه و بدون صوت با سناریویی طبیعی و صادقانه و نه ساختگی و تصنعی که بصورت تمام صفحه (full-screen) و با پخش خودکار (auto-play) در پس زمینه صفحه اصلی و زیر هدر سایت کار شود . مغزهای ما , برای تعامل با یک دنیای متحرک ساخته شده است و لذا بصورت طبیعی با ویدیو ارتباط خوبی برقرار می کند. مثل هر گرایش بروز دیگری , استفاده از ویدیو در پس زمینه , می تواند به سبک طراحی وب شما و تمپلت گرافیکی تان , حس تازگی , بروز بودن و مدرن بودن می دهد. همه , قدرت بیحد سینما را می شناسیم! لذا ویدیو در پس زمینه می تواند ابزاری منحصر بفرد در پوشش حس و عرضه سبک هویت برند , به مخاطب باشد. در سایت های محصول محور و یا خدمات محور , استفاده ز ویدیو می تواند حسی از بکارگیری آن کالا یا سرویس , در عمل بدست دهد.

ویژگی های که در donts باید در نظر گرفته شود .

باید طول ویدیو را محدود کنید :

یک موضوع مهم کاهش طول زمانی ویدیو است که در اکثر مواقع به محض اتمام , دوباره بازشروع می شود. مثل GIF انیمیشن ها , اگر مدت زمان فیلم زیادی کوتاه باشد , منجر به حس تکرار آزاردهنده ای می شود و در عین حال , اگر مدت فیلم , زیادی طولانی باشد , منجر به سربار حجم لود برای کاربر می شود. بصورت معمول خوب است مدت زمان بین ۱۵ تا ۲۵ ثانیه باشد.

ابزارهای گوناگون کاربران را لحاظ کنید :

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

ویدیو را تا حد ممکن فشرده کنید :

باید برای کاهش اضافه بار حجم تحمیلی به کاربر , ویدیو را تا پایین ترین نرخ بیت قابل قبول , فشرده سازی کنید. استفاده از ویدیو ۷۲۰ پیکسلی با فریم ۲۴ یا ۲۵ فریم در ثانیه , و نرخ بیتی بین ۷۵۰ تا ۱۲۵۰ کیلو می تواند خوب باشد.

یک overlay مناسب به ویدیو بدهید :

باید یک لایه روی ویدیو بدهید تا مانع از کلیک کاربران یا تغییر شکل اشاره گر شوید. همچنین مانع از نگهداشتن و بازپخش ویدیو با کلیک راست کاربر شوید. مطمئن شوید که تقابل و تضاد با متن پس زمینه تضمین شود. خصوصا اگر قرار است متونی روی ویدیوی پس زمینه نمایش یابد , ممکن است لازم باشد با دادن یک لایه overlay متن را متمایز کنید , یا با تغییر دادن رنگ متن و یا با دادن سایه ای به خود متن یا پس زمینه آن. حواستان به تغییر جای متن روی ویدیو در رزولوشن های مختلف و ابزارهای گوناگون باشد. در مورادی می توان از Overlay مناسب متناسب با دیزاین طوری استفاده کرد که کیفیت پایین ویدیو آزاردهنده نباشد.

امکانات و سلایق بازدیدکننده تان را در نظر بگیرید :

اگر سرعت اینترنت کاربران پایین باشد , ایشان به جای ملامت کانکشن خود , شما را ملامت خواهند کرد. بعضی از کاربران ممکن است نسبت به پس زمینه های متحرک الرژی شخصی داشته باشند.

کارهای که نباید در donts انجام شود .

نباید روی ویدیوی پس زمینه صدا بگذارید :

صدا را خفه کنید. معمولا ویدیوهای پس زمینه , خود اجرا یا auto-play هستند آنهم به محض باز شدن وب سایت. لذا طبیعی است که بصورت پیش فرض ویدیو صدایی نداشته باشد تا کاربر جا نخورد.

از حرکات بیش از اندازه بپرهیزید :

یادتان نرود که ویدیو را برای “پس زمینه” می خواهید! لذا ویدیو نبایست منجر به دزدیدن حواس و تمرکز کاربر نسبت به محتوای اصلی سایت شود. لذا از پرش های سریع , لرزش های ناپایدار و حرکات سریع بپرهیزید.

برای همیشه لوپ نزنید :

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

در همه انواع سایت ها از ویدیو بک گراند استفاده نکنید :

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

5

نمونه کارهای منتخب

طراحی سایت دکوراسیون دکورچین

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

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

گروه مرتبط : طراحی سایت فروشگاه اینترنتی

مشاهده نمونه کار
طراحی سایت شرکت کامپیوتری  انفورماتیک کوشا

گروه مرتبط : طراحی سایت شرکتی

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

گروه مرتبط : طراحی سایت فروشگاه اینترنتی

مشاهده نمونه کار

گروه مقالات طراحی سایت

جدیدترین مقالات طراحی سایت

شماره تماس پشتیبانی:

شماره تماس پشتیبانی:

نظرات کاربران

نظر شما چیست؟

سوال امنیتی: حاصل جمع 9 + 7 چند است ؟

آنلاین هستیم
آنلاین هستیم