Practical Tips for Great UI Animation | Pablo Stanley | Design Lead InVision Studio Platform

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 พ.ย. 2024

ความคิดเห็น • 132

  • @paragsahu18
    @paragsahu18 6 ปีที่แล้ว +125

    Loved the way he associates the types of animation with natural instincts!

    • @AwwwardsTV
      @AwwwardsTV  6 ปีที่แล้ว +1

      It's everything you want in a talk!

    • @paragsahu18
      @paragsahu18 6 ปีที่แล้ว +1

      Awwwards exactly... 😃

    • @MarioDarnadi
      @MarioDarnadi 4 ปีที่แล้ว

      thats from google material design.

    • @Astralmess
      @Astralmess 3 ปีที่แล้ว +1

      @@MarioDarnadi No, that's from the very basics of animation.

  • @beastyshout
    @beastyshout 4 ปีที่แล้ว +56

    Notes on animation usage:
    Linear: Avoid unless you really need. (like in a loop, or something always supposed to be in the same speed and you don't see when it's entering or exiting the screen)
    Ease in: At the beginning of the animation, when you have element that's exiting the screen.
    Ease out: When an element is entering the screen.
    Ease in & Out: When the element is always in the screen.
    Spring: Use it sparingly.

    • @removed107
      @removed107 3 ปีที่แล้ว

      Thanks, nem todo herói usa capa.

  • @dhavalpawale3149
    @dhavalpawale3149 4 ปีที่แล้ว +3

    Good luck to the developers who will be building these design animations.

  • @scottruigrok5986
    @scottruigrok5986 5 ปีที่แล้ว +32

    What a great guy, his character and personality make the very *useful* content he presents very funny to watch as well.

    • @AwwwardsTV
      @AwwwardsTV  5 ปีที่แล้ว +2

      He always delivers great talks - check out his latest one here th-cam.com/video/bEg5ySTUGxE/w-d-xo.html to call it "comedy gold" is NOT an overstatement! 🤣

  • @sassisammi
    @sassisammi 5 ปีที่แล้ว +12

    I've decided to call your UI Animation = "digital wayfinding" I love how you explained it should intelligently show the user where to go... Like great wayfinding in the physical world! It should 'enhance' the user journey!

  • @Xrissofficial
    @Xrissofficial 2 ปีที่แล้ว

    I love how nervous you are and how adorable you look. You did a fantastic job! Very helpful, useful and educational. Thank you very much

  • @thinkingaloud7925
    @thinkingaloud7925 2 ปีที่แล้ว

    i keep coming back to this lecture, in awe of the teaching style and associations and metaphorical use of daily life objects.

  • @neoth8647
    @neoth8647 5 ปีที่แล้ว +2

    As someone starting off in UI design, this is the best primer to great design practice

  • @koko0808008
    @koko0808008 4 ปีที่แล้ว +1

    Must seen for every people who have to work with animations

  • @plusign
    @plusign 5 ปีที่แล้ว +4

    Pablo you're the best! Really miss your channel and content since you made the move to InVision...

  • @Futurist_05
    @Futurist_05 5 ปีที่แล้ว +3

    Loved the way you teach..its clear that no universities will teach you like these😍😍😍😍😍

  • @iandrabedin
    @iandrabedin 5 ปีที่แล้ว +1

    great talk! practical tips are at 30:00

  • @ozzyfromspace
    @ozzyfromspace 5 ปีที่แล้ว +4

    I'm 24 and I love the Flinstones! It's not about age, it's about excellent taste 👌🏽🦕

  • @nmoschen
    @nmoschen 5 ปีที่แล้ว +3

    This guy is a really great presenter! 👏👏

  • @MinaRivera85
    @MinaRivera85 5 ปีที่แล้ว +55

    Man XD has really evolved since this video has posted...

    • @ringokam101
      @ringokam101 5 ปีที่แล้ว +1

      @Leighton Lamb 2023 adobe XD

    • @devon9308
      @devon9308 5 ปีที่แล้ว +11

      ​@Leighton Lamb 2023 You're watching a 34 minute video on UI animations without knowing what "XD" is? Bravo, that's genuine interest right there.

    • @alexs.5873
      @alexs.5873 5 ปีที่แล้ว +25

      Devon Thomas no need to be rude to a beginner. Even if they’re not a beginner, there’s no need to be rude.

    • @devon9308
      @devon9308 5 ปีที่แล้ว +7

      ​@@alexs.5873 wasn't meant to be rude. Just actually surprised that someone who doesn't know what XD is would watch a 30 minute video about UI design.

    • @mirac_
      @mirac_ 4 ปีที่แล้ว +12

      Devon ay man you don’t do that to beginners. This video may have been recommended to him and he‘s just getting interested in the topic, don’t discourage people like that.

  • @nicklaniado88
    @nicklaniado88 5 ปีที่แล้ว +6

    What a great character.. Loves the energy and flow! Well done 👌

  • @Vikyou
    @Vikyou 5 ปีที่แล้ว +1

    Pablo is my hero of the year :)

  • @pablocuesta9395
    @pablocuesta9395 5 ปีที่แล้ว

    Este chico es maravilla. Le pasa mucho que empieza trabado y con dudas, pero en cuanto coge carrerilla da gusto. Yo lo vi en una charla hace un año en Madrid y tuve la misma sensación. Ahora... cuando termina la ponencia tienes una sensación auténtica de haber abierto los ojos

  • @royalparvej9334
    @royalparvej9334 2 ปีที่แล้ว +1

    Love the video. He is awesome

  • @erhankbekar2413
    @erhankbekar2413 5 ปีที่แล้ว +15

    It was a very useful presentation, I had the opportunity to see most of the mistakes I made while creating animation. Thanks Awwwards Team

    • @AwwwardsTV
      @AwwwardsTV  5 ปีที่แล้ว +1

      we agree, educational + fun = a perfect combo!

  • @Melvin420x12
    @Melvin420x12 5 ปีที่แล้ว +13

    Nowadays XD is a lot closer to Awesomeness while staying at the same difficulty level. It still misses some features but I even animate some non-UI stuff in it because it's just so damn easy.

  • @FaysalShahi
    @FaysalShahi 5 ปีที่แล้ว +4

    He's very energetic, loved it.

  • @raghavendravilasakavi651
    @raghavendravilasakavi651 4 ปีที่แล้ว +1

    indeed this the best seminar so far. Thanks :)

  • @JakePomperDesign
    @JakePomperDesign 6 ปีที่แล้ว +5

    Pablo is Awesome! I learned so much from his TH-cam channel! He even inspired me to start my own!!

  • @Dampealx7
    @Dampealx7 5 ปีที่แล้ว +6

    That hair is everything, lol! Good to see you on this platform dude.

  • @pauljohn3898
    @pauljohn3898 2 ปีที่แล้ว

    Very detailed explaination

  • @cooldzweb
    @cooldzweb 6 ปีที่แล้ว +3

    It's a nice speech, so much info and necessary tool I need.

  • @JessicaTravieso
    @JessicaTravieso 4 ปีที่แล้ว +1

    Very good tips!!

  • @archrao2103
    @archrao2103 5 ปีที่แล้ว +3

    One of the best design presentations that I have seen in a loooong time! Enjoyed it.

  • @kangveeta
    @kangveeta 4 ปีที่แล้ว +1

    love this guy so much :)

  • @vikassuthar9017
    @vikassuthar9017 3 ปีที่แล้ว

    Soooooooooooooooooo.......sooooooooooooooooooo..... Cooooooooooooool 🔥🔥🔥🔥🔥

  • @rahulshahi6755
    @rahulshahi6755 4 ปีที่แล้ว

    Awesome cool example😙😙😙
    🙏🙏🙏🙏

  • @williamgarcia3697
    @williamgarcia3697 3 ปีที่แล้ว +1

    Fantástico!
    Thanks so much for the tips and great input!

  • @dannyquinn7814
    @dannyquinn7814 6 ปีที่แล้ว +7

    Great content!

  • @mojitostinson
    @mojitostinson 6 ปีที่แล้ว +25

    haha PABLO! The man

  • @rasbteesmahlombe7026
    @rasbteesmahlombe7026 5 ปีที่แล้ว +1

    Dope lecture

  • @Cupcakeablelover
    @Cupcakeablelover 5 ปีที่แล้ว +10

    This was such a good talk! Thank you for all the tips, Pablo :-D

  • @roger-travel-photography-tips
    @roger-travel-photography-tips 6 ปีที่แล้ว +1

    Thanks for sharing. Pablo you are great!

  • @jesusayala8932
    @jesusayala8932 3 ปีที่แล้ว +1

    Big fan

  • @adavidov
    @adavidov 5 ปีที่แล้ว +1

    Very inspirational.

  • @utsahpandey8505
    @utsahpandey8505 4 ปีที่แล้ว

    Just love this man

  • @anlongdus
    @anlongdus 5 ปีที่แล้ว +1

    Fun talk! I would probably call Awesomeness Expressiveness at 15:00 😆

  • @MichaelSartore
    @MichaelSartore 5 ปีที่แล้ว +1

    Great info.

  • @nicolaigabrielovich5253
    @nicolaigabrielovich5253 3 ปีที่แล้ว +1

    3 years later (now 2021)
    XD and Figma: stonk ⬆️
    Studio: not stonks ⬇️

  • @wachiya_a
    @wachiya_a 5 ปีที่แล้ว +1

    Awesome

  • @mohammadrezaasadi6529
    @mohammadrezaasadi6529 5 ปีที่แล้ว

    Awesome presentation ..

  • @elrumi6341
    @elrumi6341 5 ปีที่แล้ว

    Please make this video still available on TH-cam.

  • @timurgolovinov
    @timurgolovinov 4 ปีที่แล้ว +1

    Legend!

  • @MrGaneshh
    @MrGaneshh 5 ปีที่แล้ว +1

    Great guy

  • @srhyaekuau
    @srhyaekuau 5 ปีที่แล้ว +1

    Awesome!

  • @rafaelandresrubianolozano4991
    @rafaelandresrubianolozano4991 5 ปีที่แล้ว +1

    AWESOME! :D

  • @guillermocast01
    @guillermocast01 5 ปีที่แล้ว +2

    Great talk!
    A lot of useful and practical tips!

  • @tektoktv3640
    @tektoktv3640 5 ปีที่แล้ว +3

    AWESOME MAN

  • @PaoloImbag
    @PaoloImbag 2 ปีที่แล้ว +1

    Years later, Figma is at the Awesome meter.

  • @eugeniuszeudokimow3944
    @eugeniuszeudokimow3944 5 ปีที่แล้ว +2

    Gold!

  • @lasanthawijekoon
    @lasanthawijekoon 6 ปีที่แล้ว +2

    Thank you

  • @memoinanci5984
    @memoinanci5984 4 ปีที่แล้ว

    Which font is Pablo using in his presentation? Thanks!

  • @onteractive6688
    @onteractive6688 4 ปีที่แล้ว +1

    Nice :D

  • @tararamtaram
    @tararamtaram 5 ปีที่แล้ว +1

    Anyone knows the font he uses for the presentation?

  • @silvers.9617
    @silvers.9617 5 ปีที่แล้ว

    Great video, thank you! :)

  • @sagarpednekar9556
    @sagarpednekar9556 3 หลายเดือนก่อน

    How to download the Studio app?

  • @andrerocha2497
    @andrerocha2497 5 ปีที่แล้ว +1

    First: this was awesome! Thanks for sharing
    Second: what software did you use to create the presentation!?

  • @DeepfriedBaby
    @DeepfriedBaby 4 ปีที่แล้ว

    Curious, no WebFlow in there.
    Update: he does mention it, but not as a prototyping tool.

  • @morzuchstudio8182
    @morzuchstudio8182 4 ปีที่แล้ว

    It is possible to work as UI animator ? Like your job is animate ui interface for designer who prepere ui interface?

  • @Sormanification
    @Sormanification 4 ปีที่แล้ว

    Please, someone, suggest an online course to create such pitch decks as he does

  • @designerishwar
    @designerishwar 6 ปีที่แล้ว +2

    WOW!

  • @DeAndrePurdiejustdeandre
    @DeAndrePurdiejustdeandre 4 ปีที่แล้ว

    Great presentation. What software is Pablo using to deliver the presentation? Specifically at marker 6:14 where the word "it" changes to "It's" on the next slide.

    • @andrewd8026
      @andrewd8026 3 ปีที่แล้ว

      Most likely keynote since hes on a mac

  • @rkavi53
    @rkavi53 5 ปีที่แล้ว +7

    Audio level is what? like 2bars?

  • @iamHariharan0220
    @iamHariharan0220 5 ปีที่แล้ว

    Seems like he is on high.
    Well that’s made this video understandably awesome

  • @guavabean2969
    @guavabean2969 5 ปีที่แล้ว

    Having a community where you can ask questions & share your wins and struggles is super important to a healthy & happy remote work life. Check out the GUAVABEAN Freelancer Group 👉 facebook.com/groups/guavabean/

  • @HeIsAbsoluteTruth
    @HeIsAbsoluteTruth 5 ปีที่แล้ว

    If you have to recreate in After Effects for web implementation, why use another tool to start with? Why not just prototype in After Effects to start with?

  • @videogamesare1
    @videogamesare1 5 ปีที่แล้ว

    Thank you for the valuable content my dog

  • @shirshzibbu330
    @shirshzibbu330 4 ปีที่แล้ว +1

    3:20 anyone knows a JS/CSS library that does this?

  • @rohanpal1748
    @rohanpal1748 5 ปีที่แล้ว +6

    I think XD gives quite some granular control

  • @givvaz
    @givvaz 5 ปีที่แล้ว +1

    increíble 🤡

  • @karolinasowinska
    @karolinasowinska 4 ปีที่แล้ว

    That was informative :) Question: what's the name of the font that Pablo's using on his slides?

    • @YM-zf8mt
      @YM-zf8mt 4 ปีที่แล้ว

      Futura i believe ?

  • @Speaks4itself
    @Speaks4itself 5 ปีที่แล้ว +1

    Audio is really low

  • @joaquinvilchez5846
    @joaquinvilchez5846 5 ปีที่แล้ว +2

    Excellent, very interesting!
    Consultation: Does anyone know what the name of the typeface of the animations is called?
    Thank you!

    • @neoth8647
      @neoth8647 5 ปีที่แล้ว

      Literally my challenge in every second of my life, finding the same font I saw somewhere it is a struggle haha

    • @joaquinvilchez5846
      @joaquinvilchez5846 5 ปีที่แล้ว +1

      @@neoth8647 Hahaha, it must be some Apple font:(
      Although it is very similar to the one used by Spotify, it was called "Circular" if I remember correctly. But I also have trouble getting it.

  • @wapiwap2498
    @wapiwap2498 5 ปีที่แล้ว

    what is the app used on minute 03.20 ? please answer

    • @leondahmer5966
      @leondahmer5966 5 ปีที่แล้ว

      Its sketch with avataaars.com

  • @adimaurya02
    @adimaurya02 4 ปีที่แล้ว

    21:09

  • @nileshinkane6034
    @nileshinkane6034 5 ปีที่แล้ว

    Does anybody know what font is he using for presentation ???

  • @blueboytv9191
    @blueboytv9191 4 ปีที่แล้ว

    👏👏👏

  • @cynthiaestrada2565
    @cynthiaestrada2565 4 ปีที่แล้ว

    Very informative, great content and really useful tips for animation. @mediaartssbcc

  • @m.design
    @m.design 5 ปีที่แล้ว

    Why voice is too low?

  • @byebyebirdie8027
    @byebyebirdie8027 2 ปีที่แล้ว

    Can someone sum it up with timing in the video of important information for poor ADHD fellas like me?! My span is too short i need help lol

  • @Sozdat3l
    @Sozdat3l 5 ปีที่แล้ว

    great )

  • @Mrmcwarpather
    @Mrmcwarpather 5 ปีที่แล้ว +1

    Did I just get advertised to

  • @joeromersa
    @joeromersa 4 ปีที่แล้ว

    So it’s 2020 already and none of that tools is ready for fast-real-world-production

  • @hugoduarte4793
    @hugoduarte4793 5 ปีที่แล้ว +1

    Wait for just few months more, and then we all gonna see how adobe XD is gonna be more advance than Studio and more.

  • @yutani2225
    @yutani2225 5 ปีที่แล้ว +2

    The whole Presentation i had the need to cut his hair.

  • @juliarekamie
    @juliarekamie 4 ปีที่แล้ว

    👌😍🐱‍👤

  • @DrSchleck
    @DrSchleck 5 ปีที่แล้ว

    My practical design tip for Pablo: iron your shirt.
    It looks much "cleaner", which leads to more "clearity" and less "confusion". ;)

  • @pradeep422
    @pradeep422 4 ปีที่แล้ว

    dislikes wht!!!

  • @ranasingh8694
    @ranasingh8694 4 ปีที่แล้ว +1

    I really don't like any content or else of this video

  • @erroldtumaque3430
    @erroldtumaque3430 5 ปีที่แล้ว +4

    ngl his intro is pretty long

  • @medettleukabiluly6818
    @medettleukabiluly6818 5 ปีที่แล้ว

    "good", "great", but what about "billion dollar" animation?

  • @Doge317
    @Doge317 5 ปีที่แล้ว

    Studio is the worst name to name a software, because it is literally impossible to find in google. The name is so bad, google coundn't even find the site after appending it with "ui animation" or "animation" etc. Really hard to find if you can't remember or don't know the company that makes that software.

    • @neoth8647
      @neoth8647 5 ปีที่แล้ว

      I just searched 'Studio prototyping' and it was first result

  • @Oswee
    @Oswee 4 ปีที่แล้ว

    14% of the talk about himself...

  • @justafreak15able
    @justafreak15able 4 ปีที่แล้ว +1

    The most hipster this I've ever seen lol

  • @sacdigitaldesignweb
    @sacdigitaldesignweb 5 ปีที่แล้ว

    Too much explanations on ease in ease out... who doesn’t know about these??