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

0 Comments

فوت وفن سینماگراف در طراحی سایت

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

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

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

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

سینماگراف چیه؟

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

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

به عنوان یه نمونه موفق میشه به سایت Glendevon Motors اشاره کرد که در طراحی صفحه اصلی سایت خود از ترکیب دو فوت وفن Hero Header و سینماگراف استفاده کرده. تصویر زیر خوب نشون دهنده تاثیر به کار گیری این تکنیکه.

ترکیب سینماگراف و بک گراند سایت

سینماگراف مناسب از کجا جفت و جور کنیم؟

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

واسه پیدا کردن سینماگراف بهترین راه حل جستجو در گوگله. سایتای بسیاری در این مورد فعال هستن که از بین اونا میشه به gallereplay.com اشاره کرد.

واسه تولید سینماگراف شما نیاز به نرم افزار مناسب دارین واسه ios به کار گیری وسایل flixel.com و واسه اندروید نرم افزار Loopsie پیشنهاد میشه.

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

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

۱- حرکت در تصویر نامحسوس باشه

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

۲- فضا واسه پیام خود باقی بذارین

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

۳- سینماگراف شما تکرار پذیر باشه

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

۴- در تصاویر خود از آدم استفاده کنین

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

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

۵- فایل سینماگراف رو بهینه کنین

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

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

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *