Because of the potential for variations in the different aspects of a web design project, creating a proposal or invoice for such a project can be trickier than that of another industry like accounting or legal services. If your proposal isn’t created carefully, it can lead to misunderstandings and unhappy clients (not to mention the grief it can cause you). The same is true for invoices: if it’s not clear what they’re paying for, clients can delay making payments or dispute charges.

There are two main factors to keep in mind when preparing a proposal or invoice: First, you’re likely dealing with people who are not yet your clients; and second, you’re dealing with clients who you (probably) hope will bring you repeat business. This article will offer a number of tips, based on those two principles, to help designers creative effective proposals and invoices.



Image source

Proposals

We’ll start with proposals, since you’ll have a need for them before you need an invoice. There are probably as many web design proposal formats as there are web designers. A lot of what you include in a proposal is a matter of personal choice. But there are a few things that every proposal should include.

The Basics

A proposal should include basic information about your company (contact info, mostly), information about who the prospective client is, and the fact that this is a proposal.

In many cases, you would include your logo and business name, along with your contact information, at the top of the page. Then, below that, you’d include your client’s contact information. Put the date somewhere near the top, too. Finally, put the word “Proposal” or similar, preferably in bigger type and bold. These things are just formalities, but they’re still important and it’s completely possible that some designers might forget to include one or more of these in their rush to get a proposal out the door to a new prospect.

The Project’s Scope

Somewhere in your proposal you’ll include information about the scope of the project. Is this going to be a simple brochure site? An online store? Will it have a blog? An intranet or members-only area? Community features? There are tons of variables that go into the creation of a website, and it’s important to describe at least the major ones here. Make sure you understand what your prospective clients are looking for before you send a proposal to them (this should be done in a discovery phase, with either a formal or informal client questionnaire).

This section should be clearly indicated, but can be formatted either as a series of bullet points or in paragraph form. Which one works best will probably depend on the type of site and how many features it will have. A bulleted list can give a more polished look and make it easier for the client to read — as long as there aren’t too many points. Don’t be afraid to use bold or underlined type to highlight particularly important sections.

Ideally, you want to include a problem statement at the beginning of this section (or possibly as its own section if it’s long enough), where you restate and rephrase what the client is looking for, to make sure you understand what they want, and to ensure they know that you understand their needs. Make sure you make it clear to your prospective client that you understand what their needs are, what their company is all about, and that you can help them reach their goals.

This is also the section where you want to make it clear what are your capabilities. The more specific you are about what you can and can’t do for a client, the less likely they are to make incorrect assumptions, and the more confident they’ll be in your abilities. By being honest up front, you build trust with your client, which makes them more likely to hire you, and, if the proposal is approved, they’ll be more likely to listen to, and trust, your suggestions during the course of the project.

The Project Timeline

Generally, web design clients want to know how long it will take for their website to be up and running. My advice: take a page from Scotty’s book (from the original Star Trek series). Under-promise and over-deliver. In other words, if you think something will take you two weeks, tell your clients it will take three.



Image source

There are two reasons for taking this approach. First, every project will have its unexpected problems and challenges — maybe your client submitted artwork three days late, or maybe the domain they wanted was already taken and it took them a week to come up with an alternative, or maybe the hosting they purchased ahead of time doesn’t support databases or PHP5. Whatever the reasons, giving yourself some buffer time means you aren’t scrambling to meet deadlines that are suddenly unrealistic or delivering the project a week late.

But there’s an even more important reason to under-promise and over-deliver: If everything lines up properly and you don’t run into any problems, you will gain the reputation of being faster and more efficient than other designers. In both cases, you end up with happier clients without pulling out all of your hair!

So, come up with a realistic timeline for the project, breaking it down into milestones if it’s a particularly large or complicated site. For example, you might promise initial mockups in two weeks, a functional site for testing in a month, and the final site in two months. For a smaller site you might promise the mockups by the following week and the finished site a week after the mockups are approved.

In creating the written timeline, be sure to mention that some milestones may depend on the client’s approval. It’s not unreasonable to set incremental deadlines that require the client to review certain aspects of the project. In the documented timeline you want to inform them that any delays on their part will affect the overall timeline.

The Project Costs

Including project costs in your proposal in a well-outlined and well-explained manner can contribute to how happy your client is and how long it takes them to pay their bills. You’ll want to break down the costs based on phases or parts of the project. How you do this depends on how you normally bill clients and how complex the particular project is.

For very simple websites, you might write “Brochure site, 4 pages with contact form, $500” or similar. For a more complex site, however, you’ll need to break it down into separate items. You might have a fee for the basic design, a fee for adding ecommerce capabilities, a fee for some original artwork, and maybe a fee for custom coding. In either case, make sure you outline whether this is a flat fee or based on an hourly rate (and how many hours that covers).

Outline potential additional charges, too. These might cover things like domain name registrations, hosting setup and monthly charges, and ongoing maintenance fees. Including these details in the proposal will help avoid any surprises from a client perspective.

Other Things to Include

There are other less important things you might want to include in a proposal, depending on your own normal business practices and your individual clients. These include:



Image source

Make sure you’re accessible. Make sure you include multiple methods for the client to contact you by. At a minimum, the client should have your email address and a phone number, but also consider including your cell number, and one or more IM usernames, if it will fit the circumstances.

Make sure you include multiple methods for the client to contact you by. At a minimum, the client should have your email address and a phone number, but also consider including your cell number, and one or more IM usernames, if it will fit the circumstances. A confidentiality clause. You may want to include a confidentiality clause in the proposal, making it clear to your prospects that the information contained in your proposal should not be shown to others (especially other designers).

You may want to include a confidentiality clause in the proposal, making it clear to your prospects that the information contained in your proposal should not be shown to others (especially other designers). Technical specifications. Some designers like to specify exactly which browsers the site will work in, as well as any special or proprietary technologies the site will use. This might also include specifying a particular CMS.

Some designers like to specify exactly which browsers the site will work in, as well as any special or proprietary technologies the site will use. This might also include specifying a particular CMS. Original artwork creation. Sometimes a web design client will want you to revamp their logo (or create one from scratch) or do some other original design work for them. These things should probably be specified separately.

Sometimes a web design client will want you to revamp their logo (or create one from scratch) or do some other original design work for them. These things should probably be specified separately. Payment terms. If you have a payment plan worked out with your client, the proposal would be the best place to spell it out. You might also mention things like penalties for not making a payment on time.

If you have a payment plan worked out with your client, the proposal would be the best place to spell it out. You might also mention things like penalties for not making a payment on time. A short company or designer bio. Giving your prospective client some idea of who you are and what you’ve done in the past may make their decision a bit easier. Putting that information on the first page of your proposal makes it easy for them to remember why they considered hiring you in the first place.

Giving your prospective client some idea of who you are and what you’ve done in the past may make their decision a bit easier. Putting that information on the first page of your proposal makes it easy for them to remember why they considered hiring you in the first place. A cover page. A cover page is a great place to include things like your company bio and your confidentiality clause. It can also make the proposal look more professional, especially if the proposal is more than a couple of pages long.

A cover page is a great place to include things like your company bio and your confidentiality clause. It can also make the proposal look more professional, especially if the proposal is more than a couple of pages long. Headers and footers. Including a header and/or footer with your contact information and page numbers makes it easier for prospects to keep your proposal organized and for them to contact you without having to flip back to the front. This also helps it look more polished.

Including a header and/or footer with your contact information and page numbers makes it easier for prospects to keep your proposal organized and for them to contact you without having to flip back to the front. This also helps it look more polished. Moodboards and/or wireframes. For particularly promising projects, or for ones where you’re pretty confident the client is going to hire you, including a couple of wireframes or moodboards (with color schemes or other design elements) can be a nice added touch. Just don’t put too much time into it or give too much away until you actually have the project.

For particularly promising projects, or for ones where you’re pretty confident the client is going to hire you, including a couple of wireframes or moodboards (with color schemes or other design elements) can be a nice added touch. Just don’t put too much time into it or give too much away until you actually have the project. Case studies. Including case studies of similar sites or projects you’ve completed can also give clients more faith in your abilities. Include any relevant projects, but limit this to 2-4 strong and applicable examples, to avoid overwhelming your prospects.

Including case studies of similar sites or projects you’ve completed can also give clients more faith in your abilities. Include any relevant projects, but limit this to 2-4 strong and applicable examples, to avoid overwhelming your prospects. Include a cover letter. Give a very brief introduction and overview, in an email or cover letter, of what’s included in the proposal, what your qualifications are, as well as your contact information.

Give a very brief introduction and overview, in an email or cover letter, of what’s included in the proposal, what your qualifications are, as well as your contact information. Schedule a meeting. When you email or otherwise send the proposal to your prospect, include in the proposal a request for a meeting to discuss any questions they might have about your proposal or the project itself. Knowing there is a possible follow-up meeting might make it more likely that the client will review your proposal in a timely manner.

Don’t Forget…

Here are some other things to keep in mind when preparing your proposal:

Spell check and proofread ! There’s nothing worse than getting a proposal that’s littered with typographical and grammatical errors. Remember that your computer’s spell check isn’t foolproof. Do a manual proofread, too — preferably on a hard copy.

! There’s nothing worse than getting a proposal that’s littered with typographical and grammatical errors. Remember that your computer’s spell check isn’t foolproof. Do a manual proofread, too — preferably on a hard copy. Ask your client whether they prefer a printed or digital version of the proposal, and if digital, which file format they’d prefer.

If it’s a print proposal, use high quality paper and ensure that your printer isn’t running out of ink; you want your proposal to look as professional as possible.

Use a customizable template to make the creation of future proposals easier and more streamlined.

Be neat and professional, but don’t over-design your proposal; its purpose is to get the information across, not to show off your design skills.

What’s Next?

So, you’ve crafted the perfect proposal and sent it to your prospective client — now what?

If you haven’t heard back from the client within a week or so after submitting the proposal (and assuming you didn’t schedule a follow-up meeting when you sent the proposal), it’s fine to follow up. Whether you want to email or telephone is up to you, and may depend on the type of client you’re dealing with. But get in touch to make sure they received the proposal, and to see if they have any questions. If they haven’t made a decision by this point, try to find out when they’re likely to do so. Then, plan to follow up again after that date if you haven’t still heard.



Image source

Now, assuming they decide to hire you, what are the next steps? You’ll want to get a signed proposal or contract from the client, along with a deposit. Whenever you’re working with a new client, you’ll always want to get a deposit of anywhere between 25-50% before you start work (which should have been specified in your initial proposal). Once those are received, you’ll want to schedule the milestones and deadlines that were outlined in the proposal’s timeline. Keep your client up to date on your progress, especially if it’s a long-term project (weekly or bi-weekly updates are often appropriate).

If you know you’re going to miss a deadline, let your client know as soon as possible. They’ll appreciate the advance notice, especially if the next milestone requires some kind of action from them (such as reviewing artwork or beta testing). Keep on top of your clients to make sure they comply with any deadlines agreed upon in the proposal (such as providing artwork, reviewing the site, or making scheduled payments). When you send them files to review, include a note to remind them of their responsibility to provide feedback within the specified time that was outlined in the proposal. This will help reinforce that you can only meet your deadlines if they meet theirs.

Constant communication with your client is key to making any project run smoothly. Make sure your clients know they can come to you with any questions or concerns they may have regarding the project. Do the same with them. If you have questions about something they’ve sent to you or some aspect of the project, ask them. It’s better to ask and get it right the first time than to spend hours or days doing something you’ll have to change later.

Further Resources:

Professional Web Design Proposal Template

A downloadable template for creating your proposals.

Writing a Website Design Proposal

A great post from Propaganda Party on what makes a great design proposal.

Write a Winning Graphic Design Proposal for Your Business

A very detailed article on creating proposals.

Creating a Winning Proposal for Web Projects

An awesome article from Peachpit about the web design proposal process.

Website Design Proposal Template

Another great template to serve as a basis for your own proposals.

How to Write a Web Design Proposal

A detailed post from Bidsketch on creating web design proposals.

7 Tips for Writing a Winning Web Design Proposal

This post from SitePoint offers some excellent tips for creating a proposal.

Secrets to a Great Sales Proposal

Another SitePoint post about writing a proposal, this one more focused on the sales aspect.

Deliverables That Work: Design Description Documents

An awesome post from Carsonified about creating a “Design Description Document”.

The UXD Stack

A great post from 404 User Experience Design about project management in user experience design that could be very useful for structuring your own proposals (or at least deciding what information you need to include).

45 Incredibly Useful Web Design Checklists and Questionnaires

Use some of these questionnaires to gather the information you need to create a better proposal.

Writing a Project Proposal

A step-by-step guide from Tutorial Blog for creating a project proposal.

Invoices

A clear and easy-to-understand invoice will contribute greatly to ensuring your clients pay their bills in a timely fashion. Below are some guidelines that will help you create an effective invoice.

What the Invoice Should Include

Your invoices should include basic contact information for both you and your client, as well as the date the invoice was issued and the date it’s due. Always include a sequential or date-based invoice number, to help identify the invoice at a later date.



Image source

The invoice should outline exactly what the charges are, which would be broken down in the same way they were broken down on your proposal, to make it easier for your clients to verify the charges. Include whether these are flat fees or based on hourly rates (and how many hours). Depending on your location, you may need to include some form of tax as a separate item. Check your local laws to see if this applies to you.

Finally, include how you want to be paid — by check, bank transfer, or PayPal. You might consider setting up a payment gateway on your website to make it easier for your clients to pay you. Offering a discount for prompt payment can also be a good idea. It’s common for payment discounts of between one and five percent to be given for payments made within five to ten days. You should also specify if there are any late payment fees or interest charged on payments not received by the due date.

Using an Invoice Service

There are numerous online services that offer invoicing ranging from full-featured bookkeeping to simple invoice-tracking services. Some of the better solutions let you create proposals from within the app, and can manage your entire project. These services can definitely make your life much easier when it comes to finances.

Another advantage to using an online invoicing app is that it can track payments, and sometimes even calculate your income taxes based on what payments you’ve received, saving you time and hassle. See the “Further Resources” below for an overview of some available invoicing apps.

In addition to these services, you may also use ready to use invoice pdf templates to easily send professional-looking invoices to clients automatically.

Further Resources

(ll)