وقتی متن و انیمیشن ادغام می شوند، چیزی واقعاً جذاب ایجاد می شود. و به همین دلیل است که تایپوگرافی جنبشی یک شکل هنری است که فراتر از تایپوگرافی سنتی است و می تواند متن ایستا را به تجربه ای پویا و تعاملی تبدیل کند.
تایپوگرافی جنبشی چیست؟
تایپوگرافی جنبشی تکنیک متحرک سازی متن برای حرکت و تغییر آن بر روی صفحه به طرق مختلف است. این میتواند از حرکات ظریف، مانند حروفی که به آرامی منبسط یا منقبض میشوند، تا توالیهای دقیقتر که در آن متن روی صفحه پخش میشود، رشد میکند، کوچک میشود یا به روشهای غیرمنتظرهای تغییر میکند.
اینو بگیر الگوی تایپوگرافی جنبشی (برای افتر افکت) به عنوان مثال در Envato Elements:
![الگوی تایپوگرافی جنبشی](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108476/image-upload/kinetic_typography_template.jpg)
![الگوی تایپوگرافی جنبشی](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108476/image-upload/kinetic_typography_template.jpg)
![الگوی تایپوگرافی جنبشی](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108476/image-upload/kinetic_typography_template.jpg)
این ساده، سرراست است و همچنان بینندگان را با شیوه ای که متن پویا و «زنده» به نظر می رسد، جذب می کند.
زیبایی تایپوگرافی جنبشی در تطبیق پذیری و توانایی آن در جلب توجه است. میتوان از آن برای انتقال احساسات، تأکید بر پیامها و ایجاد تجربهای جذابتر و فراگیرتر برای بیننده استفاده کرد.
![اسکرین شات از تایپوگرافی متحرک](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108476/image-upload/small_web.jpg)
![اسکرین شات از تایپوگرافی متحرک](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108476/image-upload/small_web.jpg)
![اسکرین شات از تایپوگرافی متحرک](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108476/image-upload/small_web.jpg)
اگرچه در حال حاضر روند رو به رشد است، اما مفهوم تایپوگرافی جنبشی جدید نیست. قدمت آن به دهه 1950 برمی گردد اولین استفاده قابل توجه در «شمال از شمال غرب» آلفرد هیچکاک.
امروزه تایپوگرافی جنبشی به طور گسترده به صورت آنلاین استفاده می شود. کاربرد آن از طراحی وب سایت گرفته تا تبلیغات آنلاین، رسانه های اجتماعی و موارد دیگر را شامل می شود. کلید استفاده موثر از تایپوگرافی جنبشی در تعادل بین فونت، حرکت و طراحی کلی است.
حرکت صاف و یکنواخت، کنتراست بالا برای خوانایی، و در نظر گرفتن متفکرانه تجربه کاربر تضمین می کند که خوب به نظر می رسد و پیام مورد نظر را به طور مؤثر منتقل می کند.
روندهای فعلی در تایپوگرافی جنبشی
تایپوگرافی جنبشی، شکلی از قبل محبوب طراحی دیجیتال، در سال 2024 رواج یافته است. و نحوه اجرای آن کمی متفاوت از نحوه استفاده در گذشته است. در اینجا بینشی در مورد آنچه که مردم در حال حاضر بر روی آن تمرکز دارند، آورده شده است.
تعامل
یکی از قابل توجه ترین روندها در تایپوگرافی جنبشی در حال حاضر این است که چگونه تعامل و پاسخگویی کلی بیشتری به خود می گیرد — نه در نوع “طراحی پاسخگو”، بلکه به روش “این متن به آنچه کاربر انجام می دهد واکنش نشان می دهد”. .
بنابراین، متن حرکت می کند، اما همچنین به ورودی و اقدامات کاربر واکنش نشان می دهد و تجربه کاربر جذاب تری را ارائه می دهد. جریان وب. این روند به ویژه در طراحی وب قابل مشاهده است، جایی که تایپوگرافی به حرکات مکان نما، اسکرول یا کلیک پاسخ می دهد.
![گروه دلاسوس](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108476/image-upload/delassus_group.jpg)
![گروه دلاسوس](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108476/image-upload/delassus_group.jpg)
![گروه دلاسوس](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108476/image-upload/delassus_group.jpg)
را گروه دلاسوس وب سایت یک مثال عالی از این را ارائه می دهد. برای ارائه متنهای ساده و انیمیشنهای سبکشده که با حرکت دادن نافرمان به اطراف تغییر میکنند، به پیمایش اختلاف منظر افقی متکی است.
طرح های روایت محور
تایپوگرافی جنبشی به طور فزاینده ای برای گفتن داستان نیز استفاده می شود. مسلماً، این همیشه بخشی از این سبک تایپوگرافی بوده است، اما در صفحات فرود و در کمپینهای بازاریابی مرتبط است.
از این نظر فراتر از تزئینات صرف است، در این راستا، به عنوان یک وسیله روایی عمل می کند که بیننده را از طریق یک داستان راهنمایی می کند، خواه تاریخچه یک شرکت، ویژگی های یک محصول یا پیام یک کمپین باشد.
دسترسی
محتوای دیجیتال در سطح جهانی مصرف میشود، بنابراین ایجاد طرحها شامل و در دسترستر از همیشه مهم است. تایپوگرافی جنبشی با افزایش خوانایی و درک مطلب به این امر کمک می کند. با طراحی دقیق، متن متحرک را می توان به راحتی خوانا و قابل درک کرد و برای مخاطبان مختلف از جمله افراد دارای معلولیت پذیرایی کرد.
اگرچه این طرح ها همیشه باید با متن جایگزین مناسب و ناوبری قابل دسترسی با صفحه کلید تکمیل شوند. زیبایی شناسی هرگز نباید بر عملکرد و دسترسی اولویت داده شود.
عناصر طراحی در تایپوگرافی جنبشی
قبل از اینکه خودتان ایجاد طرح های تایپوگرافی جنبشی را بررسی کنید، چند جنبه طراحی وجود دارد که باید از آنها آگاه باشید.
ادغام با سایر عناصر طراحی
تایپوگرافی جنبشی در سال 2024 فقط در مورد متن متحرک در انزوا نیست. این در مورد نحوه عملکرد این متن در کنار سایر عناصر طراحی وب است.
این شامل ترکیب متن پویا با تکنیکهای پیشرفته مانند پیمایش اختلاف منظر – همانطور که در بالا با مثال Delassus Group اشاره کردیم – که حس عمق را به صفحات وب میافزاید.
ریز تعاملها، که ویژگیهای طراحی کوچک و پاسخگو هستند که به ورودی کاربر واکنش نشان میدهند، راه دیگری برای استفاده از تایپوگرافی جنبشی است.
![اسکرین شات از افکت شناور تایپوگرافی](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108476/image-upload/cleveland.jpg)
![اسکرین شات از افکت شناور تایپوگرافی](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108476/image-upload/cleveland.jpg)
![اسکرین شات از افکت شناور تایپوگرافی](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108476/image-upload/cleveland.jpg)
این عناصر با هم کار می کنند تا یک تجربه همه جانبه برای بازدیدکنندگان سایت ایجاد کنند و یک وب سایت را به فضایی تعاملی و جذاب تبدیل کنند. ویژگیهایی مانند این باعث میشود افراد بخواهند برای مدت طولانیتری در سایت شما بمانند، و تا زمانی که عملکرد سایت را کاهش دهند، در نتیجه به دنبال کاهش نرخ پرش هستید.
تایپوگرافی قهرمان
متن های متحرک و بزرگ، به ویژه در بخش قهرمان وب سایت ها، یکی دیگر از جنبه های تایپوگرافی جنبشی است که محبوبیت پیدا می کند. این رویکرد شامل استفاده از متن در مقیاس بزرگ برای نامهای تجاری، سرفصلها یا پیامهای کلیدی، ایجاد یک بیانیه بصری جسورانه در لحظه ورود شخصی به وبسایت شما است.
این تکنیک کارآمد است زیرا پیامهای کلیدی را در جلو و مرکز قرار میدهد و اطمینان میدهد که فوراً توجه بیننده را به خود جلب میکنند.
![اولین تناسب](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108476/image-upload/firstfit.jpg)
![اولین تناسب](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108476/image-upload/firstfit.jpg)
![اولین تناسب](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108476/image-upload/firstfit.jpg)
فقط نگاه کن FirstFit سایت اینترنتی. این تایپوگرافی جنبشی، متن قهرمان بزرگ، و پیمایش اختلاف منظر همه را در یک ترکیب می کند.
تکنیک های انیمیشن
از تکنیکهای متنوع انیمیشن نیز برای افزودن عمق و خلاقیت به تایپوگرافی جنبشی استفاده میشود.
این شامل روشهایی مانند شکلگیری، که در آن متن در شکل تغییر میکند، حرکت مایع که کیفیتی سیال و بدون درز به متن میدهد، و کولاژ متحرک، که عناصر بصری مختلف را با تایپوگرافی ترکیب میکند تا جلوهای غنی و لایهای ایجاد کند.
جنبه های فنی تایپوگرافی جنبشی
چندین جنبه فنی وجود دارد که باید هنگام استفاده از تایپوگرافی جنبشی در طرح های خود در نظر بگیرید تا اطمینان حاصل شود که ظاهر و عملکرد آن همانطور که در نظر گرفته شده است. در اینجا چند نکته وجود دارد که باید در نظر داشته باشید:
انتخاب فونت
انتخاب فونت ها و نحوه جفت شدن آنها نقش مهمی در موفقیت تایپوگرافی جنبشی دارد.
ضروری است ترکیب فونت هایی را انتخاب کنید که مکمل یکدیگر باشند و طراحی کلی را بهبود بخشند.
ملاحظات کلیدی عبارتند از:
- متعادل کردن یک سریف با یک sans-serif برای کنتراست
- در نظر گرفتن وزن فونت برای سلسله مراتب بصری
- اطمینان از همخوانی فونت ها با پیام و مخاطب مورد نظر
همچنین، خوانایی همیشه باید در اولویت باشد، به خصوص زمانی که حرکت درگیر باشد.
به آنچه آنجلو تورس با انتخاب فونت در سایت نمونه کار خود انجام می دهد نگاه کنید:
![آنجلو تورس](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108476/image-upload/angello_torres.jpg)
![آنجلو تورس](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108476/image-upload/angello_torres.jpg)
![آنجلو تورس](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108476/image-upload/angello_torres.jpg)
تاثیر رنگ
رنگ ها در تایپوگرافی بیشتر از جذاب جلوه دادن متن هستند. آنها عمیقاً بر UX و تعامل تأثیر می گذارند. انتخاب رنگ مناسب می تواند خوانایی را افزایش دهد، احساسات را برانگیزد و اطلاعات کلیدی را برجسته کند.
انتخاب رنگ می تواند حال و هوا را منتقل کند و با هویت برند همخوانی داشته باشد. درک روانشناسی رنگ ها و نحوه تعامل آنها با تایپوگرافی ضروری است.
کنتراست بالا بین متن و پسزمینه برای خوانایی نیز ضروری است، مخصوصاً وقتی متن در حال حرکت است.
ابزار و نرم افزار
ایجاد تایپوگرافی جنبشی به ابزارها و نرم افزارهای خاصی نیاز دارد که امکان انیمیشن سازی متن مناسب را فراهم می کند.
ابزارهای طراحی کاربرپسند مختلفی وجود دارد که سطوح مختلف مهارت و نیازهای پروژه را برآورده میکند، بنابراین اگر تصمیم به ایجاد طرحهای خود داشته باشید، گزینههای کوتاهی نخواهید داشت.
از جانب Adobe After Effects، به دلیل ویژگیهای جامع و انعطافپذیری، به گزینههای در دسترستر مانند Creative Cloud Express یا کانوا، که رابط های ساده تری را برای انیمیشن های پایه ارائه می دهند، انتخاب نرم افزار می تواند تأثیر زیادی بر روند طراحی داشته باشد.
چیزی را انتخاب کنید که با سطح مهارت شما و آنچه که می خواهید انجام دهید مطابقت داشته باشد و باید طلایی باشید.
آیا روند تایپوگرافی جنبشی را امتحان خواهید کرد؟
تایپوگرافی جنبشی در سال 2024 به عنوان یک فرصت عالی برای ایجاد تجربیات متقاعد کننده، تعاملی و جذاب است. از آنجایی که برای سالها یک گزینه طراحی برجسته بوده است، مطمئناً نقشی کلیدی در شکلدهی به نحوه ساخت وبسایتها برای آینده قابل پیشبینی باقی خواهد ماند.
تایپوگرافی جنبشی چه برای برندسازی، داستان سرایی یا ایجاد تجربیات همه جانبه، می تواند خلاقیت و ارتباط واقعی را به بازدیدکنندگان سایت شما ارائه دهد. آیا آن را در طراحی بعدی خود قرار خواهید داد؟