Invision Studio: Advanced UI Motion Design | Travel Website Tutorial
HTML-код
- Опубликовано: 12 июл 2020
- **Full Design credit goes to Giulio Cuscito. Check out more of his amazing work here: dribbble.com/Giulio_Cuscito
__________
In this video, I try to emulate some pretty intricate motion design for a travel website in Invision Studio. Hopefully I did this design justice in my attempt and hopefully you found this helpful!
______
UI Animation course survey:
docs.google.com/forms/d/13lCS...
______
Email: jpdesignacademy@gmail.com 
Кино
![Darren Waller - Who Knew (Her Perspective) [Official Video]](http://i.ytimg.com/vi/GytDjB8u6bM/mqdefault.jpg)
Hi all! I hope you enjoyed this tutorial! Here is the project file if you'd like to follow along: www.dropbox.com/s/bwph3zk25sb7z7w/Iceland.studio?dl=0
Martins Olaniyan I appreciate it and I’m glad you found it useful!
you probably dont give a shit but does someone know a way to get back into an Instagram account?
I was stupid lost my login password. I would appreciate any assistance you can offer me.
Thanks for the video! It's super-helping and useful!
Would it be possible to use all these functions in Freehand? Another thing, would you be able to use the .studio extension in Freehand?
Thank you for this video. Very insightful and great work.
Sure thing, thanks for you kind words!
Very good tutorial thank you
You’re welcome, thanks for watching!
Hi JP, thanks for the tutorial! I wonder if you can make a video about UI animation in a responsive setting. How would you approach the animation design so that it looks coherent on desktops and mobile devices?
Sometimes I find applying the same animations on mobile devices too much for the user.
Good idea! I’ll add this to the queue!
JP Design Academy so much looking forward to it!
super helpful! thaks!
Glad you found it helpful!
This was a really great and informative look into dissecting an animation, which I personally found very helpful as a super beginner wanting to learn more user experience animation. Do you prefer Invision Studio's workflow or Principle?
Thank you! I honestly I use both very often in my workflow, it just depends on the scenario
Is there a workflow to import Figma or XD, layout design into InVision studio? I am new to the studio and learning through your videos. It appears that the studio only accepts sketch files? Thanks and keep up the great work! You have an awesome talent for teaching, and even better tone of voice :)
Thank you so much for your kind words! So far Studio only can import sketch files as you said. But if you want to animate your figma or xd files in studio, you can export the layers as pngs and bring them into Studio. I know it’s a bit tedious, but this is typically what I do since figma is my main UI design tool.
Hope this helps and good luck!
Jake
Thank you for showing your process for this prototype. Question for you. Why do you prefer to use Studio over XD and Figma? I found studio a little slower. Thank you in advance keep up the awesome work!
Hi there - thanks for your question! I still prefer Figma for static UI designs but the prototyping abilities/motion controls are limited. Same with XD. Because of this, I usually design in Figma and then animate in either Studio or Principle
How can I record my prototype in InvisionStudio if I have Windows? The quiality is so poor :c
Hmm I’m not sure because I don’t use windows...but on Mac o use QuickTime to screen record. I’m sure there is a PC equivalent
Awesome stuff! One question, does anybody know is it possible to recreate and produce this using webflow? Thank you
Thank you! Yes, this is definitely possible to build in webflow
@@JakePomperDesign thank you for your reply! I don't do code, and just started using webflow. It's awesome if I could build a portfolio with animations like this, I'm a branding designer.
Keep up great work, I'm definitely subscribed and looking forward for your next clips! :)
Have you tried ProtoPie for animation, and have you completely moved to Figma and away from Sketch? I'm impressed to see someone using Invision Studio finally, my impression has been that it hasn't fully taken root yet and I was wondering when or if it will be ready to replace Sketch/Figma for prototyping and become a one-stop tool, but I understand for now this was just for animation.
It’s funny you ask, I’m working on some new protopie tutorials - really enjoying it and is very capable, although the workflow is quite different and has taken some getting used to.
And generally yes, I use Figma for UI design although I’ll occasionally jump into sketch depending on my client and their preference.
Thanks for your question!
Jake
@@JakePomperDesign Thanks for the feedback!
AndyMcIntire no prob! And I see you updated your question. I think Studio still has a ways to go if it wants to compete as an all-in-one tool. Most design teams are already established on sketch/figma, as these seem to be the the most complete when it comes to building design systems, plus figma has collaboration abilities (sketch apparently is getting this soon).
Not sure if Studio is trying to be the all in one replacement though. Personally I think they should just double down on the motion side of things, but integrate with figma seamlessly. I still find animating in studio the most intuitive vs some of these others but they are missing some things like blur effects and video import (which can get annoying). Im hoping they fix this soon!
@@JakePomperDesign Great additional feedback, really appreciate your response.
AndyMcIntire happy to help!
8:12 AMEN!
Hi, How do you deliver you UI design to clients?
I usually design and prototype everything in Figma. If I need to showcase a really detailed interaction or animation, I will prototype in principle, Invision Studio, or after effects/Lottie.
Sir please start a full course on invision and principle
Coming soon!
@@JakePomperDesign
Thank you
What software is this?
Invision Studio
@@JakePomperDesign Can any other software achieve this effect?
Thank you so much for every tutorial! They are every time getting better. I really admire your skills, and would like to keep learning from you! Would you mind if you have any time or chance to make a video about how to make some kind of carousel animation, very similar to this amazing animation from Avengers character selector? dribbble.com/shots/12085437-Avengers-character-selector I would would really appreciate it! 🙏🏻
Or even this one too Guitar list carousel dribbble.com/shots/12816714-Guitar-list-carousel
So, warm tone is luxury?
Interesting...
Not necessarily