Template · 9 min read
Web design proposal template
A free web design proposal template in nine sections, written for freelance web designers and small studios. Copy the skeleton, read what each section has to do, and use the AI prompt to turn your discovery notes into a finished proposal page. Then send it the way a web designer should: as a web page at one link, which tells you when the client opened it.
The template
The nine-section web design proposal template
WEB DESIGN PROPOSAL [Client name] · [Project name] · Prepared by [your name / studio] · [date] 1. SUMMARY [One paragraph: the client's goal in their words, what you will build, the timeline and the investment. If they read nothing else, they know the deal.] 2. WHAT WE HEARD - Today: [what is wrong with the current site, in their words] - Goal: [the business result: more enquiries, bookings, sales, credibility] - Audience: [who the site is for] - Success looks like: [a measurable outcome where one exists] 3. SCOPE - Pages: [Home, About, Services (x3), Work, Contact] - Features: [booking form, blog, newsletter signup, multilingual] - Platform: [Webflow / WordPress / Shopify / custom] + CMS training - Integrations: [analytics, CRM, payment, scheduling] - Content: [who writes copy, who supplies images] 4. OUT OF SCOPE [Copywriting, photography, SEO retainer, hosting fees, anything you are asked about often. Naming it now prevents scope creep later.] 5. PROCESS AND TIMELINE Week 1 Discovery and sitemap Week 2-3 Wireframes, one review round Week 4-5 Visual design, two review rounds Week 6-7 Build and content entry Week 8 QA, launch, handover Review rounds: [number] per phase. Feedback turnaround: [x] working days. 6. INVESTMENT Option A [Core site] [price] Option B [Core site + blog + CMS training] [price] (recommended) Option C [Option B + copywriting] [price] Payment: [50% to start, 50% at launch]. Valid until [date]. 7. WHAT WE NEED FROM YOU [Brand assets, copy, logins, one decision-maker, feedback within x days] 8. REVISIONS, OWNERSHIP, AFTER LAUNCH [Rounds included and the rate after them; who owns the design files and code on final payment; support window; hosting and maintenance options] 9. NEXT STEP [Reply "approved" or approve on this page; invoice for the deposit; kickoff on [date].]
What each of the nine sections has to do
- Summary. The whole deal in one paragraph: goal, what you will build, how long, how much. The owner who reads this on a phone between meetings should be able to say yes from it.
- What we heard. The client’s problem in their words from the discovery call: “people can’t find our prices”, “we look smaller than we are”. This is the section that makes the proposal feel written for them, and it is the one most templates skip.
- Scope. A page list, the features, the platform, the integrations, and who supplies content. Page lists end arguments; “a modern website” starts them.
- Out of scope. Copywriting, photography, ongoing SEO, hosting fees: whatever clients assume is included. Naming it here costs one line and saves a difficult email in week six.
- Process and timeline. Phases with weeks, the number of review rounds per phase, and how fast you need feedback. Most web projects slip on client feedback, not on design work; the timeline is where you say so politely.
- Investment. Two or three options with the recommended one marked, a payment schedule and a validity date. Options turn “yes or no” into “which one”.
- What we need from you. Brand assets, copy, logins, one decision-maker. A short list here is the best predictor of an on-time launch.
- Revisions, ownership, after launch. Rounds included and the rate after them, who owns the design files and code on final payment, the support window and maintenance options.
- Next step. One action and a date: approve, pay the deposit, kickoff on a named day. A proposal that ends on “let me know your thoughts” ends the conversation.
Where does your portfolio go? Link two or three relevant projects inside “What we heard” or right after the summary, next to the problem they solved. A gallery at the end gets skipped.
Example
The page a web designer should send
A fictional example: a small studio’s proposal to Northwind Studio for a new eight-page site, built from the template above and published as a web page on the studio’s own domain.
The summary and the three price options are on the first screen. The timeline is a row per phase. The client opens it in any browser, on a phone, without downloading anything, and it looks like work from a web designer because it is a web page.
Open a live example proposal to click through a real page (a fictional consulting proposal, same idea).
Turn discovery notes into the proposal with AI
The scope and the price are your judgment. The layout, the timeline graphic and the option cards are what AI does well. The prompt encodes the nine sections and the rule that keeps AI safe around client work: no invented case studies, logos or results.
Copy, fill in the brackets with your discovery notes and prices, and paste into Claude or ChatGPT:
You are producing a web design proposal as a single, self-contained HTML file. CONTEXT (replace everything in brackets): - Client: [client name and what they do] - Prepared by: [your name / studio] - Notes from the discovery call: [paste them as they are] - Pages and features in scope: [list] - Platform: [Webflow / WordPress / Shopify / custom] - Out of scope: [list] - Timeline: [phases with weeks] - Price options: [option name: what it includes: price, one per line; mark the recommended one] - Payment terms: [e.g. 50% to start, 50% at launch] - What you need from the client: [list] - Brand: [primary hex color] + [logo URL, or "text wordmark"] REQUIREMENTS: - Sections in this order: Summary · What we heard · Scope · Out of scope · Process and timeline · Investment · What we need from you · Revisions and ownership · Next step. - Open with a one-paragraph summary that states the goal, what will be built, the timeline and the price range. - Write "What we heard" in the client's own words from my notes. Do not add problems I did not mention. - Show the price options side by side as cards, with the recommended one highlighted. - Show the timeline as a simple visual (rows or a bar per phase), not a paragraph. - Keep every name, number and price exactly as I gave it. If something is missing, write a clearly marked [TBD]. Never invent case studies, testimonials, client logos or results. - Self-contained HTML: inline CSS, no external scripts or fonts, readable on a phone, printable. - Tone: plain and confident, like a studio that has done this before. No buzzwords.
- 1 Paste the prompt (with your details filled in) into Claude or ChatGPT. You get a finished, self-contained HTML document. Review it, correct anything, and iterate until it's right.
- 2 Publish it as a tracked link: with the Pagelive connector in Claude, say "publish this page" and the link comes back in chat. Next cycle, "update it" replaces the content at the same URL. Or upload the HTML file at app.pagelive.io.
After you send it
Change Option B at the same address
Publish it as a page at one link: the client sees a web page from a web designer, and when they ask for Option B instead of A you change it at the same address, with no second PDF in their inbox. On Solo the link can sit on your studio’s own domain, and on Solo and Team you get an email when the client opens it, with how long they spent on the page.
The honest limit: an open tells you the link was opened, not how carefully. Use it to time your follow-up. For the contract and signature, keep your e-sign tool; an approval on the page is a decision, not a signature. More on the follow-up side in proposal tracking.
Frequently asked
A summary of the client’s goal, what you heard in discovery, the scope (pages, features, CMS, integrations), what is out of scope, the process and timeline with review rounds, the investment and payment schedule, what you need from the client, revisions and ownership terms, and one clear next step.
Start from the discovery call, not from your service list. Restate the client’s goal in their words, turn it into a scope with a page list, price it as a fixed fee or as two or three options, and end with the exact next step and a start date. Keep the body to what a busy owner reads in ten minutes.
This template does not set your rates. Price from scope: page count, custom functionality, content work and review rounds. Offering two or three options (for example a core site, the core site plus a blog and CMS training, and a full package with copywriting) lets the client choose a level instead of saying yes or no.
You can, but a web designer selling websites with a PDF undersells the work. Send the proposal as a web page instead: the client judges your craft from the proposal itself, the price options can change after the call without a second file, and a tracked link shows you when it was opened.
Short enough to read in one sitting: usually the length of a long web page. Put the summary, scope and investment where they are seen first, and move detail such as the full sitemap or technical notes to the end.
Related: all proposal templates · marketing proposal template · Pagelive for agencies
A web design proposal that is a web page.
Build it with AI, send it as one link, and know when the client opens it. Free for 2 public pages.