How We Publish to Dribbble

Nov 04, 2020・Travis

When we post shots to Dribbble, we often do so en masse. Here's an open look at our process and how we manage the volume.

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.

After creating animations, the way we go about things basically boils down to the following steps:

Make a set of description templates for the current project.
Export media for an animation
Upload to Dribbble
Pick and customize the appropriate template for the post
Add tags
Add a file attachment
Add the shot to a project
Schedule the post

Shot Description Overview

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

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

We prepare them as HTML code blocks so that the links show up nicely in the Dribbble post.

Basic Format

Each post should have the following basics:

Customized reference to someone else’s portfolio and the original shot.
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.)

A basic writeup template might look like this:

Inspired by [NAME WITH LINK TO DRIBBBLE PROFILE]’s [DESCRIPTION WITH LINK TO INSPIRATION SHOT], with some other detail if needed
 
Made with Flow.

Here’s an example of a simple description:

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.

Each one of the code-blocks is copy-pastable into Dribbble, allowing you to tweak links.

Original Shot

We use this template 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.

Here is the boilerplate for our iOS Spinners 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).

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.