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

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

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

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


کاربرد تصویر متحرک در طراحی سایت نریسون

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

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

 

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

استفاده از تصویر متحرک در طراحی سایت وای کو

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

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

 

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

کاربرد ویدیو در طراحی سایت ایگل کلیین

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

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

 

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

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

فرناندو مک لن (Fernando J. Maclen) طراح سایت کالیفرنیایی از یک تکنیک جالب در طراحی سایت خودش استفاده کرده است. فرناندو از ویدئوهایی از خودش در طراحی سایت استفاده کرده و منوهایی در کنار و پایین آن قرار داده است. چیزی که ویدئوی فرناندو را متفاوت می کند، تار بودن عمدی آن است.

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

 

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

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

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

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

d2e25_Capture-1 استفاده از ویدیو در طراحی سایت
با توجه به پایین بودن سطح عمومی سرعت اینترنت در ایران، نظر شما در مورد استفاده از ویدئو در طراحی سایت چیست؟ آیا کاربر ایرانی در مواجه با ویدئو در طراحی سایت حس منفی پیدا نمی کند؟

نظرات خود را با ما در میان بگذارید.

d6bd2_ad1 استفاده از ویدیو در طراحی سایت35eba_telegram-bot استفاده از ویدیو در طراحی سایت

منبع: websima https://websima.com/%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D9%88%DB%8C%D8%AF%D8%A6%D9%88-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/

درباره نویسنده

ابراهیم حنفی (متخصص سئو) هستم، 8 سال سابقه فعالیت در حوزه وب رو دارم و بطور تخصصی 4 سال هست که سئو کار میکنم و به لطف خدا نمونه کارهای خوبی در این زمینه بدست آوردم.

یک دیدگاه

You can post comments in this post.


  • سلام . به نظر من الان دیگه سرعت اینترنت به حدی رسیده که بشه فیلم گذاشت روی صفحه اصلی . فقط دو مورد خیلی مهمه .
    1- آیا گذاشتن ویدئو مشکلی برای سئو ایجاد نمیکنه ؟
    2- کیفیت ویدئو حدلامکان پایین باشه که حجمش کم باشه و راحت دانلود و لود بشه

    بهنام اسکویی 4 ماه دقیقه قبل پاسخ دادن


دیدگاه خود را بنویسید