معرفی 10 تا وبسایت موشن گرافیک عالی!

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

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

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

اما حالا ابزارهای خیلی راحت و خیلی خفنی برای طراحی و موشن گرافیک اومده. ابزارهایی مثل Webflow و Squarespace که طراحی رو آسون‌تر می‌کنن و برنامه‌هایی مثل Lottie و Spline که ابزارهای جدیدی برای انیمیشن ارائه می‌دن. میبینید؟ توی دنیای امروز همه چیز دست به دست هم میده تا شما بدون هیچ بهونه ای بتونید یه سایت خفن با موشن گرافیک طراحی کنید. ما میخوایم بهتون بگیم که موشن گرافیک فقط یه راه پرزرق و برق برای نشون دادن و معرفی کار شما نیست. انیمیشن می تونه به شما کمک کنه که خیلی راحت خدمات و محصولایی که دارید رو عرضه کنید و اون ها رو به فروش برسونید. حالا ما توی این مقاله این موارد رو براتون توضیح میدیم :

• طراحای وب، چجوری می تونن انواع موشن گرافیک رو تولید کنن؟
• نمونه های استفاده از Lottie و Spline
• 10 سایت خیلی خفن با موشن گرافیک عالی

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

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

LOTTIE چیه؟

ما میتونیم Lottie رو یه کتابخونه برای پلتفرم های iOS، Android و React Native تعریف کنیم. این ابزار انیمیشن‌های After Effects تو زمان واقعی ارائه می‌کنه و به برنامه‌ها اجازه می‌ده که به راحتی از این تصاویر متحرک استفاده کنن. Lottie یه مجموعه خیلی بزرگ هست که به طراحای موشن گرافیک کمک خیلی خیلی زیادی می کنه. اکثر کاربرای Lottie توی Webflow سایت های خودشون رو می سازن. چرا؟ چون که  Webflow ابزارهای پویانمایی داخلی خیلی خفنی برای وب داره. به علاوه اینکه یه راه خیلی آسون برای استفاده از فایل‌های Lottie هم فراهم می‌کنه.

SPLINE چیه؟

SPLINE یکی از ابزارهای خیلی جدیده که دست طراحا رو برای اضافه کردن موشن گرافیک به سایت ها باز میزاره. SPLINE یکی از تعاملی ترین و راحت ترین ابزارهایی هست که طراحا می تونن ازش استفاده کنن. کار با این بازار خیلی آسونه و شما برای انواع افکت های سرگرم کننده می تونید روی اشیاء Spline کلیک کنید و اون ها رو داخل محیط مورد نظر خودتون بکشید.

راه های دیگه ی اضافه کردن موشن گرافیک چیا هستن؟

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

10 وبسایت با موشن گرافیک عالی

نمونه ی موشن گرافیک تو وبسایت APPLE: IPAD PRO

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

 

نمونه ی موشن گرافیک توی وبسایت STRYVE

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

نمونه ی موشن گرافیک توی وبسایت BETTER UP بخش گزارش رهبری فراگیر

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

نمونه ی موشن گرافیک توی وبسایت CROING AGENCY

Croing یه آژانس خلاق و دیجیتاله که داره برای جلب توجه توی یک بازار اشباع رقابت می کنه. موشن گرافیکی که این مجموعه توی وبسایت خودش طراحی کرده، جوریه که بیش از اندازه حواس کاربر رو به کار میگیره. چجوری؟ یعنی شما هر لحظه که به صفحه نگاه کنید، یه چیزی در حال حرکته اما این حرکات کاملا منظمه و حواس پرتی ایجاد نمی کنه. کنار همین حرکت های کوچیک‌، «لحظه‌های عجیب» وجود دارن که بیننده رو متوقف می‌کنن. در واقع این لحظه ها برای این طراحی شدن که اطلاعات کلیدی رو ارائه بدن. عموما هم این اطلاعات چیزی هست که شما رو به سمت یه خدمات یا محصولی هدایت می‌کنه. با اینکه همه ی این تکنیک ها توی این سایت، کنار هم جذاب هستن ولی باید بگیم هر کدوم اون ها به تنهایی هم جذابیت خاص خودشون رو دارن. کلیک کنید و ببینید :

نمونه موشن گرافیک تو وبسایت VIBOR

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

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

نمونه موشن گرافیک تو وبسایت NOLK

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

نمونه موشن گرافیک تو وبسایت  PEPPA SAUCE

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

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

نمونه موشن گرافیک تو وبسایت STUTPAK

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

نمونه موشن گرافیک تو وبسایت annoyingmuseum.zendesk

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

نمونه موشن گرافیک تو وبسایت NETRIX

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

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

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

اینکه شما دانش ساخت و طراحی سایت موشن گرافیک رو داشته باشید یه بحثه. اما اینکه دانش استفاده از ابزارهای این رشته رو هم داشته باشید، یه بحث مهم دیگست. در واقع شما باید بدونی که برای ایجاد حرکات موشن گرافیک توی یه سایت باید از چه ابزاری و چجوری استفاده کنی. به همین خاطر توصیه می کنیم که قبل از شیرجه زدن داخل Lottie و Spline، اول از همه، اجزای سازنده انیمیشن های دو بعدی و سه بعدی رو یاد بگیرید. مثلا اگه موشن گرافیک دو بعدی مد نظرتونه، پیشنهاد می کنیم که  با After Effects Kickstart شروع کنید!

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