Let’s Break Down Website Pricing by the Hour

We’ve talked about website pricing on the blog before.

In How Much Does a Website Cost? we broke down the different types of websites and how they could affect the price.

We didn’t go into the specifics of what costs what within website design pricing.

In fact, we simply shared some top level ballpark costs for the work we do here at Canny.

Today, we’re going to break down website design pricing into the hours it takes, alongside the likely level of investment.

Resources

The Complete Website Checklist

The Complete Website Checklist

download now download now

Typically, we don’t break down our proposals like this, because nothing here is optional. We price our websites as a complete offering.

However, in the interest of science, and bringing clarity to a typically muddy situation, we wanted to break our hours down.

At Canny, we timetrack our hours, so the figures below are based off a collection of website projects we’ve worked on over the last year or so.

This post should give you an idea of the steps taken throughout a web design project.

And when you get a quote for your new website, moving forward, you’ll have a fair idea of what proportion of your money is being spent where.

Let’s dive in.

Assumptions and Prerequisites

To get as close to giving the actual price of website design as possible, we’ve made some assumptions and added some prerequisites.

In this post, we’ll be talking solely about brochure website design.

So we’ve disqualified ecommerce websites, simple landing page sites, or anything else weird and wonderful we’ve created in the last twelve months.

The brochure website design we’re pricing out as we go is based on a professional, clean, well-designed site.

It also has no complex functionality outside of connecting a Contact Form to a CRM system.

Not sure what a brochure website is? Hopefully this helps:

A brochure website typically has between 10 and 50 pages, with most pages being based off the back of around 10 unique page templates. They tend to include a blog or news page.

This is typically the type of site you see when you’re researching new software or looking for a service provider.

We’re also assuming that at this stage, we’re starting with a blank slate. It’s not a website design, and there’s no Analytics data to work from.

As well as that, we’ve also assumed all client feedback calls take place on the phone or Skype, and as such, haven’t factored in time for travel.

It’s as “straight up and down” a website project as possible.

So, with that in mind, what does brochure website design pricing look like when broken down?

The Website Design Process (Time Spent vs Investment Level)

Again, we’ve talked about the website design process on the blog already.
And we went into some detail!

However, we only worked through the client facing processes. In this post, we’re also going to discuss the behind the scenes operations and processes too.

We’re going to focus on bringing some clarity to the amount of time spent on each step in the process.

First, let’s talk about our hourly rate:

Hourly rates in the design industry are broad, and subjective. I don’t want to get into a debate about hourly rate, but right now, Canny charge £60 per hour.

So when pricing up our projects, £60 is the number we use as our multiplier.

We’ll create a more detailed post about hourly rates in the future (promise!)

To get to the hours assigned to each section, we’ve taken an average of our last three brochure website projects.

Now that we have the assumptions and caveats out of the way, let’s get into breaking apart website design pricing.

Project Management

Project management is one of the most overlooked costs in any project.

The time spent on project management covers:

• Project setup
• Paperwork
• Time in meetings
• Calls out of meetings
• File preparation
• On-site visits

As you can imagine, this can take up a considerable amount of time, especially on larger website projects!

Some agencies hide this cost within the deliverables of the project. We find it easier to itemise it out.

Project management should always be a line item in the proposal that’s considered by both parties. Afterall, website design projects don’t run themselves after all.

Discovery Session

A Discovery Session gets everyone on the same page about the web design project.

It makes sure everyone is clear on the goals and objectives we’re working towards.

We’ve detailed what happens in a Discovery Session in our latest post about branding deliverables.

In a Discovery Session you get into the nitty gritty of the business, and highlight the real problems that go beyond “we need a new website.” You might even discuss ongoing marketing plans for the business.

Visual Research

Visual research involves looking at styles of website design that will and won’t work for the client.

We also research competitors to find out what they’re doing. We try and spot patterns to see if any of them have stumbled onto a “winning formula.”

As well as that, we also research “aspiration companies.” By that, we mean companies that are already nailing the direction our client wants to move in.

We do this for inspiration and to see what makes them difference.

The bulk of research takes place at the start of the project but may continue as the project progresses.

Once concluded, it’s all uploaded to Pinterest so we have an online moodboard that can be referenced when needed.

Sitemap Creation

The next in the process (and first “real design task”) is creating a formal sitemap.

A sitemap shows the structure of the website, including:

• Main navigation and pages
• Sub-navigation and pages
• Pages that don’t sit within the navigation

The sitemap gives everyone involved clarity around the deliverables of the project. It also helps us to get your website structure right.

It also helps us internally to mark off progress against the project.

Wireframing and Content Planning

This is where a website design project really kicks into high gear.

A lot of agencies insist on clients providing them content first, but we’re happy to work on wireframes based off the project goals.

This helps our clients visualise the site, and makes creating their content easy. We see content and wireframing as a two way street.

If there’s early draft content ready, great! If not, no worries!

This is the thing with our brand values. Partnership is such an important word for us.

By working as a partner, rather than an outsourced agency, we’re helping our clients the best way we can. Rather than demanding unattainable things from them.

When wireframing a website, we’ll draft in early content or content ideas where possible.

We then proceed to create wireframes for each page on the website. These start as sketches with the Canny team around the table.

We try to decide on three goal funnels or routes through the website and plan for that. This is where the nuances of each of the businesses we work with comes into play.

For example:

• Are our clients targeting three unique customer personas?
• How many services are they offering?
• What is the primary call to action of the website?

Once the wireframes are drawn up, they’re digitised and we move onto the next stage in the project.

Client Feedback Session

After the visual research and wireframes are complete, we review everything with our client.

At this stage we discuss how a website design might apply to the wireframes, and further help with content ideas and refinement.

When reviewing the visual research, we’re doing it in context of their brand.

We’re asking:

• Does this align with your brand vision?
• Does this visually arrest you?
• Show us examples of the things here that you love
• Show us examples of what you hate
• Why?

It’s a deep dive into their design eye. It can be difficult, but it helps drive the project forward with great momentum.

Homepage Design (Mobile, Tablet, Desktop)

All feedback from the client feedback session is then taken on board. The wireframes are then reconfigured, and signed off by the client.

The Canny design team then takes a first pass at the homepage design for mobile, tablet, and desktop devices. As you know, responsive website design is key in this day and age.

At this stage, we’re taking on board everything from the visual research, looking at the client’s existing brand, and creating a strategic website design based on the completed wireframes.

The design focuses on impressing and winning over the target audience of our client, rather than the client itself.

Afterall, your website is a strategic marketing tool.

It’s not there just to look nice! It has to work to attract visitors and generate sales or leads for your business.

Client Feedback Session

At this stage, another feedback session takes place to review the newly created homepage design.

Here we’re talking very specifically about design elements, including:

• Typography/Fonts
• Colours
• Imagery
• Layout
• Content

We want to assess whether this sits well with our clients. And can they imagine a full website in this style working for their business?

Reworking of Homepage Design and a Handful of Other Pages

If all has gone well, the homepage design is complete and we move onto creating a handful of designs for other pages in the sitemap.

Usually, there’s an element of client feedback to take on board.

We then produce new iterations of homepage design and run in by our client again. The key elements are then worked into a handful of other pages.

After that, we present between three and five key pages to the client for their approval.

Doing this allows the client to see more of their website in context.

Sign Off on Design Style

Now it’s over to the client to sign off on the design style.

Usually this takes place as an email.

We present the above to the client, ask for any last feedback, or ask them to sign it off so we can progress with the project.

Either way, nothing else is designed or built before the client gives approval here. Usually this is pretty straightforward.

Design for Remaining Pages

At a minimum, other page elements that haven’t yet been designed are brought together here.

At this point, our clients have good visibility on what their entire website will look like.

We build our websites on WordPress. So, the designs we’re creating are for templates that can be used and recycled.

For example:

If there are ten service pages, we won’t design ten unique pages, we’ll design one and reuse the template.

The time spent on this section all depends on the size of the website.

Handover Meeting

This is an internal handover meeting between our design and development teams.

Because Canny is a small team, our design and development teams work very collaboratively and the chances are, everyone has seen the website project progress and been patched in along the way.

However, we still hold a formal handover meeting where we discuss functionality, design, page flow, and expectations for the project.

All design assets are also handed over to the development team at this stage in the project.

First Draft of Website Build

The first draft of the website build focuses around any core functionality, and nailing down the homepage in code.

We also establish key design styles and build reusable/refactorable blocks of code at this stage.

Another thing we get out of the way early is complex functionality such as mobile menus, newsletter integrations, CRM hookups etc.

We also include any of the must-have features we’ve talked about with our clients.

The earlier we can get things like this out of the way, the longer we have to make tweaks and changes to the way things work as we go.

We also draft in any content we have ready at this stage.

Internal Feedback Session

After the first draft of the website build is ready, the Canny team come together to review it.

Here we review key design decisions and make sure everything has translated into code as well as it should.

Sometimes, things like line heights and font sizes need to be corrected.

We then identify whether hover states and other functionality is working as expected.

In general, this is a quick session over a cup of tea to make sure everything is progressing as it should.

Continue Website Build

Based on the feedback from the above, the rest of the website is then built out. As a lot of the core features are taken care of earlier, this tends to be a pretty straightforward process.

Once finished, it’s a case of another quick internal review.

Any feedback is again actioned, and revised or amended content is dropped in.

Review Website Build with Clients

At this stage, and once the internal Canny team is happy, it’s time to review the progress with our clients for the first time.

This works well because we get a fresh set of eyes on the project.
This can help highlight anything glaringly obvious that we might’ve missed.

We ask them for their honest opinion at this stage and take their feedback on board as we move forward.

As the website design has already been signed off, there’s rarely any major changes at this stage in the build process.

Finalise Website Build

From the feedback above, we make any last minute tweaks to the website or, action any critical feedback.

Final content is dropped into the site, and then the build is completely finalised.

At this stage, it’s pushed to a staging server ready for review from all parties involved.

Website Testing

Once the website is up on the staging server, we begin the testing process.

We test it across a range of phones, tablets, and desktop machines. Ranging from iDevices to Android devices and everything inbetween.

We also test on the following web browsers:

• Google Chrome
• Firefox
• Safari
• Internet Explorer
• Microsoft Edge

The entire team looks over the site whenever they have some downtime. This helps us identify different bugs.

We usually do this over a number of days.

Why?

Because you can get too close to a project! You need to take time away from a website build and revisit it with fresh eyes.

Everyone keeps a note of bugs they find, and it’s uploaded to Asana, which is one of our favourite apps for keeping things running smoothly.

Project Sign Off and Training

Once everyone is happy, we hold a signoff and training session.

The client is ran through their brand new website. And as we go, we show them how to update pages, post blogs, and make other changes.

Some clients want us to run through using Google Analytics and other site management tools. That can add a little bit of time to the conclusion of a project.

Website Launch

The next major stage in the process, is launching the website.

We follow the best practises that we’ve outlined in our post, How to Get Your New Website Launch Right.

Launch day is an exciting time, so running through our launch checklist helps to keep everything on track.

We make one full check of the website, including:

• Checking all forms work
• Check all links work
• Check mailing list integration works
• Hardening security
• Activating spam protection
• Checking over Analytics, Search Console, and Hotjar integrations

Get our website checklist ebook to find out what else we check over!

The Grand Total

So, now that the website is out in the wild – how much time has actually been invested into the project, and what’s the cost?

Let’s take a look:

• Project Management = 15 hours
• Discovery Session = 2 hours
• Visual Research = 6 hours
• Sitemap Creation = 1 hour
• Wireframing and Content Planning = 8 hours
• Client Feedback Session = 1 hour
• Homepage Design = 6 hours
• Client Feedback Session = 1 hour
• Reworking of Homepage Design / Other Pages = 2 hours
• Design for Remaining Pages = 6 hours
• Handover Meeting = 2 hours
• First Draft of Website Build = 20 hours
• Internal Feedback Session = 1 hour
• Continue Website Build = 8 hours
• Review Website Build with Clients = 2 hours
• Finalise Website Build = 4 hours
• Website Testing = 2 hours
• Project Sign Off / Training = 2 hours
• Website Launch = 1 hour

The grand total of time invested into a typical brochure website design project is a whopping 90 hours.

Combine that with our hourly rate of £60 and it brings the price of an average brochure website in at £5400.

The projects we compared for this project were worth:

• £6000
• £4000
• £5500

However, it’s at this stage, we should say we have worked on some website projects for less, and some for more.

The process map outlined above is a rough guide to the average brochure website build.

If we imagine certain parts taking more or less time, it’s a case of adding or removing hours to the sections as we see fit.

This is why we don’t believe in website design packages. They’re not an accurate way of working. They’ll end up with either:

• You being overcharged, leaving you unhappy
• Your agency undercharging, leaving them unhappy

We firmly believe in fair pricing for all involved. Nobody should be unhappy. Getting a new website should be a great feeling, not a negative one.

I hope this overview has helped you develop your understanding of what goes into a website, and how we decide on our website design pricing.

Ongoing Costs

One thing we haven’t mentioned is the ongoing cost of owning and operating a website.

Afterall, a website is a living, breathing, ever growing marketing platform for your business.

Therefore, you have to stay on top of new technology, updates, and security, as well as providing customers with valuable updates.

So, what do the ongoing costs look like?

Website Hosting

Website hosting can get quite pricey. Especially as there are so many drawbacks to cheap website hosting.

At Canny, we offer two hosting packages at £20 and £50 per month respectively.

We charge that, because it’s managed hosting solution. So we take care of updates, security, and anything else that might arise.

It also means you can talk directly to us, rather than to your hosting company, and we can just jump in and fix the issues for you.

Domain Name

Domain names can cost anywhere from nothing, up to £60 per year to renew.

Depending on how many variants you have, will depend on how much you pay. This is an unavoidable business cost.

We advise our clients pick up:

• .com
• .co.uk (if they’re in the UK)
• .co

This covers most major cases. If they have the budget, picking up certain misspelled terms is a good idea too.

Most of our clients are spending around £100 per year renewing their domains.

Website Maintenance Packages

Some clients prefer to put us on a maintenance retainer to help them with managing their website.

These costs are bespoke to client requirements as everyone needs something different depending on their business.

As an average, I’d budget on around £300 per month if you’re wanting us to be heavily involved in the day to day running of your site.

Digital Marketing for Your Website

I can’t accurately give a price for digital marketing, as just like our maintenance packages, every client needs something specific.

Usually, we look at the following as part of an ongoing package:

• SEO
• Content Strategy
• Content Production
• Content Marketing
• Social Media Management

We have great success with our content strategy. That’s how we’ve grown Canny from £0 to six figures.

Again, it depends on the input you want from us, and the output we suggest, to how much you’ll need to budget.

The easiest way to find out about our pricing here, is to get in touch about your project!

Conclusion: Let’s Break Down Website Design Pricing

Website design pricing is very specific to the project and task at hand.

And every single website design project is completely different.

There are a lot of moving parts to every website project.

In fact, in my many years building websites, I’ve never built the same type of website twice. Whether it’s the design, goals, or objectives that change, every single website we’ve created has been different.

Where some clients enjoy being hands on, others are happy to just let us get on with it. Some clients want to see every page designed in hi-res format. Others will be happy with a sketch.

We have to try and make allowances for both with our pricing!

I hope this post has helped go someway to helping you understand how we work out our website design projects and pricing here at Canny.

How much did your website cost? Were you satisfied with the outcome? Let us know in the comments below.