The 4 ways to leverage UI Animation in your design portfolio to land that high paying tech job
Over the years of teaching UI animation and helping designers and animators integrate motion into their online portfolios, I’ve noticed a major trend: designers do not integrate motion well into their online portfolios, and miss out on this red hot opportunity to distinguish their work and get that high paying tech job.
Click here if you want to learn more about my UI Animation Certification Course
When it comes to the strategic design of your portfolio, it’s important to think not just in terms of the kinds of content you want to feature, but how to best position your portfolio (and process) pieces for the different roles that managers and clients look for when making hiring decisions.
Depending on your skill set and what kind of position or clients you are going after, I recommend you focus either exclusively on one of the below strategies, or a mix that works best for your skills and goals.
🍿Strategy 1: Demonstrate that you can build UI animation
In this strategy, you want to include high quality examples of UI motion.
These could be GIFs or videos or both. You want the motion to be smooth, polished, and professional. It should be eye catching and the visual UI assets should be strong (if you don’t have strong design projects, or asset deliverables, check back on my blog because my next article is on how to create these).
It does not need to contain ‘Disney style’ motion. You are essentially demonstrating that you can take UI/UX/Product design elements and move them around, and do it with skill.
The value on this approach is that you are communicating to hiring managers and clients that you can take their files and return awesome renders.
Example: Aurélien Salomon
In this example, Aurélien demonstrates that he can take product elements and turn them into something polished and desirable. Notice the fit and finish. And that the motion is somewhat component in nature.
If you are an animator and not a designer, and looking to develop a body of work like this, I HIGHLY suggest you find some amazing static designers online and collaborate with them to build out your portfolio.
For this skill level, hiring managers care about the quality of work you can deliver, not your experience, nor whether these projects are ‘real,’ in the sense of them being actual paid client work.
🤔 Strategy 2: Demonstrate that you can think through UI animation in the context of UX
This approach differs from Approach 1 in that you are going deeper into the nature of the UX. You are communicating (via images, renders, and text, and possibly even a video of you on camera) that you either designed the UX and/or UI, and/or you worked with another group of people who did these things.
You need to communicate that you can understand UX and product challenges, and that you used motion to solve these challenges.
This may mean that if you are a motion designer with no UX/product design experience, you have to read a book on UX and take a basic UX class either online or in the real world. It will be worth your time. Don’t go crazy and read like 100 books or take the most expensive class.
A simple affordable class will do.
If you want to go crazy with this and read all the books and take all the classes, I won’t discourage you, except to say that you want to focus on learning the minimum required to get a job, if your main skill is delivering motion.
So your page might contain sketches of your process, maybe data on user testing, or at least a problem/solution framework where you possibly ideate different motion solutions to the stated problem. For this approach, the value is going to be less on the total craftsmanship of your motion, and more how you integrate with the team and deliver results.
Of course, if your motion also happens to be hot, than you’re stoked. As in the case of Strategy 1, you wouldn’t necessarily have ‘Disney style’ motion here. You’d be proving that you can take design assets, create motion wireframes as well as high fidelity mockups using design assets.
You may also want to include how you factor in scalability of your motion, as well as your understanding of motion standards and anything else of relevance that a hiring manager would be looking for.
If you want to learn how to design motion timing for products and build a red hot portfolio, you can check out my new UI Animation Certification Course.
👩🏽🎨 Strategy 3: Demonstrate that you are a professional animator and can deliver high quality animation for digital products
This a wholly different category of motion design than in Strategy 1 or Strategy 2. In this approach, you are demonstrating that you are a highly skilled animator who can deliver high quality, insanely hot motion and do it for products.
Your portfolio should include examples of things like icon animations, product avatars, dynamic onboarding screens, logo’s, sticker, and product relevant characters or avatars.
The goal here is not necessarily to communicate your process, or that you even have a deep understanding of UX. You want your portfolio to communicate that you have the chops, AND (most importantly) you’re not just another motion graphics person. Your portfolio must communicate your understanding that motion design for digital products (apps and websites) is more specific, and involves working with assets designed in Figma, Sketch, and Adobe XD, and that you know how to hand-off to engineers.
So, the strategy here is twofold: to prove your ability to deliver beautiful motion AND to include portfolio pieces that relate to digital products. Not motion graphics screens for video. Or you will be relegated to doing only that on the team, and be ignored most of the time.
The things to (quickly) learn are how import assets made in Figma, Sketch, and Adobe XD, as well as how to export projects using Lottie.
Example: Markus Magnusson from Dropbox Paper
(Check out Markus’s patreon page if you’re interested in his animation process and picking up some tips & tricks.)
If you don’t have this skill and wish to acquire it, I recommend School of Motion. They will teach you how to become a skilled animator. Joey Korenman, the founder and CEO, is awesome, and passionate about delivering results.
🛠 Strategy 4: Demonstrate that you have a technical knowledge of implementing motion and can interface seamlessly between UX Designers and Engineers
This last strategy should be considered an ‘add on’ to strategy 1, 2, or 3. In this case, you want to demonstrate (via images, text, and/or possibly you on camera) a deeper understanding of how to interface seamlessly between UX Designers and Engineers.
You do not need to demonstrate that you can code. If you do know how to code, by all means, feature this in a relevant way that expands on the narrative that you can deliver high quality motion — and see it all the way through to handoff.
While most hiring managers won’t be asking for this, by surfacing this in your portfolio, it will be answering questions they didn’t even know they had, and demonstrate strategic thinking.
What to do if you don’t have this? Spend several days brushing up on Lottie, as well as other prototyping tools that create ‘shippable’ motion.
This could include tools like ProtoPie and Framer. Basically, anything that speaks to your understanding that designing motion is not the end goal. Implementation is.
The end goal is to have motion implemented. You must communicate your basic understanding of this. The key thing here is that every project is different. You’re not expected to know the exact asset handoff protocols for every project or combination of tools.
But you can communicate that you understand how to have these conversations with engineers, and do your own homework, and proactively perform basic research on the platform, prototyping tools, and asset prep. If you can communicate this in your portfolio, hiring managers will be thrilled.
To summarize
When you integrate motion into your portfolio, consider the above 4 strategic frameworks to better help you communicate the value of what you want to focus on in terms of attracting hiring managers and clients. Doing so will communicate to them that you understand the larger context of the project, and differentiate yourself and your work from typical motion designers who have not read this article :)
To join my private FB group, click here, to subscribe to my UI animation tutorials on YouTube, click here. To check out my UI animation courses click here
