(Part 2) InVision Studio: Advanced Motion Design - Player Stats Dashboard!
HTML-код
- Опубликовано: 12 июн 2024
- Project File: bit.ly/2LJPv3o
Subscribe for more Studio tutorials!
In this video, I share part two of my player stats dashboard tutorial. I share some more advanced motion design tips, and show how a user would interact with this type of interface. Drop a thumbs up if you found this tutorial helpful, it would mean a lot :)
Email: jpdesignacademy@gmail.com 
Кино
Great tut. I hope we will see more. Thank you!
Grzegorz thanks!!! You will 😁
Thats tut is really helpful. Thanks a lot!
Glad you found it helpful, thanks for watching!
Amazing!
great tutorial
gabriel freitez thank you 🙏
Awesome video! How do you create the toggle with the numbers in the players stats?
cool stuff
🙏 thank you
Great tutorials, glad I found your channel, this question has nothing to do with this tutorial, I am learning ui/ux design I already use sketch and I was thinking start learning principle buy do you think is possible to make the same principle effects using invision studio, because is like using sketch and principle in one single app.
Ismar didiel hey there, good question! Both are great tools, and in my workflow they both serve their own purposes.
I tend to use Principle when prototyping some more intricate, micro interactions that happen on one or a few screens. I particularly use Principle to prototype scroll/drag based interactions...Studio has not really nailed these yet. In my opinion. Sketch + Principle (and Flinto) is still my go-to tool set for most projects, but studio seems to keep getting better, and I like how everything is in one place, plus you can upload to Invision and share interactive prototypes with clients/get feedback easily.
One drawback of studio is that you need to create a whole new screen for every single interaction (even something simple like a hover state) which gets kinda annoying...I think Principle handles these interactions more intuitively.
Hope this helps...I could go on and on about this...a video on this topic is long overdue! Coming soon lol.
Jake
Hey, this looks really cool! Now I'm wondering how would you make it responsive and fit well with the mobile mirror app?
Good question! Would have to stack elements vertically on mobile most likely...although this was more of a visual exploration and a way to illustrate some motion concepts, rather than trying to create fully responsive app 😉
Hey JP, thanks for the great tutorials, I love them! Can you post the project files for this tutorial as well?
Hey, thank you! Glad you're enjoying them - currently on a little vacation and the project file is on my other laptop, but will post it as soon as I'm back! For the time being, you can access the project file in the description of part 1 of this tutorial!
Best,
Jake
Thanks!
Hey just checking if you had a chance to upload those additional files for the part two of this tutorial? Thanks again, loving the videos, very insightful!@@JakePomperDesign
@@quintah Hey thanks for the reminder - I just added the project file to the description of the video!
Cheers!
Jake
I just wanna say you are extremely talented and this is dope....If you were doing this in a professional environment would you create an animation for every player selection or would you simply just let the developer know you'd like every player selection to animate in the same way
I appreciate the kind words! There would be no need to animate every single interaction. Since it’s a prototype, I would only animate just enough to get the point across to a developer
can i ask why your invision looks a bit lag while preview the result?
amazin post . got a question friend , since i dont have sketch , and i use XD , therefore i cant import my design in invision , wanted to know can i do the whole design in invision? is it complete in the matter of tools and stuff? and did you do this design all in invision?
Yep you could either design the whole thing in Studio or you could design in sketch or XD export as pngs and animate in Studio. In the above example I designed everything in Studio. Studio is missing things like blur effects but overall it’s a pretty complete design tool.
Thanks for your question!
Jake
Hey mate, just a quick question: I'm new to Invision Studio so I've essentially just been redesigning your exact same design here but for football (soccer) player stats. When I move from player 1 to player 2, there is a brief transition happening where the screen seems to fade into white before moving to the next screen. However, when moving back from player 2 to player 1, the transition is smooth with everything moving fine.
Do you know what could be the issue and how to fix this?
Nicolas Chimonides interesting, are the background colors gradients or solid colors? I remember I experienced the same issue when they were gradients but when I made them solid colors it was all good. Let me know?
Thanks for the question!
Jake
@@JakePomperDesign yep it was a gradient, I found changing to solid colours works but thanks anyway! A new I have encountered though with the transitions between player 1 and 2: moving from player 1 to player 2 motion tranditions the entire screen in 1 move, overriding the separate timings I set for each component. However, moving from player 2 to player 1 holds all my rules set. Not sure what the problem is here
Nicolas Chimonides thats weird, but that has also happened to me before. First try quitting studio and reopening it, otherwise you may just need to redo the transition. It’s an annoying bug that happens from time to time. Hope this helps!