Client Web Design Project from Brief to Sign-off
Take your client web design project from brief to sign-off: create a moodboard, brand board and quote, collect feedback, document changes and compare planned with actual hours.
Your progress is stored only in your own browser (localStorage) and is not transmitted to our servers. Third-party resources (e.g. advertising and analytics from Google/Cloudflare) may transfer data when loaded.
This workflow guides you through the following steps:
- 1. Capture the brief Work through the structured form with the client and generate the briefing PDF. Export the project as JSON to reuse it later.
- 2. Collect visual references Add reference images and color swatches to the moodboard and export it as a PNG to discuss with the client.
- 3. Record the brand basics Record colors, fonts and the logo in the brand board and copy the CSS variables for implementation.
- 4. Write the quote Turn the project scope and budget range from the brief into line items with hourly or fixed prices.
- 5. Collect feedback Place numbered pins on the screenshot for each design revision. Add a comment, priority and owner to each point.
- 6. Document the changes Compare before and after pixel by pixel and attach the diff image to the approval.
- 7. Review project hours Compare planned and actual hours for each line item to see where the project differs from your estimate.
- 8. Record the sign-off Record the results and decisions of the sign-off meeting and export outstanding items as CSV or ICS.
Interactive workflow loading …
What you get at the end
A briefing PDF, a moodboard, a brand board with CSS variables, a quote, documented feedback, evidence of changes, a review of project hours and a sign-off record.
Why these steps in this order
The brief and brand basics shape the quote and design, feedback rounds support sign-off, and the review of project hours helps you price the next quote.
More background
Project planning and collaboration
Frequently asked questions
Where is my data stored?
Your playbook progress is saved in your own browser using localStorage. Nothing you enter is uploaded to our servers. Clearing your browser data resets the workflow.