Why you need to learn to design microinteractions as a graphic designer

Posted by Dan Luparu on

As a graphic and web designer, often people expect very different things of you. In my career as a freelancer I encountered companies and individuals that expected me to also code their websites so I often felt that I NEED to be able to code as well as conjure up beautiful PSD designs to be successfull as a web designer. That's just part true (but the internet will give you lots of opinions on this topic). 

What I'm going to say next is just my personal opinion and you should just take it as that.

To be honest, it's a really valuable skill to have in 2018 and something I considered really attractive in the last few years. I've been wanting to learn code (at least front-end development) for quite a while now and have been constantly learning to the point where I can comfortably code a website in HTML, CSS and even some Javascript animation.

I absolutely love animations on a website and feel they are a key component of a successful web experience. This is where microinteractions come in. Beautiful, quick animations that help the visitor get instant feedback for their actions, and for me, just a nice feeling that what you clicked actually did something that you can see instantly.

Some of the best microinteractions simply make the experience flow with ease, don't make the design cluttered and are extremely clear in purpose. 

Check out the animation below by UI8

UI8 microinteraction

In the example above, you can always keep track of the action your click does. Clicking on the thumbnail elegantly moves it to the top (so you can follow the movement) and makes the content below change to display content related to the selected work.

There is a lot going on though, but this is due to the fact that they wanted to show the entire searching/liking/buying in a single animation animation. I would advise to cut animation into small chunks each presenting one type of interaction so the eye doesn't have to move all over the place to see what is going on.

When creating micro animations in software like Adobe After Effects (you can get a free trial here), you should aim for at most 10 seconds of video due to the fact that you're mostly going to present your work using GIFs. GIFs are notorious for their large size and most websites where you can present your GIFs have a size limit in place.

Can you do microinteractions and animations without knowing how to code?

Absolutely! In fact, my love for animation practically hit a brick wall during my learning how to code campaign, multiple times. Front-end development is hard! Especially when you have to take into account the hundreds of different resolutions for various devices, google AMP pages, CSS preprocessors and thousands of plugins available for all kinds of things. It can get overwhelming really fast.

But, don't fret! If you're like me and just want to show your clients some cool looking interactions, you can do that without having any development skills whatsoever. 

First, you just have to decide what software you're going to use for your microinteractions. Some great options are:

  • Adobe Photoshop CC - Good old Photoshop can help you build pretty basic (but good looking!) animations using the Timeline. 
  • Invision Studio - This is an amazing tool for designers in general. It's pretty new on the market and it's currently as of today (May 29th) still in beta. You can go to their website and sign up for a FREE key here. Might as well mention that they currently only work on Macs so if you're on Windows (like me), you'd have to wait for a while until the Windows version is ready. But the good news is that they promised the Mac and WIndows versions will be identical! It's also free for life, so give it a shot
  • Adobe After Effects - This is the heavy duty mother of all animation. AE is my go-to tool for impressive and fluid animations for the web. There are no limits to what you can do here, but it's a steep learning curve. Lots of tutorials available out there, the best money can buy (in my opinion) is UX in Motion. The courses are expensive though. But they will definitely pay off very soon. There are also some free tutorials on their website as well if you want to get a taste of what you will be able to do.

Ok so what type of animations can I do?

Anything you can imagine. Don't worry about what developers can implement or not. Just do your thing and always have the user in mind. Don't do things that have no practical use but look "cool". Well maybe do that so you can learn or impress people on sites like dribbble, but you should definitely make a habit of focusing on usability.

Here's an awesome and recent example of microinteractions we did here on Dandya Creative:

pillo animation

Pillo is a nice PSD UI Kit that we're releasing for FREE and also included in the package, is the After Effects project files so you - our viewers - can learn to do these types of animations as well. Get this PSD landing page for free on our shop.

If you have any questions, I'd love to help and reply to the comments below. Let me know if you like these kinds of informative posts and we'll post more.


Leave a comment

Please note, comments must be approved before they are published