How much did this website cost: Phantom Creative Agency
“So, how much is this website gonna cost?”
The question that any service company dreads hearing.
One of the biggest concerns for our branding and creative agency clients is giving their clients accurate website development costs.
We web developers are notorious for humming and hawing over giving quotes for projects “sight unseen”. In an ideal world, we’d quote against finalised designs. However we know this isn’t always possible and that your clients often need a fixed cost before signing off, say, a visual identity project with you. How do we square this circle?
We love working on exciting, cutting edge design and so we’re starting a new series of blog posts where we show you a website that we love and explore:
- What we would have quoted to build it.
- Some of the things we consider (using a real life example) when quoting for web development projects
What to consider when quoting for web development work
Phantom are a great visual communication design studio based in Greece, with a beautifully creative portfolio website. For this blog post, I’m going to treat it as if we’d been asked to quote for a bespoke WordPress build.
Lots of Animation and Transitions
Animations and transitions are one of the most challenging parts giving a cost for web development projects. The simplest-seeming things can be incredibly expensive, whilst something truly ‘out there’ can have an almost negligible cost impact.
The reason is… libraries.
Bespoke development of animations can be incredibly expensive. However if we can utilise a robust library, animation can be very quick and easy to implement.
We have a range of libraries that we often use to create advanced and exciting effects, including:
- Page Transitions – https://barba.js.org/
- Scroll Effects – http://scrollmagic.io/
- Various Advanced Effects – https://greensock.com/gsap/
As an aside, animated illustrations, icons, etc can be very expensive to code from scratch but we’ve had great success where the agency exports the HTML animation from AfterEffects.
Phantom’s design uses quite a lot of animation/transitions, so we would typically add an extra day to the quote. That way we have enough resource to finesse them and try out different libraries and options.
Project categories vs filters
We would not typically recommend how this website has handled the filtering of their work by project category (such as Branding, Visuals, etc) because clicking each category button takes you to a different /project-category/ page. It is an entirely valid approach however and is really up to the brand/designer.
There are 2 things that I would normally take into consideration here and I’ll run through them below:
- The designs of the filtering/sorting element
- The need for load more/pagination
Attractive Filtering/Sorting – No Load More/Pagination
For this, I would normally recommend Isotope (https://isotope.metafizzy.co/)
This is ideal for a long list of projects, articles or blog posts where they are all visible on the screen. We have excellent customisation options for the filter/sort elements and the on-page filtering/sorting is really attractive (try the examples in the URL above). The downside is that it doesn’t handle load more/pagination very well at all.
Standard-Looking Filtering/Sorting – Load More/Pagination
My go-to approach for this type of brief would be to use FacetWP – especially for advanced filtering and sorting (such as “filter by map,” “sort by size,” “filter by width range,” etc)
What we gain in functionality, alas, we lose in look and feel – it retains a very “form” look and feel, which isn’t ideal for design/identity-driven clients.
Attractive Filtering/Sorting – Load More/Pagination
This is the most challenging and expensive option, forcing us to code up custom AJAX to power this kind of functionality. Briefly – this means that we have to make requests to the database and reload the elements (in Phantom’s case, projects) in line with the filter/sort options selected.
Often overlooked: Legal and 404 Templates
This is often forgotten by the designers and adding it to the quote acts as a helpful reminder to consider these kinds of pages.
What we think this website would cost
So – for the full build, we would expect this website to cost £4922.50, and you can see our breakdown below:
|Page||Front-End Days||Back-End Days||Total Days|
|Homepage + Header + Footer + Off-Site Menu||1.5||0.5||2|
|Work (+ Project Category Template)||0.5||0.1||0.6|
|Single Blog Post||0.4||0.3||0.7|
|QA and PM (+10% of project)||£819|
We Want to Make Pricing Work for You
At the end of the day, we want to make website projects as easy as possible for our clients – so we’ll be as flexible as you need us to be.