over 5 years ago from Anmol Bahl, UX Designer - Feminist | Say hi@anmolbahl.com
I am a highly confused UX Designer who wants to get into prototyping. I see unbelievable prototyping shots on Dribbble and I feel like I am lagging behind. Can anyone in this matter provide some guidance to me?
Learn Flinto or Principle and Framer for work, After Effects for fun.
I'm torn between Flinto and Principle. What do you recommend? People always say things like "lots of screens flinto, micro interactions flinto...." but is that true? Should we use both in our workflow?
Both. Principle is for micro interaction. Flinto is for flows (but can do some Micro interaction stuff). Neither of these products is difficult to learn.
+1 on giving Flinto and Principle a go. They’re both good for different reasons.
I've picked with Principle but it was a personal choice. As an dinasasour designer I used to work on Flas-ahem-Adobe Animate back then. So it was much easier to grasp the timeline stuff on principle. Not saying that flinto is bad. Like Both Aaron and Marc said, I've tried both and Principle worked out for me.
Also I heard that principle's head dev was an ex-dev from quartz composer team. Not sure if it's true but still it's a good sign.
Oh, I'd always wanted to get my hands dirty with quartz composer but I just can't deal with spaghettis all over my monitor.
If you're investing for the long term I think something like framer would be well worth it. You will be closer to the code and understanding how to work closely with developers to get your actual design implemented. Most designers wouldn't go this route which will get you further ahead as more things in design get commoditized, like this for example https://www.producthunt.com/posts/artboard-studio. I think getting your skills closer to the end product will be the most beneficial in the long run. An added bonus is that your next step naturally would be building real prototypes that actually work because you invested in the core skills that are needed.
I really like your point Joe. This is precisely why I have taken about 5 months of creative break to learn new stuff. Most job openings keep asking for HTML/CSS as well. Very confusing. So you do suggest learning Framer, is it? I believe in the long term and prototyping that's actual prototype.
That's great to hear. I've found each time I step away from work I learn a lot has changed in our world, great opportunity to learn new things. HTML/CSS will become the standard if it already isn't when it comes to a UI/UX product designer, check out Buzzfeed's design interview questions for example. https://github.com/buzzfeed/design/blob/master/recruiting/interview-questions.md. I recommend html/css too but wouldn't want you to get overwhelmed as you already have a lot to think through already. Also html/css prototyping requires a lot of patience and code knowledge at first due to sequencing and such.
I think Framer will hands down be the fastest way you're able to prototype those dribbble animations. It will also give you quick wins, where you could literally prototype something today whereas HTML/CSS will take you much more time. After you get comfortable in Framer, do HTML/CSS for sure.
Joe, thanks for your support, because of your response I do have some clarity now. I will begin learning Framer.
Also,
Let's connect on Twitter or Dribbble - @elusiveanmol
sounds good, look forward to seeing your progress!
Prototyping should be used for answering questions. The type of prototype you build should be based on the question you're trying to answer.
Bigger questions like "how should this flow work?" should be answered with lower fidelity prototypes. InVision, Marvel, and the tools built directly into Sketch and XD are great examples.
Smaller questions like "how should this transition look?" will need higher fidelity tools. Flinto is my favorite for this type of work because it's so fast, but Principle, Framer, Origami, and InVision Studio (when it's ready for release) will all work too.
After Effects is great for making sizzle reels and showing off, but it's not so helpful for answering interaction design questions.
I agree totally on these points and I shall try Flinto out. I kind of feel so noob compared to Dribbble animations shots that other designers post. Makes me feel like an intern.
As I mentioned in my other reply, you really shouldn't be looking at Dribbble as anything but a playground where people with far too much free time show off. Real work isn't generally posted to Dribbble, at least not until after the fact, and it's certainly not as flashy once implemented.
IMO, I think you should prototype in tools that are closer to what the final output would be, and for that I think that a prototyping tool like Flinto fits the bill.
My hesitation with After Effects is that having no limits in what you can do encourages designers to build motion comps that would be very difficult to produce with heavy performance costs to implement, a good example of this being motion blur, which is generally impossible with basic layout technologies like CSS, or UI Views, and to create requires manually calculating and rendering a motion blur in Canvas, or with animation specific toolkits on native devices.
I think that divorcing the animations and transitions from actual interactions encourages designers to build beautiful, slow interfaces. Things like pressing a button and waiting a few seconds for a very nice looking, cumbersome animation to complete. I think that designers are less likely to engage in these indulgences if they have to endure them a couple of times when actually using their prototypes rather than just envisioning the interaction through video.
It's a constantly changing landscape. New tools are coming out every day. Most have free trials, give a bunch a try and see which one works best for you. If you haven't used AfterEffects before, the learning curve is quite steeper than something like flinto or even invision studio. If you're a sketch user, there is a handful of plugins that came out recently to prototype within invision.
Apples and oranges really.
After Effects is for non-interactive animation and composition.
Flinto et. al. is for creating interactive prototypes.
Learn the one that aligns with your goal, what do you want to achieve?
I'm always surprised in these threads when no-one mentions Origami (origami.design).
The learning curve is quite steep, but persevere and you will reap the benefits of a hugely versatile tool.
The team at Facebook are doing a fantastic job of taking this forward and continue to provide easy to use, pre-built components for standard elements in iOS & Android. Plenty of examples/documentation and a very helpful community on Facebook too.
Unlike AE you can create tangible, on-device prototypes that you can use in your hands, and there's a lot to be said for that as opposed to staging things on a timeline.
If you want fine-grained control over all aspects of your prototype (and you do, don't you?), either Origami or Framer are your best bets, IMHO.
I've tried Framer several times in the past but I suck at Javascript and end up being buried in code I don't really understand. I find Origami's approach through a visual logic language refreshing, easier to parse (as a visual thinker) and really satisfying to use.
All the same, I agree with many here that AE is hugely powerful and you can't go too far wrong learning it. (except that you may be forced to use the rest of Adobe Creative Suite too.. ouch).
Edit: it's also FREE!
Wow, didn't think of that. Will definitely try it out.
Adding to that: even Principle lets you have on-device, tangible prototypes.
Agree 100%.
Atomic.io is pretty awesome too.
However, if I were you, I'd bet on Invision Studio.
After Effects is the most powerful, but it's not real.
Atomic.io is free for individuals. I would recommend it to anyone who wants logic in their prototype but doesn't have time for Framer.
What kind of prototyping do you want to do? It sounds like you are talking about animated and / or interactive prototypes that look pretty or maybe just making videos.
I am interested in prototyping shots that we see in Dribbble.
Some references - https://dribbble.com/shots/4336478-Financial-2 | https://dribbble.com/shots/4218185-Cloud-Mining-UI-Interaction
Flinto is good if you want to build an interactive prototype with touch controls that you put on a phone or tablet and demo to someone. After Effects is a tool you use to make videos. If you want to make cool looking animated clips to post on the internet, I would recommend After Effects as well. I only used Flinto for a trial, but based on that experience I think After Effects is a much more robust animation tool. I use After Effects at my job to create videos like the links you posted.
I have mixed feelings about this kind of work. On one hand, it's a cool transition, but actually building something like this would be incredibly difficult from a UI engineering perspective, so I wouldn't do it for a "real" product. I suppose though that these kind of things are OK for showing off in dribbbbble.
hard same. fun to make those videos, but not practical as someone building interfaces for production. who knows tho, doing that intense animated stuff may get easier in the future. got to dream it first.
Amen brotha
As others have said, this is a problem with Dribbble in general. I'd say 90% of this flashy animated interaction work is simply to get up-votes/jobs on Dribble and nothing more (it's very hard to find anything that looks like what you posted and is actually live on an app store or the web). Most teams and especially clients are not actually implementing anything to that degree as that would be extremely difficult to do without having a super slow/clunky app, and forget mobile web.
It creates unrealistic expectations for anyone new to this kind of work. Motion certainly has a place in design but many of these Dribbble shots take it to an extreme for the sake of doing something pretty.
This has always been a problem with Dribbble and isn't unique to motion design.
I wouldn't bother with AE. Stick to tools like Flinto/Principle/Framer which are going to give you realistic results and don't have a massive learning curve. AE certainly has its place, but it's not for interaction design.
What is the purpose behind prototyping for you? Clients? Day job? Fun? Ultimately your job is to solve problems, not create flashy interactions because they look cool or it's trendy.
Thank you!
Thank you for clearing this up for me. This really helps. I have been feeling demotivated because of Dribbble and the unreal expectations it often sets.
After reading all the comments last night, I made a rough prototype in Flinto. Seems like this tool is the one I should learn and stick to.
Here is what I hacked this morning: https://dribbble.com/shots/4515242-Education-Levels
nice work! looks like you've been having some fun. :)
maaaaaybe it's not always for the likes, it's fun to make flashy unrealistic animated UIs :))) I stick to practical stuff for work, but as an artist on my free time I love to make things that could possibly never exist in reality. its funnnnnnnnnnnn
I definitely agree it's great for fun!
The problem is many designers don't seem to realize what is meant for fun and what is realistic. It creates problems for everyone involved. Clients, teams, designers, bosses, etc. I can't count the number of times a client has started with us and all of their examples of what they love are crazy Dribbble designs with no basis in reality.
Sounds like vision work, no?
But it's mostly just to show people the way you would like something to behavior because there is no perfect workflow to handoff this to devs and your animation will stay in the 'I wish' area
THIS! So easy and intuitive.
I would bypass After Effects and add Motion 5 to the list (if your on a Mac). Not so steep a learning curve as After Effects. Both lack interactivity, however. I like Tumult Hype (Mac only).
Step one, learn animation principles in After Effects. Step 2, prototype animated interactions in something else that is designed for UI/UX work. Don't skip step one though. Learning animation principles is vital to designing and building good interactions for UIs.
This!
I am tired of animations used in prototypes just for it to look cool. Principles are very import for a reason, with a lack of understanding the point of Easing, you can totally alienate others with random animation.
Principle is what you want to learn. Especially if you use Sketch. It's very easy and powerful... simple and timeline based. Helps show desired animation to Engineers. AE is also great for macro animations with the export to Lottie. Your Engineers won't have to recreate the UI motion. And Flinto or InVision's basic tool is fine for a quick usability test without any fancy UI motion/transition/animation.
maybe design flow is good for you? https://webflow.com/
Instead of learning how to prototype interactions in AE or other apps to get more views on dribbble, why wouldn't you consider learning how to code these interactions and make "real" work that can be put in production?
What would you suggest? I have taken about4-5months of creative break to learn new stuff? Do you suggest learning Framer? I was also thinking of HTML/CSS since a lot of job openings mention that. So confused.
After effects is a visual effects application, it’s technically not designed to create prototypes but it is an incredible animation application.
I would use Framer or Sketch.
I was super confused about this also!!
Most of what you see on Dribbble is built with AE, and I really think you should develop the skill of prototyping with AE. There are countless prototyping tools out there, but using AE gives you almost unlimited creative freedom. I doubt you'd ever regret spending the time on it, and it'd give you a really big boost to your prototyping skills.
Also, I know of a few Dribbble shots that were literally screen recordings of "coded" prototypes.
Here's a prototype I made with AE. Its not the most amazing, but I had freedom than most "prototyping" tools wouldn't allow.
Thanks Liam! Really helpful comment. I am taking a break for about 4-5 months and I am torn whether to learn prototyping or HTML/CSS :D. UXinmotion.net sounds really appealing but as one another commenter said, maybe Framer might benefit in the long run. That means learning to code from scratch. Sigh.
After Effects has certainly place in the workflow but not in prototyping.
Reach it when you want to create and explore rich animations and interactions. There is no more advanced tool right now.
All good comments there, I just like to add that the latest Principle was in early 2017. Flinto is still supported. I've ran into situation where some Principle files wouldn't open. So I'd focus on Flinto.
Origami, Flinto and Principle are not dealing with mobile RESPONSIVE web design. Framer does. On the other hand Framer, despite being easy on the eye has a much steeper learning curve, not to mention Origami. After Effects as well.
Each tool has it’s pros and cons and there’s no silver bullet.
Origami CAN do response web design. You just need to setup it up appropriately.
You are right, after rechecking it I see now it is possible. However, it’s a steep learning curve and the responsivity is still focused more around devices rather than the browsers (I do code and I can prototype all of this much faster in HTML/CSS/JS with the code quality ready for publish).
Would you be so kind to share some examples of responsive web design made with Origami? And the ways how the prototype is exported to HTML page? Perhaps I’ve missed that as well.
HTML/SCSS/CSS/Jquery As a UX/UI designer, teaching myself to code was the best thing I ever did for my career. It's also not as scary as it looks. It only gets tricky when you start learning raw javascript.
any practical guides or resources you recommend?
I learnt by just re-doing my own portfolio website over and over. I kept building it, then learning new skills and that gave me the urge to redo it better each time. So, for the most part, I just used my basic CSS and HTML skills learnt in a short module within my graphic design course at Uni and built on them with https://stackoverflow.com/ (although people on there can be a little ruthless to beginners.)
I have heard https://www.codecademy.com/is one of the best places to really start from the beginning. Well structured, bite-sized lessons. Once you get past the frustrating bit and are able to create basic websites you will really start to enjoy it :)
good luck.
Two things to contribute: 1. I've just begun learning AE and I can see why some people recommend it. True, the learning curve is steep, but once you get the basics, it's very powerful for what it's designed for. I followed the tutorials from this guy to get me started which were very very helpful (and expensive). https://uxinmotion.net/ 2. No one seems to have mentioned that the team at Airbnb has made it possible to export AE animations so that they can be used on the web and in mobile apps. Check out https://airbnb.design/lottie/ and https://www.lottiefiles.com/
As others have said, the answer depends on your goal (and is still evolving).
If you are hoping to make a complicated sequence easy for devs to implement then I would say After Effects ONLY because of Lottie. It is the easiest way for devs to implement what you create.
If it is a more simple series of animations (and just for noodling) I prefer Principle. It is fast and lets you experiment with ideas quickly without investing much time (and devs can figure it out by looking at the animations and values from the timeline... it's just more nuanced and time-consuming and doesn't always end with a similar result).
After Effects is more versatile and will still exist as a piece of software in 10 years time. Although it's not really prototyping is it if you can't interact with the thing....
another brilliant idea! why don't' you start to learn code? it's never going to grow old like softwares and also you won't be stuck with just being 'another uxx designer'
also you'll be person who actually delivers/understands real stuff in teams. Even I always avoid being a 'lead something buzzword designer' in teams, I find myself in a position where those other ppl were waiting for me to tell them what to do next. And tbh, I just understand html/css.
anyway, it'll be a lifetime thing instead of flinto principle hype. After effects on the other hand, it's like coding. in the morning you can proto and in your bedroom you can be the next cyriak
I would recommend to learn After Effects. Think about that: If you learn After Effects you can do way more than prototypes. If you learn AE you will learn principles of Motion Design and how Animation Tools work. They are quite similar all together. If you learn Flinto only you can just do Prototypes. If you learn After Effects you can do Logo Animations, Marketing Videos, or even create JSON Files which will run in Lottie on iOS or Android.
I primarily prototype using html/css/jquery. If you want to learn my prototyping process, check out my online course on this! :)
Check out uxtools.co/tools and don't feel bad about Dribble or Behance works. Like 80 per cent of them are imaginary, not even usable concepts without good chance of living their own life in the e-services world. Do your thing, do it the best you can, learn, practice, do stuff and it will just come. Cheers.
AE may be more difficult to learn at first, but once you build your workflow around it, it can become very versatile. You can also use it for more than prototyping.
I've also used Keynote in a pinch for prototyping, and while it's not the most versatile, if you get creative within it's limitations, you can make very convincing mock-ups that can be exported all the way up to an uncompressed 4K video format. I think it all depends on your budget and time constraints.
Like other people here are saying, After Effects is great for quickly visualizing transitions/animations – especially very complex ones – at it's core the software is for visual effects/motion graphics. It might be good for getting ideas out that aren't out-of-the-box ui patterns. It's super powerful and worth learning if you have the time and interest.
BUT if your goal of prototyping is to have something interactive or something you can user test, then you should focus on something like Flinto, Principle, Proto.io, ect.
It really depends on what you want to accomplish, they're completely different tools. After Effects is going to have a higher learning curve, but you have almost no limitations in what it can achieve once you've learned it. Framer and Principle are great for interactive mockups and quickly displaying state changes.
Post some links to Dribbble shots you would want to emulate and I'll let you know which one would be right for you.
https://dribbble.com/glebich/projects/485474-Artificial-Intelligence If you're trying to do anything this crazy, you'll need After Effects and possibly C4D.
It wouldn't hurt to learn both...
But if you had to choose one of the other, I would say focus upon a powerful, yet straightforward option such as Principle or Flinto.
They are purpose made for interaction design, so you can actually try the concept with your device. That's much quicker and stronger means of validating your idea than watching a pre-set timeline animation.
However, AE has much greater power and control for pushing boundaries of interaction design... think dribbble shots... you can also export to Lottie, which is relatively easy for the dev to integrate to delight users with animation in your app.
So that's why I say both... but with a 60/40 sway towards Principle & Flinto :)
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now