Jake Pomper Design
Jake Pomper Design
  • Видео 44
  • Просмотров 492 304
Animating a live streaming app UI in After Effects
In this video, I share my exact process I used used to animate Actio's home feed. Drop a like if you found this valuable!
Chapters:
0:00 Intro
1:43 Preparing assets for Export in Figma
3:58: Adding assets to After Effects
5:06 Animating a progress bar using Trim Paths
8:18 Replace layer shortcut
9:20 Animating a number counter using slider and an expression
12:46 Organizing your file
13:22 Animating the slides using a null object (paged swiping)
15:50 Adding easing to smooth out the animation
18:36 Adding swipe indicators to convey user interactions
20:50 Rendering and final thoughts
Просмотров: 2 398

Видео

Text Shake Effect: UI Animation in After Effects
Просмотров 5 тыс.2 года назад
In this video, I demonstrate how to create a convincing, physics-based animation in which a user leverages the accelerometer of the phone, shaking their device to process to the next state in a user interface. This is a versatile interaction, that could be used during onboarding, for success failure states, and more. Chapters: 0:00 Intro 1:19 Figma Design and Asset Export 2:21 After Effects Set...
Ace the UI/UX Take-home Test: Full Case Walkthrough
Просмотров 48 тыс.3 года назад
Email: jpdesignacademy@gmail.com In this video, I share a recent take-home test I completed while interviewing for a senior product designer role at a world-renowned digital product design agency. I share my end-to-end process, including my research approach, low and high fidelity design and motion prototyping. Admittedly, this probably took me closer to 20 hours (the prompt said max 10 hours)....
Quick Tips: UX Whiteboard Tests
Просмотров 1,2 тыс.3 года назад
I'll eventually do a deep dive on how to tackle whiteboard test problems, but here are some quick tips that may be helpful as you prepare for a UX whiteboard interview Full Live Stream Q&A: ruclips.net/video/cArp_pP-WLg/видео.html #UI #UX #Interview #whiteboard #productdesign
"I love UI design but hate user research..."
Просмотров 1,4 тыс.3 года назад
Has the "dribbblization" of design misguided aspiring UX/product designers? Watch the full live stream here where I answer a bunch of your questions: ruclips.net/video/cArp_pP-WLg/видео.html #UI #UX #Dribbble #Figma #productdesign #userexperience #uxresearch #designthinking
"How many UI/UX Projects should I have in my portfolio?"
Просмотров 2,2 тыс.3 года назад
For new UI/UX designers, my recommendation is to have at least 2 fully baked case studies that illustrate your product thinking as well as your visual design skills. Watch the full live stream here where I answer a bunch of your questions: www.youtube.com/watch?v=cArp_...​
"How did you get into UI Animation?"
Просмотров 7253 года назад
Honestly, it was curiosity that led got me interested in UI animation early on. Watch the full live stream here where I answer a bunch of your questions: www.youtube.com/watch?v=cArp_... #ui #ux #productdesign #animation #design #designthinking #mobile #app #react #dev
Advice for Junior UI/UX Designers
Просмотров 4,1 тыс.3 года назад
Watch the full live stream here where I answer a bunch of your questions: ruclips.net/video/cArp_pP-WLg/видео.html In this snippet, I talk about some things you can do as a new designer that will help get you hired.
UI Motion Design in Invision Studio
Просмотров 4,4 тыс.3 года назад
In this video, I demonstrate how to create some smooth and seamless transitions from screen to screen inside of Invision Studio. I hope you enjoy, and you learn something valuable! Please take a moment to fill out my UI Motion Course Survey. Provide your email for a discount when it's released! Survey: docs.google.com/forms/d/13lCSEbvQCSVbqCrg0gPGO76bHMB9awmZzTGwSgk16zc/edit Inquiries: jpdesign...
[Figma] Social Media App UI: Flexible Component Design
Просмотров 4,2 тыс.3 года назад
In this video, I demonstrate how to properly build modular components in Figma that will make your design process more efficient as your design system grows. Terisly Design System & Component Library: tetrisly.com/figma/ Take my UI animation Course survey for a discount when the course is released! docs.google.com/forms/d/13lCSEbvQCSVbqCrg0gPGO76bHMB9awmZzTGwSgk16zc/edit Business inquiries: jpd...
Invision Studio: Advanced UI Motion Design | Travel Website Tutorial
Просмотров 16 тыс.3 года назад
Invision Studio: Advanced UI Motion Design | Travel Website Tutorial
Left Nav Bar UI Design: Setting Up Your Grid Layout in Figma
Просмотров 57 тыс.3 года назад
Left Nav Bar UI Design: Setting Up Your Grid Layout in Figma
Figma + Principle UI Animation: Create a Liquid Swipe Effect!
Просмотров 20 тыс.4 года назад
Figma Principle UI Animation: Create a Liquid Swipe Effect!
Planet Parallax Effect: Invision Studio UI/UX Animation Tutorial
Просмотров 6 тыс.4 года назад
Planet Parallax Effect: Invision Studio UI/UX Animation Tutorial
UI Animation, Motion Design & Micro Interaction Basics
Просмотров 96 тыс.4 года назад
UI Animation, Motion Design & Micro Interaction Basics
[Figma] Dark Theme UI Tutorial
Просмотров 25 тыс.4 года назад
[Figma] Dark Theme UI Tutorial
Principle UI/UX Animation: Create a slider (that actually works!)
Просмотров 9 тыс.4 года назад
Principle UI/UX Animation: Create a slider (that actually works!)
Create an auto-type animation in Webflow!
Просмотров 46 тыс.4 года назад
Create an auto-type animation in Webflow!
Invision Studio: Responsive Navigation Menu Animation!
Просмотров 5 тыс.4 года назад
Invision Studio: Responsive Navigation Menu Animation!
(Part 4) Invision Studio: UX Interview Prep: Interaction & Motion Design
Просмотров 9014 года назад
(Part 4) Invision Studio: UX Interview Prep: Interaction & Motion Design
(Part 1) UX Interview Prep: The Design Prompt!
Просмотров 2,3 тыс.4 года назад
(Part 1) UX Interview Prep: The Design Prompt!
Tips for Landing Your First UX Designer Role
Просмотров 1,1 тыс.4 года назад
Tips for Landing Your First UX Designer Role
(Part 2) InVision Studio: Advanced Motion Design - Player Stats Dashboard!
Просмотров 8 тыс.4 года назад
(Part 2) InVision Studio: Advanced Motion Design - Player Stats Dashboard!
(Part 1) InVision Studio: Advanced Motion Design - Player Stats Dashboard!
Просмотров 25 тыс.5 лет назад
(Part 1) InVision Studio: Advanced Motion Design - Player Stats Dashboard!
Prototype Faster with Forma Sketch Library!
Просмотров 3735 лет назад
Prototype Faster with Forma Sketch Library!
InVision Studio UI/UX Tutorial: Animate a Popular Tab Bar Interaction!
Просмотров 10 тыс.5 лет назад
InVision Studio UI/UX Tutorial: Animate a Popular Tab Bar Interaction!
InVision Studio Tutorial: Parallax Scrolling Animation!
Просмотров 17 тыс.5 лет назад
InVision Studio Tutorial: Parallax Scrolling Animation!
Flinto UI/UX Tutorial: Awesome Tab Bar Animation!
Просмотров 4,2 тыс.5 лет назад
Flinto UI/UX Tutorial: Awesome Tab Bar Animation!
Sketch + Invision UX Design: Create an Interactive Sitemap!
Просмотров 4,4 тыс.5 лет назад
Sketch Invision UX Design: Create an Interactive Sitemap!
Sketch + Principle UI/UX Tutorial: Advanced Motion Prototyping!
Просмотров 16 тыс.5 лет назад
Sketch Principle UI/UX Tutorial: Advanced Motion Prototyping!

Комментарии

  • @patricwagnerbln
    @patricwagnerbln 3 дня назад

    thanks

  • @soonkpaik2037
    @soonkpaik2037 Месяц назад

    This isn’t really robust. The grid system works only your screen size is full screen. Once your screen size shrinks, every grid is broken as you can’t ‘stretch’ the grid with fixed left margin for nav

  • @ssempijjacharles6501
    @ssempijjacharles6501 Месяц назад

    What is the name of the tool?

  • @vrajgajjar-cm7fq
    @vrajgajjar-cm7fq 2 месяца назад

    Hey, Jake Thanks a lot this tutorial was really helpful

  • @yannmarctenanteu4441
    @yannmarctenanteu4441 3 месяца назад

    Would appreciate a tutorial on how to do that ripple effect in figma coupled with your sleek animations.

  • @user-rp3gm3yw2k
    @user-rp3gm3yw2k 3 месяца назад

    which app do you use for motion desig? Figma or After Effect?? Any Recommendation?

  • @Dlrmon
    @Dlrmon 3 месяца назад

    Thanks for sharing, Im pretty new at ui ux, im wondering, is this app better that figma? is it another option? and oldest one?

  • @DabinIm
    @DabinIm 3 месяца назад

    Thank you for sharing your insight and experience! Super helpful! I was wondering if all take-home test should be presented in this scroll form or should it be in presentation slides? Would appreciate your thoughts on that.

  • @uichakir836
    @uichakir836 4 месяца назад

    thank you !

  • @Zhadow45
    @Zhadow45 4 месяца назад

    Hey, for everyone with the blinking cursor issue that is still confused in 2023: Go to the custom code. Edit/add this line inside the script: cursorChar: '' If you already have a line like this but instead it says '_' just delete the underline (_). If you don't have that line yet, just add it and add nothing between the quotation marks. If you're adding it at the end of the script, don't add a comma. If you are adding it in the middle. Add a comma.

  • @Pibepan10
    @Pibepan10 5 месяцев назад

    I don’t get why to go to AE if u are making a prototype, the developer needs the information… did he has to guess the settings or properties? I’d love to be able to just edit it like that and the developer has it clear

  • @IMRANKHAN-cg6yr
    @IMRANKHAN-cg6yr 5 месяцев назад

    sir github repositry can i find

  • @kaunghtet9743
    @kaunghtet9743 5 месяцев назад

    I was expecting some boring figma timelapse. man, I just learned a lot just from this one video. Thank you for explaining all the details. Your explanation is interesting and easy to understand. Hoping more Tutorial videos❤

  • @filipayaviri1787
    @filipayaviri1787 5 месяцев назад

    Hola buenas, alguien que me podria pasar el instalador de invision studio para windows por favor, para que ya no se puede descargar de la pagina

  • @PetrAfanasyev
    @PetrAfanasyev 5 месяцев назад

    20 hours? whaaat, crazy! 👍

  • @anjathomae9659
    @anjathomae9659 6 месяцев назад

    cooool, thank you so much

  • @dheiwofjjd
    @dheiwofjjd 7 месяцев назад

    Regret to see this amazing lecture 3 years later.

  • @robertto1ify
    @robertto1ify 7 месяцев назад

    Hi bro! Did you launch finally your course?

  • @qubaabdus4557
    @qubaabdus4557 7 месяцев назад

    part 2 and 3??????? where is it? i completed the prompt and wanted to compare my solution with his. :(

  • @user-do3he3uq1t
    @user-do3he3uq1t 8 месяцев назад

    Thanks You !

  • @reipwnz
    @reipwnz 9 месяцев назад

    I just started getting into UX so this was really helpful and insightful. You very clearly laid out your thought process throughout the whole assignment. Thanks so much for making this!

  • @CHi-le1qc
    @CHi-le1qc 10 месяцев назад

    Where are parts 2 and 3?

  • @KayGee_yt
    @KayGee_yt 10 месяцев назад

    You did all this in a week with two other jobs?! I genuinely want to chat with Feelix now

  • @sinanouri5035
    @sinanouri5035 10 месяцев назад

    You must re-upload this video

  • @designeranthony
    @designeranthony 10 месяцев назад

    How do I start learning more about interaction and motion design?...Where do I start?

  • @user-ot3of4iu3d
    @user-ot3of4iu3d 10 месяцев назад

    now, everything can be done in Figma :)

  • @designeranthony
    @designeranthony 11 месяцев назад

    The thing that pains me the most is that Flinto is such a good tool for prototyping, but when it comes to branding they are stuck in 2012. Will always have Flinto apart of my toolkit.

  • @madhumia1196
    @madhumia1196 11 месяцев назад

    helpful

  • @minhanhpham2508
    @minhanhpham2508 11 месяцев назад

    the most informative overview of UI animation for beginners!

  • @Elrykkstorm
    @Elrykkstorm 11 месяцев назад

    Awesome content. please keep these coming!

  • @hemisgio18
    @hemisgio18 11 месяцев назад

    Your explanation was incredible! If I ace my UI/UX challenge, I'll definitely come back here and give the feedback hahaha! Thank you! Edit: thank you! I got the job :D

    • @JakePomperDesign
      @JakePomperDesign 10 месяцев назад

      Love to hear it! Congrats on the job!

    • @hemisgio18
      @hemisgio18 10 месяцев назад

      @@JakePomperDesign Thank you so much!

  • @jamesswafford9919
    @jamesswafford9919 Год назад

    Would it be possible to use all these functions in Freehand? Another thing, would you be able to use the .studio extension in Freehand?

  • @deipty222
    @deipty222 Год назад

    Just found out that Studio no longer exists! :(

  • @meenakshisaxena5214
    @meenakshisaxena5214 Год назад

    🙏

  • @victorrrsimon
    @victorrrsimon Год назад

    is there a way to set a time parameter so that the animation time is consistent with different amounts of text.

  • @dustinhodges9987
    @dustinhodges9987 Год назад

    I appreciate the solid advice

  • @Mayo201991
    @Mayo201991 Год назад

    Hi Jake! Quick question. I have a take home design task were they require me to design the interface for an online student submission form. The form needs to include some kind of navigation walk through for the students to submit essays and projects. A typical University submissions page. I wanted to know if I was to do my initial research survey what questions should I be asking? Should I ask what sort of problems they come across whilst navigation a submissions page? I'm stuck with questions to write to ask students or if I should just look at other submission pages. Thanks

  • @cynthiaugwudesigns
    @cynthiaugwudesigns Год назад

    Hey Jake, this is Cynthia if you remember me lol Lovely tutorial btw❤

  • @goodnewsjohn2482
    @goodnewsjohn2482 Год назад

    Very nice tutorial... I love it, thanks for sharing

  • @islam_imad
    @islam_imad Год назад

    Yo really thank you ❤️ And btw i saw one of your old tutorials, you spoke about your animation course and i can't find it's link anywhere on the channel.

    • @JakePomperDesign
      @JakePomperDesign Год назад

      It’s still in the works…life kind of got in the way 😂

  • @john_rodrigues
    @john_rodrigues Год назад

    Love this! Going to give it a try.

  • @dejankeleman1918
    @dejankeleman1918 Год назад

    lol 10h and made their complete product designed, thought out, with future tech in mind (now with chat GPT this can be a great product) all that in one day of work 😄 let's not set up expectations space high, Mount Everest is okay but this is Stratosphere high in terms of expectations 😅

  • @randomz5641
    @randomz5641 Год назад

    1:19

  • @oladejosmart7431
    @oladejosmart7431 Год назад

    Is your course out now?

  • @oladejosmart7431
    @oladejosmart7431 Год назад

    This was really helpful, thank so much, I appreciate every bit of effort put into making this video. I'm definitely subscribing.

  • @HamzaBilal-kr5ns
    @HamzaBilal-kr5ns Год назад

    can you plz tell me the name of the tool, video, software where these kind of mobile animations are created?

  • @karthikvenugopal9139
    @karthikvenugopal9139 Год назад

    does anybody know how to style each word differently, like a separate font for each?

  • @dejankeleman1918
    @dejankeleman1918 Год назад

    Hey man love your videos. Recently I revisited them since I was looking for the best UI animation and prototype tools. It seems lots of things have changed, InVison Studio seems doesn't exist anymore (?!) Do you use AfterEffects now, since it's not made for prototyping and it's more complicated any other tools that are good for animating the UI in 2023? Thank you, love your videos keep up amazing work you do!

    • @JakePomperDesign
      @JakePomperDesign Год назад

      Hey man! Appreciate the kind words. Im a big fan of protopie these days for interactive prototyping

    • @dejankeleman1918
      @dejankeleman1918 Год назад

      @@JakePomperDesign Thanks I've been looking at them it seems like they are focused on mobile. If you got time, it would be awesome to make an updated list of best tools for UI animations and prototypes in 2023 :)

  • @boyankiuranov5104
    @boyankiuranov5104 Год назад

    if you add custom css you can change the paramaters of the cursor with the .typed-cursor class. font-size: whatever you want

  • @Mantoufe
    @Mantoufe Год назад

    Nice video, very informative. You have a new subscriber!