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 neededMade 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 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}.Here’s the code…
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}.Here’s the code…
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}.Here’s the code…
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.Here’s the code…
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).
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.
- not fake
- 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:
- 4x scale (gens a 1600x1200 vid)
- 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.
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.
More importantly, our approach is designed with recognizing an crediting the great work out there that gives us inspiration. We set things up early on so that when we’re in a frenzy of uploading, we help amplify other people’s profiles, animations, and originality... without missing a beat or a link.
Originally published at https://createwithflow.com on November 4, 2020.
