The full and correct launch of a website consists of multiple parts, with each part being a phase in the design process. If any phase of this process is skipped, you lose the benefit of that item either immediately or in the long run. I’ll briefly go over my design process, but ultimately as a designer (or business owner trying to launch your own website) it is important for you to create your own process as you see fit. I’ll be using my good client Trucking Express to illustrate the process as we push forward uncovering the design process.

Phase 1 – Brainstorm/Plan

Here you are simply writing down on paper exactly what you are trying to do with your website. If you don’t know why your client needs a website, how will your services benefit him? As a designer you’re supposed to drive your clients interests; so establishing the target demographic, existing branding, company philosophy and overall company interests isn’t simply a good idea- It’s necessary. Do your research and look over his direct competitors, your job is to make your client look better. Your client shouldn’t have to push ideas on you either, make sure your pulling them out of them, and in the process getting they excited about the project and stimulating thought for more ideas!

Here’s a very basic example of what a decent planning session would look like:

• On paper, figure out timeframe for the project. If your client has already put up a press release that their website will be done on xx/xx/2010 you’ll dissapoint them if you don’t hit that date.
• See if they are looking to utilize any specific technologies, like a built in contact form, or Flash animation.
• Determine what hosting platform they are using. Some techologies like .ASP can only be used on Windows based servers.
• Will copywriting/photography/branding be provided, or will they expect you to handle that.
• Mock up proposed navigation and sections. No images, just a list or diagram.
• Determine overall feel/theme of project.

Phase 2 – Wireframe

This is a stage many designers skip. It’s necessary to figure out exactly how your content will be laid out before moving onto color, photos, styling, etc. This is typically a barebones skeleton, black and white, and with simple shapes. When you force yourself to design without colors and supplemental items like photos and graphics, your mind is forced to get to the basics of exactly what your website is trying to portray and tell it’s visitors.

Phase 3 – Mockup

This is when you can start getting creative, with the exception of color. You are now figuring out how you will around your content around your graphics. You’re still not really building aesthetic appeal here though, you are prioritizing and creating focal points. This helps make sure your creativity builds upon existing content, instead of simply filling up empty space.

Phase 4 – Design It

Whether you’re doing it in a sketch book or in Photoshop, this is where you completely design your website to its most minute detail. You’re figuring out exactly what you’re website will look like once complete.

I used to personally design as I coded, experimenting with different designs as I’d move forward, but I’ve found that completely finishing a website design not only typically produces a more appealing end product, but also speeds up the overall development process because you’ll reduce revision time. Simplicity should be a key goal in your design, and unnecessary complexity should be avoided.

Phase 5 – Develop It

This is when you slice, dice, code, script, integrate, etc. and get your website up and functional. Depending on the scale of the project, this can be fairly quick, or the most time-consuming phase in your design process.

When coding an approved design, I always heed to the following:

1. Validate. Abiding to web standards assures that future browser releases will still render your code correctly. I try to keep as close to web standards compliance as possible. Also, clean code disciplines you, making you as a developer more efficient. It also makes website crawling easier for search engines, helping your SEO.
2. Clean up your code. Clean code saves you time. Unnecessary styles in your CSS will complicate things for you. If your only using a style once, just code in-line. It’ll make your life easier, and you will be able to perform revisions faster. Same goes for clean HTML structuring- although the website will function fine if you code in one paragraph, It’ll be a pain to ever have to go over again.
3. Test on ALL major browsers. At the very least make sure the the latest versions of Internet Explorer, Safari, Firefox, Opera and Chrome all render your website the same. Every browsers reads HTML a little differently, so make sure all visitors will have a pleasant experience. Also, It’s a good idea to install Internet Explorer 6 as many people still use the browser, and it WILL butcher a fresh website.

Phase 6 – Refine It

Look over your work like a critic. At this point you’re adding/subtracting last minute content, graphics and functionality. Also do final testing and implementation of search engine optimization, analytics and scripts.

“Think of and look at your work as though it were done by your enemy. I you look at it to admire it, you are lost.” – Samuel Butler

It’s usually a good idea to have the equivalent of what would be an ideal customer/candidate of your client look over your work, and provide feedback. Worst case scenario get an opinion from a friend or family member.

Conclusion

Keep in mind, this is MY current design process, and your welcome to add/subtract from it. Chances are with enough time I’ll probably be adding more to my own process. Self-discipline is good for you as a designer though, so if you can establish your own strict protocols, it’ll make for faster, more efficient development, and your client’s will appreciate you for trying to understand their goals as a company.

Also make sure your updating your client throughout the full process, they will most likely appreciate the good communication and customer service (which is very hard to come by these days). Outsourcing services is nerve-racking for any business owner, It’s your job to make it easy.