Very recently, I took on a website "re-design" for a client that seemed to be relatively cut and dry...no design aspects involved. Update the code to be current industry standard. Period. Nothing difficult or overly time consuming. Right? Oh my was this little bit of HTML a surprise! You remember the 80s horror movie the "Gremlins"? How the little Mogwai "Gizmo" was this adorable fuzzy, cuddly, big-eyed bundle of love, then out of nowhere pieces of him spawn and mutate to be these horrific creatures who become these small, destructive, evil monsters?! Yup. That was this site. I thought I signed up for Gizmo...and ended up dealing with the Gremlin with the Mohawk. The kicker was, it was sneaky. Most of the pages had the same layout, obviously the header and footer were duplicated throughout, and there were not even any external links. But then the bombs were dropped. The client didn't realize that her header had been crooked all along, or that once you center a page, there is background on BOTH sides now, or that to make multiple columns there is different code to make the columns look identical AND completely different, OR MP3s are not just slapped in the background without possible song pirating. I will say the bad was all me (much to my dismay) because I forgot the carnal rule: always ask 800+ questions so both you AND the client know what you are in for. She thought I could just update code (tables and all...oh yea. It was THAT kind of site) and I took HER word for what she described she needed. The truth of the matter is, however, that HTML is organic. It changes, grows and you need to adjust. Being the expert, you never want to hear the initial need and write it off saying: "Sure. Ten hours. Tops." because if they knew what they truly needed and how to write the code, you never would have received that phone call in the first place. Because of this experience, I decided to include three of the basics that you need to detail before quoting, or even starting, any project...especially HTML. This will help both client and designer alike so a fair assessment of time and price can be made. 1) Creative brief. Sure the who, what, when, why, how and where seem obvious. But ARE they? Who, what, and when are a given, usually without needed elaboration. (Sally needs a site by the 31st.) But the why, how and where are the tricky parts. Make sure you truly know the why: To sell more propaganda? To get their name out there? To simply have the information available? To bring their business to the new century, away from the 90s? That will help you decipher how code advanced, graphically heavy, and much meta data is required. Where seems to also be a given, but if you go to upload the site and discover their domain is not forwarded to their hosting, and they don't know how to fix that, it's your job to figure it out. The How is where my folly happened. Get details! Play 500 Questions. Make a site map detailing what pages connect to what, how many pages there will ultimately be, which pages utilize the same code layout, and how much individual CSS will be needed. Are there different backgrounds? How many images will be needed? Will there be MP3s, background music, downloads? Do they have imagery, or need a photographer or will they use stock photos? Physically sketch out EACH page, and make a wireframe for yourself that takes into account all the margins, padding and "div" sizes. Also...to save stress on both sides, ask the client's budget IN the creative brief. If you do all the prep work taking in all details and creep and quote $3000, nothing is more disheartening on both sides than when the clients says: "Oh. We only thought it'd only be about 500 bucks." Knowing their budget helps you adjust how much work and time you put in, while still giving them a decent product. 2) Sketches and maps. We already touched base on this...but it's worth elaborating. Don't mix sketches and wireframes. They are two different beasts...but you need them both. Wireframes will layout the buttons, links, text, and images in grey boxes or just boxes with an "x" in it. Sketches will give the graphic LOOK of the site. Site Maps will help the designer, more than anything, figure out what links go where so you can make sure you have a cohesive path while coding. Here is an example of a wire frame, and a site map both graphically and logically.
3) Time Quote. From the client standpoint, the rest just looks like good preparation, but this is where negotiation, deadlines and costs come into effect. You want to present a time quote that mimics an invoice. Have your logo and contact information at the top. Give an estimated time frame (days, weeks, or hours depending on the project) with details of why: re-writing code, adjusting photos, adding pages, utilizing Flash/JavaScript/jQuery, etc. Take into consideration creep (when the project "creeps" past what you anticipated)...will you offer a discounted rate for creep? Give them some wiggle room for deadlines...make yours a week earlier (if possible) so if a drastic change is needed, you have TIME to adjust. One thing to caution is not to look at a project, chat a bit then offer a quote. Tell them you need to look over materials, interview notes and initial creative brief to give them a fair assessment. Remember to look at their initial budget. Will you charge by the hour, or by project? Will they reimburse you for stock photography (they better!) or will you find other means? Finally 4) The contract and deposit. As a rookie, I learned this the HARD way. NEVER...NE-VER...start a project without the contract signed and deposit received. You WILL get burned. I'd like to say everyone still lives in the 1890s and a handshake is golden, but...not so much. The Contract needs to detail specifically what you will be doing (remember the site map?), how long it will take, what you are charging, how many edits they are allotted before you charge extra, and how much the deposit is, when payments will be made (even if you only do two payments) and how much each consecutive payment is. Also include an "exit clause" in case (god forbid) they are not happy, or you need to fire your client. Will you give refunds (not at all advised)? Do they need to give adequate notice? Pay "x" amount prior to dissolving the relationship? I would also write a line to protect yourself from slander, which could hurt your business, and simply sprout from miscommunication and personality conflicts. In addition, add a clause about communication: "If you don't get back to me, return emails, or give me feedback when requested, I cannot be held responsible for the deadline not being met." Then, print two copies and have each party sign both. Keep it in a file with the rest of the paperwork (details of an organized filing system will be in a new blog soon). The deposit is a great debate. But I've come up with a great formula that helps me: 25% down, or no-less than $150, whichever is greater. I do not take checks, and cash has no record. LUCKILY! There are now personal card readers that take cards and deposit the money directly to your bank, and emails your client (and you) with a receipt. My favorite is Square. The fees are relatively low, you can use an Android and all Apple, or simply go to their site. There is also Intuit and Moblized but I have never used either. If you are able to get these basics down and utilize them for EACH project and client (no matter the size), the stress and miscommunication will be greatly reduced. Hopefully, you'll be able to learn from my mistake and keep your Gizmo, without the threat of the Gremlin! :D PS: Feel free to message me for some great templates to use for each of these examples. Enjoy!