Тёмный

How to ANIMATE your Web Designs in After Effects like a professional! 

Matteo Valentino
Подписаться 2,6 тыс.
Просмотров 22 тыс.
50% 1

💌 Join "The Web Design Journal", my free newsletter and get my Web Design Projects Notion template : www.mpiko.stud...
The Books I read to become a Professional Web Designer:
Win without Pitching Manifesto: amzn.to/4bcrMRR
The Brand Flip: amzn.to/3xOLxR0
Thinking with Type: amzn.to/44m7tPF
This is Marketing: amzn.to/49U5u6q
Grid Systems in Graphic Design:** amzn.to/49ZMzae
Book of Ideas: amzn.to/49PsJP2
Book of Ideas V2: amzn.to/44oYzkE
In this After Effects tutorial, we'll explore the difference between good and bad UI animations. We'll learn how to create simple, effective animations that look great on any website.
UI animations are an important part of any website, and it's important to know how to create good ones. In this tutorial, we'll explore the basics of UI animation in After Effects, and learn how to create effective animations that look great on any website!
WHERE CAN YOU FIND ME ↓↓↓
INSTAGRAM - / mv_studiodesign
TIKTOK - / mv_studiodesign
TWITTER - / webvsign
MUSIC FROM: www.epidemicso...

Хобби

Опубликовано:

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 49   
@psychurch
@psychurch Год назад
what i got out of this (not in any order) - Use easing curves to make it look natural - dont use too much easing - keep same curve profiles throughout the entire animation - use different timing for different elements - small elements with short distance need short animation times - show most important elements first to create visual hierarchy I probably missed some points, theres a lot of info packed into this little video, thank you!
@thematteovalentino
@thematteovalentino Год назад
You got everything right my man, thank you for pointing out what you’ve got out it because it’s super helpful for me to understand how to improve and for others to see what’s included! Thank you!✨🫶🏻
@playpiano2264
@playpiano2264 10 месяцев назад
The camera shot, the ambiance and the overall viewing experience of the video was amazing 🔥
@thematteovalentino
@thematteovalentino 10 месяцев назад
Thank you so much man!!!
@Heybuchi
@Heybuchi Год назад
Happy to be among your first 1k subscribers.. love to see more after effects UI animations. ❤
@thematteovalentino
@thematteovalentino Год назад
I am glad to have you on the boat man✨ I am planning to make other videos about the topic, stay tuned!!
@fzkrm
@fzkrm 9 месяцев назад
Always smashing it on the little details which sets you apart from everyone else 🐐 🔥
@thematteovalentino
@thematteovalentino 9 месяцев назад
Thank you so much, I actually care a lot about tue details and I am happy that people see it!✨
@АланЯнченко
@АланЯнченко Год назад
Hi Matteo, thanks for the video, it’s the second video I add to my «watch before I start the animate» list. You make it clear, and use nice examples - so it’s a joy to watch. Also, nice method with the visualization of main sentences and resuming.
@thematteovalentino
@thematteovalentino Год назад
I’m honored to hear that, mate!👀 I’m also super happy to hear that you have found the video helpful and that it is understandable hahaha🙌🏻
@danielade-otoki4074
@danielade-otoki4074 Год назад
Great video Matteo. I just started learning ui animation and it was helpful . I'd love to see more videos on this topic and you just gained a new subcriber. Thanks
@thematteovalentino
@thematteovalentino Год назад
Hey Daniel, I’m very happy that the video was helpful and welcome to the UI animation world hahah. Definitely more content about that in the next weeks✨
@mahamudmunna5000
@mahamudmunna5000 Год назад
how are you going to put that in webflow? that big lottie file and how its going to be functional ?
@thematteovalentino
@thematteovalentino Год назад
It’s not a lottie animation, it’s a video that I send to the developers to show them how I want the animations of the website
@storieinpixel
@storieinpixel 8 месяцев назад
Very helpful! Thank you very much
@thematteovalentino
@thematteovalentino 8 месяцев назад
It is Always a pleasure to help!
@RealLucasJohn
@RealLucasJohn 8 месяцев назад
Great video man! How do you implement the AI Format on to a website? If I have a Webflow or Framer website how would I upload the animation to those sites? Does it need to be converted to html or something?
@thematteovalentino
@thematteovalentino 8 месяцев назад
I create the animations to show to tue developers how the website should look like in therms of motions and micro interactions. If you do everything by yourself, you can skip this phase of creating the animations and create them directly on your platform!
@luckmattos
@luckmattos Месяц назад
Hi thanks for the video. Can you explain your workflow, how this come out of AE and goes to actuall website?
@thematteovalentino
@thematteovalentino Месяц назад
That would be great hahah. Thanks for the idea!
@AmjadKhan-rz6nu
@AmjadKhan-rz6nu Год назад
I really love to create working ui but unfortunately I hate to code so will aftr effect can work for me as a good career and is it good career
@thematteovalentino
@thematteovalentino Год назад
It’s an awesome integration to your ui design service. It adds value to your offer and not a lot of people provide animations to the developers. In my career it’s adding a lot, I highly recommend you to implement After Effects in your workflow!!
@AmjadKhan-rz6nu
@AmjadKhan-rz6nu Год назад
@@thematteovalentino wow man… your channel is my inspiration… this is mind blowing and trust me no one show tutorials like this. You are amazing
@thematteovalentino
@thematteovalentino Год назад
Your words mean a lot to me, thank you si much mate, much love and I wish you I can brung you some other valuable content in the future!
@kaabfarooq6179
@kaabfarooq6179 Год назад
You are a Fighter, Wrestler... You dont give up easily... Used to do face reading some time ago
@thematteovalentino
@thematteovalentino Год назад
Much love mate❤️
@angelicaswift215
@angelicaswift215 5 месяцев назад
I really love the motion design of the AirPod website but just a quick question. Was the AirPod designed using blender? How can one create or outsource a digital product like that?
@thematteovalentino
@thematteovalentino 5 месяцев назад
Nope but to outsource such task you can find creators on instagram, ask for the price of such work(which varies depending on the creative) and then you can implement it in your project. Another thing that you can do is find inline some 3D models of the object that you need and see if you can find something that fits your project’s art direction
@rumorscameras
@rumorscameras 7 месяцев назад
hi, can you clarify, why do you do this animation, is it a website mockup then the web designer will copy what you did in code?
@thematteovalentino
@thematteovalentino 7 месяцев назад
I’ll answer to this question in the upcoming video in one/two days✨
@rumorscameras
@rumorscameras 7 месяцев назад
ok@@thematteovalentino
@lorenapereira1193
@lorenapereira1193 Год назад
Great Video! I'd love to see more of website animation in AE, I feel like there isn't really enough tutorials for website animations with AfterEffects. I love your work!
@thematteovalentino
@thematteovalentino Год назад
Thank you man, coming in the future! I think that there aren’t enough tutorials about the topic too, that’s why I would love to continue this series!🔥
@IsabelPereira-w8c
@IsabelPereira-w8c 8 месяцев назад
@@thematteovalentinoI agree! And the content that I do find sucks. Yours is so solid, please make moreeeee
@thematteovalentino
@thematteovalentino 8 месяцев назад
@@IsabelPereira-w8c thank you so much guys🫶🏻 Unfortunately the last period was full of projects but I am coming from next week!🤙🏻
@KoarisDesign
@KoarisDesign Год назад
Please you absolutely need to do more content about animating Webdesigns with After Effects.... What are your thoughts on Principle? I used it for a few weeks, it's pretty intuitive but a bit buggy with some things....
@thematteovalentino
@thematteovalentino Год назад
Right now principle is not at a stage that for me can replace AE. The reality good thing, is that it’s a one time payment software so, if the software become extremely good, can be a really good alternative! By the way I’m going to make more content about this topic✨
@abdiissak1674
@abdiissak1674 Год назад
Great content Matteo, you are super underrated bro, you gained a new subscriber!
@thematteovalentino
@thematteovalentino Год назад
I’m always happy to help all of you and I’m glad to hear that you like the content🫶🏻
@another.designer
@another.designer Год назад
🙌🙌
@thematteovalentino
@thematteovalentino Год назад
Thank you!
@AmjadKhan-rz6nu
@AmjadKhan-rz6nu Год назад
I m ui designer , should I learn after effect and does it will help me to level up my ui skills and is these animations are possible in real??
@thematteovalentino
@thematteovalentino Год назад
The animations are 100% real, you can code them whenever you want! In my opinion you should learn the software, it might seems scary and overwhelming but it isn’t!✨
@kaabfarooq6179
@kaabfarooq6179 Год назад
Thanks for your valuable advice. Kindly also make on slider animations and common mistakes. Thanks a lot
@thematteovalentino
@thematteovalentino Год назад
Thank you a lot mate! Definitely something in my planner! Sliders are pretty tricky to make and can definitely ruin an entire landing page👀
@dwojczuk1
@dwojczuk1 Год назад
Just discovered your chanel. Great content!
@thematteovalentino
@thematteovalentino Год назад
Thank you very much✨
@FlowerQ155
@FlowerQ155 Год назад
Awesome!
@thematteovalentino
@thematteovalentino Год назад
Thank you mate!!!
Далее
Indian web design: cheap, but it works. Here's why
9:58
Spline Tutorial for Beginners: 3D Website Crash Course
20:16
Самая сложная маска…
00:32
Просмотров 1,2 млн
The fundamentals of animation in Web Design
18:29
Просмотров 17 тыс.
How To Animate Like After Effects in Figma
10:27
Просмотров 53 тыс.
Top 5 Animated Websites (And Why They're Good)
7:00
Просмотров 78 тыс.
I found more incredible 3D personal portfolios!!!
19:12
Reacting to 21 Design Portfolios in 22 Minutes
22:41
Просмотров 601 тыс.
Running With Bigger And Bigger Lunchlys
0:18
Просмотров 105 млн
Drawing DeadPool😀30 sec, 3 min, 30 min Challenge
1:00
⚡ 10,000V Tough Mudder obstacle 🤣
0:13
Просмотров 36 млн