Jump to content


Banner pricing, delivery timelines and development time estimation.

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Back in the Flash days it was easier to get these things right.  Now is again the wild west and trying to get estimation and pricing in the right spot is quite an art I think.  From my agency experience I usually put 8 hrs per banner and 4 hrs per resize, but you know there all different kind of clients from those who sent you the final PSD to to those that take you through 10 rounds of review with 3 re-designs during the project with an non-changing deadline.  Right now whenever I plan a banner the first thing I do is see if I can do it all in HTML/DOM with GSAP/JS/CSS3 which is a cheaper workflow (Photoshop and Sublime only) than say Easel JS (which requires separation of Design and Developer tasks and some Flash experience).  Do I need to use and animate SVG? Increase the hours.  Do I need to use canvas? Increase the hours.  Then I remember that I'm probably estimating like in my Flash days so I multiply the hours by 1.5 since HTML is slower.

Do you charge per hour or per banner?

Are clients more willing to pay per banner of per developer hour?

Is it cheaper now or is more expensive with HTML5?

How do you manage large campaigns with say 50 banners?

Where do you cut costs to be competitive?

Let's talk about the art and science of making banners.

  • Like 1
Link to comment
Share on other sites

Now in this still wild west, my prices are a bit higher than in the Flash era. When the forced transition happened, I doubled my fees to get a bit of fresh air to learn and try out these so called animation tools. Then when everything is went it's place, I lowered my prices to get more campaigns from my clients.

I think the hour based pricing works only with low fees, when nobody cares about 1 or 2 more hour, and Your have long time relationship with the client who is trusting You. Much better if the master's price reflecting it's complexity.

Here is my system to calculate the master's price:

Graphical elements ( .png, .jpg .svg... ) * 3¥

Animation phases * 3¥
Legal text: 5¥

Custom javascript code or interaction: 10¥
Design without storyboard: 15¥
Adaptation ( use other programmer's source ) : 20¥

The mutation's price is fixed 10¥.


The first 3 modification round is free. But after that I charge 4¥ for every review round. This way the frustration of the never finishing master is gone. I do my very best to satisfy my clients ( whatever silly idea they came up ). I hope this system is forcing them to think twice before they asking something new, and we finish the masters within shorter times.

These are't real values of course. They reflecting only the ratios. The adaptation is the highest because I don't really like to suffer between countless lines of vendor prefixed css. Instead I usually building the master from the ground up in DOM + GSAP and using the foreign master as an animated storyboard only.

The graphical elements are easily countable and their number is reflecting the overall complexity of the master. The client can look into the images folder and can count them too. The animation phases are countable on the storyboard. "If You want a fully decorated, singing christmas tree, pay for it".

After counting all these values in an excel table, I often give a symbolical discount and everybody is happy.

You can go canvas but better if You educate the designers what is possible in DOM ( IMHO ).

The deadlines are often in the past or in the really near future, which made me not take them too seriously. If I say 2 days and the ad is done in 1, then my client is always happy irrespectively of the deadline.

  • Like 3
Link to comment
Share on other sites

With new Adobe Animate CC, I need the same time like in the Flash days and final products and possibilities are the same.

With all other tools, time and price is doubled.

  • Like 2
Link to comment
Share on other sites

Reading this makes me thankful to be employed full time/in house at an ad agency, so I don't have to worry about changing/managing different fees!  (This does make me wonder though, if HTML5 is more valuable than Flash maybe I should ask for a raise   :P).


I do still have to estimate hours so they can bill the client, and those can vary quite a bit depending on the complexity of the project.  I'm pretty good at estimating how long things will take me, but the only thing that can be unpredictable is if/how many revisions there might be.  (And with some clients you never know what might change last minute, so it can be good to allow a bit of padding for that.)

  • Like 2
Link to comment
Share on other sites

Great input Oliver!  I'm still trying to wrap my head around your methodology.

Ohem you probably need to ask for a raise.  There are not many Flash devs that "survived" the html5pocalypse and there are not many Front End Devs/ JS Devs to make little "boring/stressful" banners.  I wanted to ask you though what is your average time to make 1 keysize (from Photoshop to animated banner).

  • Like 2
Link to comment
Share on other sites

  • 8 months later...

... I wanted to ask you though what is your average time to make 1 keysize (from Photoshop to animated banner).

It goes from 10 minutes to 1 hour. The later if I need to optimize the assets crop area, transparency, or need to rearrange text lines etc. But I have a system which is allowing me to care about only the importatnt parts, every other task is automated.

Link to comment
Share on other sites

This is a great thread, and although it's a few months old, I'll chime in with a few things I've discovered along the way:



Some business-side conclusions that I've reached after several banner projects:


  1. It's really only ever worth it to sell full sets of multiple sizes.  There is pretty much no reasonable price that works for one or two GSAP banners. I do a minimum set of 5 sizes. And I try to do 10 so they can split test two versions of the creative.
  2. I do almost all the initial design on a 300x250 storyboard and then apply those design decisions to the other sizes. I don't storyboard each size. I start with the 300x250 for a couple of reasons: First, it's easier for clients to get their brains around design decisions on the more familiar 300x250 format. Secondly, it's much easier to repurpose existing print-media / broadcast-media content to the 300x250 format. This gets the ball rolling faster on the approvals front.
  3. I charge per banner, but as others have said, the first banner takes 3x the amount of time as the resizes (or more). I don't begin other sizes until I have final approval on the first size. But I regularly have to push back on design feedback on the 300x250 if it represents a design decision that will be difficult to implement on the following sizes. 
  4. Canvas is a bear. In my opinion it's not worth it (for me) at this point. I can move much faster with DOM elements. If the design requirements are a clear call for canvas I alert them to the fact that they're about to incur additional costs.



And some workflow discoveries:


  1. I do all my layout in SVG using Affinity Designer. And I name my layers in Affinity before SVG export. This automatically names my paths with id names so I don't have to do it manually. I embed all SVG's inline in the HTML document (using Sublime).
  2. When I use PNG's I often (but not 100% of the time) make the PNG sized the entire size of the banner so that I can quickly position it at top/left: 0,0 as a starting location. In other words if my 'sprite' is a small 50x50 circle, I'll still export a full 300x250 (or whatever the ad size is) transparent PNG with lots of transparent space.  I don't do this if there are dozens of moving elements, but it works like a charm with 1 or 2 moving elements. This speeds things up considerably from a workflow perspective and saves me the trouble of tweaking and reloading to get initial placement locations.
  3. Lately I've been playing with single-file HTML5 ads. I *think* this is a superior workflow but the verdict isn't in on this yet. In other words, I inline all my CSS, HTML, SVG and my GSAP-tweens into a single .html file. (I have a template file I use for all new ads). This makes for extremely fast-loading ads with minimal http calls. 


'Would love to hear ballpark prices (and geographic locations) from independent devs out there. I do find it's often hard to communicate the additional amount of work required for animated HTM5 ads over Flash ads. There doesn't seem to be a great understanding of those issues yet. Mostly because when you say "HTML5", most people really have no idea what that means. Whereas everyone knew what Flash was.

  • Like 3
Link to comment
Share on other sites

Pardon me, but you say that you'd like 25 pounds for a banner ad?


Graphical elements ( .png, .jpg .svg... ) * 3¥ = 9

Animation phases * 3¥ = 5
Legal text: 5¥ = 5

Custom javascript code or interaction: 10¥ = 5
Design without storyboard: 15¥
Adaptation ( use other programmer's source ) : 20¥
The mutation's price is fixed 10¥

The first 3 modification round is free. But after that I charge 4¥ for every review round. 


It may take me few days to do a nice interactive one.  Am I crazy? 

Link to comment
Share on other sites

Pardon me, but you say that you'd like 25 pounds for a banner ad?



These are only ratios expressed in an imgainary currency. You can substitute any value in place of ¥. This is my pricing system which means You can do a better one for Your special case. It is an example only.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.