How We Publish to Dribbble

In our other article, Learning to Animate by Stealing Other People’s Work we cover all the reasons why we love Dribbble and how to use it to be inspired, learn, pay homage, and promote the work of other amazingly talented people.

Our Process

When we post shots to Dribbble, we often do so en masse. Typically, we do this because we’re diving in on a particular animation theme and we go all-out in generating a whole series of animations at the same time. The volume requires a process for making sure all our posts get tagged properly, have great descriptions and — most importantly — reference any original works that inspired our post.

  1. Export media for an animation
  2. Upload to Dribbble
  3. Pick and customize the appropriate template for the post
  4. Add tags
  5. Add a file attachment
  6. Add the shot to a project
  7. Schedule the post

Shot Description Overview

There are 5 templates that we use for any given project:

  • Rebound of one of our Original Shots
  • Rebound of Someone Else’s Original Shot
  • Rebound of a Team’s Shot
  • Rebound of a Rebound

Basic Format

Each post should have the following basics:

  • Custom description of the shot.
  • Link to the software it was made with.
  • Description and link to any relevant project pages outside of Dribbble (e.g. Github, etc.)
Inspired by {NAME WITH LINK TO DRIBBBLE PROFILE}’s {DESCRIPTION WITH LINK TO INSPIRATION SHOT}, with some other detail if neededMade with Flow.
Inspired by Aaron Iker’s rebound of a cool shot by Gur Margalit.Made with Flow.

Shot Description Templates

When we’re about to launch a series on Dribbble we take just a little bit of time to customize 5 templates, making it smoother to post multiple shots. The templates below are modified versions for our latest project — iOS Spinners.

Original Shot

We use something simple like this when we’re posting an original work.

A piece of our own minds; simple originality.

Rebound

We use this template when rebounding someone else’s original work.

Inspired by {Designer's Name}’s {Title or Description or Original Shot}.
Inspired by <a href="https://dribbble.com/{portfolio link}" rel="nofollow noreferrer">{Designer's Name}</a>’s <a href="https://dribbble.com/shots/{shot link}" rel="nofollow noreferrer">{Title or Description or Original Shot}</a>.

Rebound of a Rebound

We use this template when rebounding a rebound.

Inspired by {Designer's Name}'s rebound of {Title or Description or Original Shot} by {Original Designer's Name}.
Inspired by <a href="https://dribbble.com/{portfolio link}" rel="nofollow noreferrer">{Designer's Name}</a>’s <a href="https://dribbble.com/shots/{shot link}" rel="nofollow noreferrer">rebound</a> of <a href="https://dribbble.com/shots/{original shot link}" rel="nofollow noreferrer">{Title or Description or Original Shot}</a> by <a href="https://dribbble.com/{portfolio link}" rel="nofollow noreferrer">{Original Designer's Name}</a>.

Rebound of a Team’s Shot

We use this template when rebounding a shot that was uploaded to a team’s portfolio.

Inspired by {Designer's Name}'s {Title or Description or Original Shot} for {Team name}.
Inspired by <a href="https://dribbble.com/{portfolio link}" rel="nofollow noreferrer">{Designer's Name}</a>’s <a href="https://dribbble.com/{shot link}" rel="nofollow noreferrer">{Title or Description or Original Shot}</a> for <a href="https://dribbble.com/{team link}" rel="nofollow noreferrer">{Team name}</a>.

Rebound of a Self-Rebound

We use this template when rebounding someone’s rebound of their own work.

Inspired by {Designer's Name}’s rebound of the {Title or Description or Original Shot} by {his/her} own hand.
Inspired by <a href="https://dribbble.com/{portfolio link}" rel="nofollow noreferrer">{Designer's Name}</a>’s <a href="https://dribbble.com/shots/{shot link}" rel="nofollow noreferrer">rebound</a> of the <a href="https://dribbble.com/shots/{original shot link}" rel="nofollow noreferrer">{Title or Description or Original Shot}</a> by {his/her} own hand.

Boilerplate

After the custom description for the current shot, we always like to add a bit of boilerplate that talks a bit about our current project.

This is an actual Custom iOS ActivityIndicator.Exported to super clean Swift code.<a href="https://createwithflow.com/" rel="nofollow noreferrer">Made with Flow</a>.Only #realsoftware generated here, everything from Flow is real.Checkout our <a href="https://github.com/createwithflow/ActivityIndicatorView" rel="nofollow noreferrer">Github project</a> about this Flow feature.

Files, Tags, and Other Polish

Here are the remaining things we do for a post.

Upload an MP4 File

We like uploading an MP4 file for our animations with a resolution of 1600x1200, using .H264 compression (other compression formats sometimes won’t work).

Tags

Prior to starting our upload process, we also create a set of custom tags to use. Here’s the set for our iOS Spinners Project.

  • real
  • uikit
  • spinner
  • ios
  • microinteractions
  • ui animation
  • flow
  • createwithflow
  • animation
  • loader
  • loaders

Export Options Media

When generating videos of our animations from Flow, we use the Dribbble export option with the following settings:

  • 2x preview scale (scales up the original animation)
  • Shadow (adds a shadow to the animation layer
  • Round Corners (rounds the corners of the animation layer)
  • Custom background color if needed, otherwise default Flow light-grey.

Animation File

We make sure to upload a zipped version of our animation file for people to download.

Include the Shot in the Project

Prior to scheduling the shot to go live, we add it to our latest project.

Final Shot

A final shot will look like the image below.

We’ve highlighted the various important sections of the post.

Why We Do Things This Way

The main reason for this process is volume. For example, in our latest project we uploaded 50 animations that we created in 48 hours. With that number of uploads you definitely need to keep things organized.

A new class of UI Animation software. Import from Sketch. Animate in Flow. Export production-ready code.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store