A website project has more moving parts than most freelance work, and clients see the invoice long after they have forgotten half of them. The premium form plugin, the extra page template, the two days lost to migrating an old blog, the staging server: each of those has a cost, and each is easy to overlook when you write "Website build — balance" on a single line.
This template splits web work into stages that match how sites actually get built: discovery, design, development, content and launch. It also separates pass-through costs such as themes, plugins and hosting from your own fees, which is where most web design invoice disputes start.
TL;DR
The web design invoice template bills a site by stage (discovery, design, development, content entry, launch), lists pass-through costs like premium plugins and hosting separately, credits earlier payments, and adds a [TAX RATE]% placeholder. Send one invoice per payment stage. The practice that prevents most disputes is tying the final payment to delivery of a launch-ready site, not to the day the client chooses to go live.
What's inside
- Project block — site URL or staging URL, contract reference, payment stage.
- Stage fees — discovery and sitemap, wireframes and design, development, responsive testing, launch.
- Page and feature lines — page templates, custom features, integrations, each named.
- Content lines — content entry, image optimization, copywriting if in scope.
- Pass-through costs — theme, plugins, fonts, hosting or domain if resold, with renewal dates.
- Extras — change requests logged during the build, with dates.
- Payment history and balance — earlier stages paid, balance due, payment methods.
When to use it
Use it for brochure sites, small e-commerce builds, landing page sets, redesigns and platform migrations. It also works for agency subcontracting where you bill a studio for a defined part of a build.
For monthly care plans, updates and backups, use a separate retainer invoice tied to a website maintenance SOW. If the project has not started yet and you only need the upfront payment, a deposit invoice is clearer.
Line items web clients query most
Plugins and themes. Clients often do not realize that a premium plugin is a yearly subscription. Put the plugin name, the license tier and the renewal date on the line, and say whose account it sits in. Your contract should say who pays renewals after launch.
Content entry. "Client to provide all copy and images" is in almost every web contract, and the content almost always arrives late and unformatted. If you end up loading 30 product descriptions or resizing 200 images, that is billable work under most contracts. Name the pages and the hours.
Change requests. "Could we add a booking widget?" in week five is a change, not a tweak. Log it with the date, a short description and the agreed price. If you are not sure how to raise it, the how to ask a client for more budget post walks through the conversation.
Browser and device testing. It is a real stage of work. Listing it shows the client the site was checked, not just built.
Migration. Moving an old blog, redirecting URLs, cleaning up imported media: these can take days. Quote and bill them as their own line.
The launch-ready trigger
The most common cash-flow problem for web designers is the client who approves the site and then sits on launch for two months while they "finish the copy." If your final invoice is due on launch, you wait with them. Define the trigger as "launch-ready site delivered on staging" and set the balance due a fixed number of days after that, often seven to fourteen. Pair the invoice with the website launch checklist so the handoff is clear.
Customize it in your COLO workspace
In COLO you can send a web design proposal with line items, have the client accept it in the client portal, and convert it into an invoice, then record partial payments for each stage as they come in. Invoices support tax rates, discounts and PDF export, and the client can pay by card through Stripe or by PayPal from the portal. See Invoicing and Payments.
If you track time against tasks, a project budget warns you at 80% of the budget and stops billable timers at 100%, which helps you notice scope creep before the final invoice rather than after.
Common mistakes
- One line for the whole build. The client cannot see what changed since the quote.
- Plugins in your name with no renewal plan. The site breaks a year later and everyone blames you.
- Balance due on go-live. Your payment becomes hostage to the client's content schedule.
- Maintenance mixed into project invoices. Recurring work gets lost or disputed.
- Unlogged change requests. By the final invoice nobody remembers who asked for what.
FAQ
Q: How should a web designer split payments?
A common split is a deposit on signing, a payment when the design is approved, and the balance at launch or handoff. Each invoice should name the stage it covers.
Q: Should I bill hosting and domains through my invoice?
Only if you are reselling them by agreement. It is usually cleaner for the client to own hosting, domain and plugin accounts directly, with you billing only setup time.
Q: How do I bill content entry when the client is late with copy?
If the contract makes content the client's job, charge content entry or copywriting as an extra line with the hours or pages, and note the date content was received.
Q: When do I invoice the final payment if the client delays launch?
Tie the final payment to the site being ready for launch, not to the client actually pressing publish. State in the contract that the balance is due a set number of days after you deliver the launch-ready site.
Q: Do I invoice ongoing maintenance on the same invoice?
Keep project invoices and maintenance invoices separate. Maintenance is a recurring service and is easier to approve as its own monthly document.