Animate Your Portfolio with Sketch & Flow

Learn the best ways to use motion to help sell your work and step-up your portfolio.

There is a dilemma that’s plagued creatives since the dawn of time: hit your client deadlines or update your portfolio? Well, as they say “Money talks.” and, unfortunately, it rarely advocates in favour of your portfolio. So, the better things are going, the more ashamed we tend to be of our out-of-date portfolios showing old work we can barely even look at anymore.

Moving UI is brought to you by Flow: Animate Sketch designs in seconds and generate production-ready code.
“The biggest myth ever perpetuated in the design field is that good design sells itself. (The second is that Copperplate is a legitimate typeface.) Design can’t speak for itself any more than a tamale can take off its own husk. You’re presenting a solution to a business problem, and you’re presenting it as an advocate for the end users. The client needs to know that you’ve studied the problem, understood its complexities, and that you’re working from that understanding.”
Mike Monteiro, Design Is A Job

( If you don’t know Mike, you should and this is an appropriate introduction.)

There you have it. You heard it straight from the bearded horse’s mouth: the sheer brilliance of your work alone, will not get you anywhere.

This may be tragic news to some of you, but I assure you, it’s true. So what does this mean?

Unfortunately: you must be your very own hype (wo)man.

This means you must be just as good at selling and justifying your work, as you are at producing it.

It doesn’t matter if you’re presenting to your boss, pitching a client or winning funding for your startup:

If you can’t sell it, it doesn’t exist.

You have to sell your work and provide context for your design decisions at every touch-point possible. This, of course, includes your portfolio and animation is a great tool to provide context and bring designs to life in your absence.

We’ll look at 5 ways to do this and hook you up with some free resources to help you start injecting motion into your portfolio quickly and easily.


Grab 3 free portfolio animation templates here.

Scrolling AKA The *Least* You Can Do

Yes, we know: you’re busy and your portfolio is in shambles. This is a sign of success! Ain’t nobody got time to update their dribbble account when paying work demands your attention. To make things worse, I’d wager many of the older works in your portfolio don’t have animations and sexy transitions. That doesn’t mean you can’t embrace your animated future.

You can quickly breath some new life into even old static designs through the magic of ✨scrolling✨.

That’s right, just take your crummy old static design and… make it scroll. Simple, but effective.

Granted, it’s not insanely exciting but it is insanely easy to do and looks pretty good considering the trivial effort involved. To make it even easier, we’ve prepared 3 free templates and a tutorial to help you start incorporating some motion into your portfolio today.

Some scrolling goodness to get you warmed up:

by Daria Khimych
by Cuberto
by Tran Mau Tri Tam

User Flows

If you have the time to produce them, there is no better way to showcase your designs than animated User Flows. Instead of just showing interfaces, this allows you to demonstrate the problem you are solving or behaviour/feature you are enabling. This is an important shift in the way you present your work.

Instead of just a “Music Player” your comp becomes “Adding a track to a playlist”. Instead of a “Search Screen” it’s now “Multi-search by categories”.

Instead of arbitrary “walk-throughs” that take you on a transition-filled, sweeping journey through all of the magical screens of your app, try to structure the narrative of your animations around focused User Flows that solve specific problems for your users. This allows you to demonstrate a level of design thinking, fidelity and nuance that is impossible to reach with static images.

by Cuberto
by Vitaly Rubtsov
by Aurélien Salomon
by Aurélien Salomon

Focus

When watching User Flow animations, it can be hard to take it all in. Your eyes are naturally drawn to the largest, most dynamic, movements on screen, so it can be easy to miss thoughtful details and transitions in peripheral areas like navigation, status indicators, dialogues, etc.

Break these little microinteractions out into their own animations to cut down visual noise and allow these details to shine through. Dole out your brilliance in little bite size pieces to help showcase your attention to detail.

As with the User Flow animations, the more you can incorporate mini-narratives into your animation the better.

by Aurélien Salomon ➔ for Orizon
by Cuberto
by Outcrowd
by Jakub Antalík

Transitions

We need transitions because snapping between screens like this is jarring and inhumane:

by Kwok Yin Mak

A potentially lovely interface is suddenly hobbled: How do these different flashing screens connect to each other? What user flow is being demonstrated? What does this even do?

Compare that to this animated comp:

by George Kvasnikov

Granted, the comparison isn’t entirely fair because the example above is a full blown User Flow. You get the idea, though. Even if you are just presenting some static website comps, you can still keep things interesting by creating some slick transitions between your screens.

by 𝔅𝔢𝔰𝔱𝔖𝔢𝔯𝔳𝔢𝔡𝔅𝔬𝔩𝔡 for green chameleon
by Zhenya Rynzhuk for Sochnik

Visual Accents

If you’ve stepped foot inside Dribbble in the last few years you’ll have seen a lot of this. Visual accents outside of your actual comp can help make otherwise static designs feel a lot more engaging.

Here is a great example of a way to present light & dark modes of an app:

by Tom Svorobovich

Another subtle, but effective, way to accent your designs is with color. In the example below, Mr. Salomon is shifting the background color gradient to complement the dominant color on each of the screens being shown:

by Aurélien Salomon

As always, you can have too much of a good thing. Be careful that your accents don’t start distracting from the actual work you are presenting:

by Voicu Apostol for Orizon

So, a gentle reminder:

Don’t Overdo It

by Aurélien Salomon ➔ for Orizon

Make Your Own

Today’s your lucky day. We’ve put together 3 free animation templates of the scrolling variety, just for you.

In the 5-minute tutorial below, we’ll show you how to easily customize them with your own design assets so you can start incorporating motion into your portfolio today.

Step 1

Don’t worry, there’s only 6 steps! We’ll be editing our templates with an animation tool called Flow. Start by downloading and installing a free, fully functional, trial version here. You’ll have 14 non-consecutive days to use it for free… but this tutorial won’t take more than 5 minutes.

Download a free trial version here.

Step 2

Step 3

  • Drag and drop your own design assets (in gif, jpg or png format) onto the stage.
  • Click the Magnet Icon on the right side of the toolbar to enable Relative Mode. This allows you to make changes to your assets throughout the whole timeline (move, scale, rotate, etc.) while preserving any animations they may have.
  • Move and resize your assets to fit over the ones in the file, like I did in the example below.

Step 4

  • Select the existing layer that you have overlayed with your own asset. (Either “Project” or “Homepage”)
  • In the timeline, find your layer and click the little arrow next to its name to reveal the blue keyvalues. Since only the Y-position values are animated, you’ll just see values for “Y”. Click and drag to select the blue keyvalues that belong to that layer.
  • Now copy and paste those keyvalues onto your asset.
  • Rinse and repeat for your second asset.

Step 5

  • Boom! Your assets should be animating.
  • Select and delete the old assets. You can also select and delete our flying circles and triangles if that’s not your thing. We just love shapes…
  • Change the color of the background or animated shapes by selecting them and clicking on the “Fill Color” box on the right sidebar.
  • If you would like to add some subtle drop shadows to your assets you can also do that in the right sidebar, just scroll down from the “Fill Color” box you were working with earlier.

Step 6

  • Now we just need to export your gif!
  • Go to Menu > File > Export > GIF.
  • You’re done!

Related Articles

Embracing Your Animated Future

A UX Designer’s guide to learning UI Animation and animating Sketch designs.

Building Brand Loyalty & Reducing Anxiety with UI Animation

Turn moments of anxiety into opportunities to delight users and build emotional bonds through animation.

About MovingUI

MovingUI is a publication for UX Designers learning UI Animation. It is brought to you by Flow, a tool for animating Sketch files for iOS.