(Part 1) InVision Studio: Advanced Motion Design - Player Stats Dashboard!
HTML-код
- Опубликовано: 5 июн 2024
- Part 2: • (Part 2) InVision Stud...
Email: jpdesignacademy@gmail.com
Please take a moment to fill out the UI/Motion Design Survey for Course dropping later this year, Id really appreciate it!!!
Survey: forms.gle/xqhcUAT9snfHsM5f6
Subscribe for weekly product design tutorials!
I've been feeling super inspired by baseball season, so I came up with this concept for viewing a player's stats. I demonstrate some motion techniques that you can use to bring your designs to life inside of Studio!
Project File: bit.ly/2IGcbQt 
Кино
Digging your approach to presenting. Finally we're seeing people talk normally in tutorials. Will be back.
cal thank you! Welcome aboard!
definitely second this comment. your videos are very approachable, super super easy to understand and listen to. would love to see more studio+principle tutorials from you!
JustLovely821 just seeing this now! Thank you, I’m glad you like the videos! Ive been slammed with freelance work of late but I have some exciting stuff in store I promise!
Jake
Powerful and intuitive, cool stuff
Thank you!
Looks great! Thanks for this.
Jacobo Castañeda thank you! And thanks for watching ☺️
this is amazing bro!
Thanks brother, and thanks for watching!
Fantastic tutorial dude.
Thank you and thanks for watching!
siiiiick! thanks a lot!!! more more this kind of tutorials please! ;-)
Many more on the way 🤟
Great tutorial and well.. showing the idea and possibilities :) One thing concerns me in a production app/website of this sort. You would have to have all the players, pictures of them made in a similar fashion or by one studio just for this purpose. I think that it would be pretty hard if not impossible. But great concept.
Great stuff dude
DemonikJD thank you brother 🙏
Awesome tutorial, thx for this!!! And I have a question.... can these numbers be linked to a source (such as MLB, or Baseball Reference) to have the latest numbers?
Hey man, I really liked this video. That's a great design too.
Thanks man! Glad you enjoyed
Awesome. I would love more vids :)
More on the way!
i barely dowloaded invision studio and this looks so cool .. im a webdesign student and they dont teach us anything like that its very frustrating .. anyway i love this !
Thank you! Welcome to the channel 😀
"they dont teach us anything like that its very frustrating" I FUCKING KNOW RIGHT!!!!
Hahaha I feel your guys' pain!!! Learning by doing is the motto!!!
Great tut. I just can't 100% leave sketch! Inv Studio is great for micro interactions / polishing :)
Haha agreed, Sketch is still my go-to but I’m having a ton of fun in Studio at the moment. Thanks for watching 😊
Awesome vid! Please make more invision studio motion tutorials hehe
More on the way!!!
Thanks a lot for these videos! Even the videos from the InVision team are not as helpful since they left them pretty short and basic. In every area of knowledge videos like yours are needed by beginners to ramp up on that initial learning curve. Much appreciated!
Fabian Marin happy to help man and glad you find my tutorials useful!
This video was very helpful
Glad to hear it!
I’ll love for you to be my mentor 🤙
Awesome tutorial. You've got a new subscriber. I always like how great designers know how to pick their images. Wondering where did you find such a good quality image of the player for a concept project. And generally, how to you find quality images for your concept/personal projects? Thank you!
Thanks for the sub! Good question! Usually, I'll create some sort of moodboard for some inspiration/visual direction. I really like Pinterest for this, helps me get a sense of how other designers handle similar UI's and helps guide my image selection...although in this particular example, I'm pretty sure I just used Google images, then enhanced in Adobe Lightroom/Photoshop before bringing over to Studio.
A great resource for free, high quality stock photos is pexels.com - highly recommend checking that out as well - I use it all the time!
Perhaps I'll make a video on this topic....good idea!
Thanks again and welcome aboard!
Best,
Jake
@@JakePomperDesign thank you very much for your answer, it was very helpful! I'd love to see a video on this topic.
Super sleek design, man. Great work.
What font did you use?
Kola OJoodide thanks man! I used Avenir
Great design and work
Thank you!
@@JakePomperDesign Would you happen to know how I can trigger my animation when the page is changed in any way? For instance the people I send the prototype too often use the directional keys to move between pages without clicking anything on the page. Do you know how I may do this or if it is even possible?
Frank Douglas so when you use the arrow keys on your keyboard to navigate, it will bypass the animation by default, but you could sort of hack this by creating an addition “dummy”screen with the “initial state” of the animation, and add a timeout transition to the next screen.
So for example...
User lands on a screen, taps right arrow key on keyboard to navigate to a dummy screen, that screen will automatically timeout and animate to the next screen.
Hopefully this makes sense?
Thanks for the question!
Jake
@@JakePomperDesign I really appreciate that Jake. My only issue is that my bosses are not very tech savvy and I can see them pressing the left arrow to navigate and that will basically reload the same page when they do that. Theres no way around that right?
Thanks man, Good looking design and colors and so helpful Tutorial.
could u pls make a tutorial video about "how to convince people that this new design was so much better than that gridlines with many numbers?!!"
Thanks Mahdi! This would be a tough thing to sell...this was more of a visual and motion exploration. I would need to define a lot more than this in order to convince a stakeholder that this solution is better than the standard table view.
Thanks for watching!
Hey ! Amazing job here. Thank you for sharing :thumbup: ;)
Thank you for you kind words 😊
Hi, your tutorials are very helpful. I'm interesed in how do you get that beautiful dark blue color in the background?
Thank you! It’s just a subtle radial gradient
@@JakePomperDesign Thanks bro. Keep rockin ✌
Great
But how i export the animation to upload and share in portfolio website like dribbble/behance?
Thanks
you can use quicktime to record your screen and then convert to gif in photoshop. I'm assuming studio will add a way to do this natively soon
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
Is there a way to export animations into a gif or video file?
Hey there! If you have the most recent Studio update, you can use the GifStock plugin in the Studio app store to do this.
Thanks! I'll check that out. @@JakePomperDesign
Hey everyone! I hope you all enjoyed this tutorial. Here is the project file if you'd like to follow along. bit.ly/2IGcbQt
What are your thoughts about InVision Studio? What kind of videos would you like to see in the future? I'd love to hear your feedback!
Happy designing!
Jake
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
Aggressive easing... lol
David Fitcher oxymoron!!!