I apologize for the lack of updates recently, but as some of you already know, I will have some big changes in my offline world coming soon. Alanna and I are moving just about 2800 miles from Western Massachusetts to Southern California in August! We are both very excited, but also very busy!
I will be leaving my job of over three years as the sole Web Designer and Developer at Southwoods, and my boss asked me to put together a write up of my web design process before I left. After writing it all down I figured others might be able to take bits and pieces of it away. This is by no means the only way to go about all of your projects, it is simply my personal approach and I find it helps keep me organized. This is not a guide on how to design web sites, but more of a guide of how to organize the design process. If you have any questions, additions, or feedback in general please don’t hesitate to leave a comment.
Download PDF Version:
Web Design Process Breakdown (168.6 KiB, 338 downloads)
Concept / Ideas / Research • Initial Designing • Development • Testing / Delivery
Concept / Ideas / Research
The first stage, if approached correctly, can save you a lot of time and frustration down the road. Get as much information as you can and do as much research as you can.
- Talk with client and gather all ideas
- You should always keep a healthy line of communication open between yourself and your client. Don’t be afraid to ask questions. I have a questionnaire I ask clients to fill out to help narrow down and define their ideas.
- Clearly define the website goals
- What is the purpose and goal of the website? (i.e. to sell a widget, to advertise a widget repair service, to create brand awareness, to provide people with information about widgets). What will the end users’ goal be? (i.e. To buy a widget, to compare prices of widget repair, to learn information about widgets?) Always keep the goal, and your end user in mind. I could go a lot more in depth with this, but I think you can get the basic idea.
- Existing Logos / Color Scheme / Imagery
- If the client already has an existing look, make sure you get all of the material regarding it before you start work on the design. This can include anything from a logo to a tagline. Ask them to provide you with everything they would like to include in regards to their company/business image. You can also define your color scheme. I usually put together a few sets of colors swatches at this stage.
- Research
- You should do as much research as you can throughout the entire process. Research is a broad term that encompasses learning about the client / company you are doing work for, learning about their competition, analyzing design trends for their industry, what works, what doesn’t work, etc. The more well informed you are, the easier it will be for you to understand what the client wants
- Do they need dynamic content?
- Dynamic content covers a lot of things, such as a blog, shopping cart with products from a database, an admin section from which they can update their website from. Not only will this be reflected in the quote, but it can also determine a few design and setup aspects as well.
- What is the basic layout they would like?
- Web design doesn’t look like the boxy, table based websites from 1999 anymore. However, even if the design itself is not based on square objects, the overall appearance should fit some basic structure. ( i.e. One column with a horizontal navigation, two column with horizontal navigation and submenu in left column, etc etc)*
- Ask the client to provide you with all necessary content
- This includes everything; pictures, text, logo’s. If you get all of the content in the beginning of the project, it will be a lot easier to work with. Try to avoid piece mailing text and pictures, as this will save time and you will have a good idea of what the client is looking for. If you are planning on a simple gallery with 10 pictures and the client ends up sending 50, you might not have accounted for it in your quote.
- Domain Name and Hosting
- You are also going to need to know if the client already has a domain name and hosting. If so, gather all information needed for a transfer. If not, ask the client for domain name ideas and see if they would like to host their website with you. If so, register the domain and set up hosting. Don’t forget, this is a billable time.
- Review and Quote
- After reviewing all of the information that I have, I usually provide the client with a ranged quote. I try to break down each step, and estimate how many hours it will take for each.
For example:
- Project Management : 2 hours x $X/Hour = $2X
- PSD to XHTML/CSS : 5-6 hours x $Y/HR = $5-6Y
- Custom photo gallery : 4-5 hours x $Z/HR = $4-5Z
- Total estimate: $2X + $5-6Y + $4-5Z = $XYZ
These numbers are completely fictional; I pulled them out of thin air, but hopefully you can get an idea of my system of breaking things down.
- Sketching
- I don’t know how many notebooks of lined paper I have filled up with just basic sketches. Sketch basic layout ideas, right down any thoughts that come to your mind, brain storm. I also sketch out navigation paths for the end user. For example, I will sketch out a homepage. Then I imagine the user clicking on a link that says “Products” and sketch out a product page. From there I will sketch out a “Check Out” page and so on. These can be really basic sketches, but in my mind they are really helpful.
- Use a grid system
- I find using a grid really does help keep my design organized and on point. I prefer using the 960 Grid System. Although this this isn’t the solution to every design problem, it is a good starting point. There are a lot of tutorials out there in regards to designing with a grid that are probably more capable of explaining how to use them than I am. However, if there is a demand, perhaps I can write up my approach to the grid. I’m sure you can talk me into it by leaving a comment!
- Mock up a few different variations of the design in Photoshop or Illustrator
- Finally! I get into Photoshop or Illustrator! Now that I have all of these wonderfully great ideas on paper in front of me, I open up my grid template in either Photoshop or Illustrator and start laying out the basics. I start to block off the different sections for each page element. I won’t get into too much depth in regards to the design process either, as this will be different for everyone and again, there are so many other great tutorials out there. I realize this is only one step in my guide, but this is a very lengthy process. Regardless, put together your concepts and designs.
- Show client mock ups and ask for feedback
- I find sending your client a nice PDF with all of your concepts, and any additional information, is a nice way to present your designs. Ask the client to provide you with as much feedback as they can. After you hear back from them, start making the revisions. Show the client the updated designs and repeat this process until the design is finalized
- Code basic structure in HTML/CSS
- For some reason I can’t quite figure out, I really enjoy PSD to HTML/CSS conversions. Regardless, there are a few ways to go about this. You can always hire a programmer to do the technical work. Myself, I usually dive into a nice text editor, like Komodo Edit, and start coding the basic structure of the page. I chop up the PSD file and put it together again as Standards Compliant, Accessible, HTML/CSS. Again, this isn’t a tutorial on PSD to HTML conversions, but perhaps I can write one in the future if there is a demand.
- Layout homepage with dummy text
- Now that I have my structure put together, I usually use some dummy text to mock up a homepage. Some Lorem Ipsum text will work just fine.
- Code additional elements
- Every page is going to have some additional elements, such as Contact Forms, Photo Galleries, Dynamic Content, etc. I start to code these now as well. This step includes any additional scripting. If I am adding jQuery Validation to a Contact Form, this is the step. If I am adding a Lightbox/Fancybox script, this is the step.
- Test and Validate – Round 1
- Now I usually go through my first rounds of testing. I run my code through the W3C Validator and check my results. If there is invalid code, I will correct and make it valid. I will also make corrections if necessary. I will check the current design in the most common browsers to check cross browser compatibility at this point as well. I use BrowserShots and Adobe BrowserLab for this step. If there are inconsistencies, I will correct those now.
- Add Page Content
- Now I will remove all of that dummy content and replace it with the content supplied by the client, starting with the homepage
- Additional Pages
- If the homepage and the remaining pages on the site have the same basic structure, I will just duplicate the homepage and add the content for each page. My CSS will be kept in an external stylesheet, so if I do need to make any cosmetic change in the future, it will be a lot easier.
- Non-visible code elements
- When each page has taken form I will now add the nonvisible elements. For example, I will add Meta Tags, Analytics, etc.
- Upload all of the site files to a test server
- I have a restricted directory on my own web server where I can test things out. You can set up a directory that will disallow robots and indexing, with exceptions for sites you might need. For example, you might need to allow BrowserShots to access your page, so you can edit your robots.txt file to allow it.
- Check all of the pages in available browsers on computer
- I have several browsers on my computer and first I check over the site in each of them and make sure everything is consistent and functional
- Validate HTML/CSS
- Now, I will check the validation again, using the W3C Validator. I know this may be redundant, but after making additional changes I check again.
- Another Round of Browser Shots
- I will again use BrowserShots and Adobe Browserlab to test in remaining browsers. This won’t show every cross browser issue, but both sites can give you a nice start.
- Correct any cross browser compatibility issues
- Well, this is a pretty logical next step. Once you have pinpointed and issues, it’s time to dive back into the code and correct them. Also, don’t forget transparent PNG’s won’t show correctly in older versions of IE! You might need to find a pngfix that works for you.
- Test all forms, scripts, etc
- If you have any parts of the site that offer user interaction, then you need to test these as well. It could be a simple email contact form, or a complex product design application. Either way, they all need to be tested
- Finalize and upload
- You may need to repeat the previous steps several times before getting to this point, but when you do, it’s rewarding! After everything is tested, you can now show the client the live version of their website. They may request some changes, but don’t get discouraged. Repeat any necessary steps and be sure to keep track of your time. When the client approves the site and gives you the go ahead then you can upload the finalized website. Make sure your web server is configured correctly, and also make sure you upload all of the necessary files such as images, scripts, etc.
- Check live site
- Once all of the files are uploaded and the new site is live, you need to give it another thorough check. Again, go through all of the pages and make sure everything is functional and consistent.
- Additional steps after publication
- If you use a service like Google Analytics, check to see that the tracking code is installed correctly. You can also submit the website to search engines and if applicable, start doing your promotional work
Psst! Use code 15OFFDRM for $15 off Dreamhost Hosting!
Initial Designing
Development
W3C Validator Results - Ouch!
Testing / Delivery
Browser testing with Adobe BrowserLab
References / Resources
BrowserShots – Cross Browser Testing
Adobe BrowserLabs – Cross Browser Testing
960 Grid System – Layout Guide
6 Phases of the Web Site Design and Development Process
The Ultimate Website Launch Checklist
Excellent writeup !
I think Dave, it’s weird and somehow cool that this process is nearly exactly the same as mine! But it’s an excellent writeup nonetheless
Hi John,
I am glad to hear that someone else follows a similar process, haha. Thank you for the kind words!
Nice way to show how should manage projects. Thanks
Thank you both for the positive feedback! I wasn’t sure if anyone would actually read through the whole thing, haha!
Hi Ryan,
Nice post – although I really came to check out the KeywordLuv issue you reported a couple of weeks ago (sorry about the delay in responding, but I’m looking at it now).
Great post Ryan – I really enjoy reading about the creative processes other designers use, so this thorough breakdown was very insightful. It’s extremely useful for all designers to have something like this to refer to, thus ensuring all areas are covered. I personally have a check list I use when designing, it helps to keep me focused through each stage of the process.
BTW, good luck with the move, hope it all goes well.
Thank you Paul. Everyone has their own creative process, and I’m glad I’m not the only one who enjoys hearing others’. In regards to Checklists, I came across a good Pre-Launch checklist for web sites from Box UK. I’ve included a link in the Additional Resources section. No matter how positive I am that I have all bases covered before launching a new site, the checklist is good at reminding me of things I missed, haha.
Wow. Man, you should consider sticking this in some kind of a downloadable document (maybe a shared Google Doc or something) because it’s a wonderful but absolutely MASSIVE list.
Good work all around though – crazy thorough process explanation.
Hi Mac,
Thanks for stopping by, and also good idea with the downloadable version! I added a PDF download to the top, check it out and let me know what you think. Any feedback is welcome.
Thanks again!
Hi Ryan
Are you trying to make me turn green with envy… moving to Southern California!
Hope all goes well.
As for this post… you put us all to shame with the amount of work you have put in – congratulations for a great piece of work.
I’m writing this on a laptop with I.E. 6 so “Correct any cross browser compatibility issues” is particularly relevant. LOL
Hi Keith,
Haha, thank you for the well wishes! Southern California will definitely be a change, and I am really excited for the opportunity.
It’s funny, I didn’t even start writing this with the intention of posting it; it was just going to be a brief guide at first. Once I started writing, however, I just couldn’t stop. And if a website can pass the IE6 test, I usually give myself a pat on the back, hahaha.
Cracking writeup.
Should be really useful to any web dev and also a valuable document for anyone taking over your role at the company?
Can we ask what you are leaving to go on and do?
Thank you! I work with several Freelance clients out in California, so I am hoping to expand and do more work out there. I have been looking for full time work as well, and the job market in the field seems to be a lot stronger in Southern California. I have the opportunity to move with my girlfriend, who is originally from the Los Angeles area, and we decided to take it!
Thanks a lot such a nicely composed post. I was looking for such fully explained content.I will definitely use it for my next assignment.
Hi Yogendra,
You’re welcome! I hope you found it useful. What type of assignments do you have?
First of all, I love the design on your site… simple, effective and SHARP
I am a designer myself but I’ve always thought of webdesign as a very long, complicated process. It is easier to design simple mockups in photoshop but coding always gets me because of a lot of design elements. But I guess thats what webdesign really is.
I recently set up my very first wordpress website on my own, so I’m browsing sites close to my niche and found yours. Thanks for this useful guide, I’ll keep coming back to it for some tips
Cindy@The Game of Life’s latest post …How to replace header title with custom image in Thematic Feature Site
Hi Cindy,
Thank you for the compliments! It took me quite a few attempts to reach my current design, and I still have a lot more I would like to do, haha. I checked out your website and I like your work! I am not sure what initially drew me to web design, but I’ve found I like the whole process. Maybe I’m just a bit of a nerd, but even the coding I enjoy. I like the fact that there is a never ending amount of new things to learn, and I feel so accomplished after getting it right!
I also love WordPress, the flexibility still amazes me. I hope to see you around, and good luck with your website! I’ll be sure to check in!
Ryan – top notch explanation of your process. It’s pretty thorough and detailed; nicely done.
As the guy who just moved from AZ to New England, I’ll be watching to see how your reverse migration goes!
James’s latest post …Lighthouse Steps
Thank you James.
I just got into California yesterday and I’m also looking forward to seeing how the migration will go, haha.
Great writeup Ryan. I gave it a tweet and I noticed it didn’t register on your icon. I reckon there may be a fault there somewhere as I was wondering how come no-one else tweeted this post.
Hope your move goes well and that you’ll have a great time in your new home.
Sire’s latest post …My Honest Evaluation Of Dreamstime
Thank you Sire! I was kind of wondering if I was ever going to get a ReTweet, haha.
I installed a new plugin, but I’m not sure if I like it. Do you have any recommendations? You haven’t steered me wrong yet.
I use Topsy on Wassup. I like it because it allows the user to personalize the tweet rather than tweeting just the title.
Sire’s latest post …The Importance Of Using Professionals For Your Printing Needs
I agree with your blog. This is also what I learned in web design mistakes. Do not blend advertising inside the content: blending advertising like Adsense units inside your content might increase your click-through rate on the short term. Over the long run, however, this will reduce your readership base. An annoyed visitor is a lost visitor.
Thes’s latest post …Womens Warrior Costumes
I definitely agree! I see far too many blogs that are so jam packed with advertising that I can’t even find the content!
Thank you a lot!!!! What an extensive article
Very informative and thanks for sharing it.
Bookmarked for the future usage.
Hi Ryan. I love the breakdown you present on web design. As a not-so-tidy person, i’ve never actually tore the design process in pieces. But seeing this, it’s correct most of the time
Oh and i wish you good luck on your journey to CA. I personally love it there
Thanks John,
I’m glad other people follow similar practices, haha. It’s reassuring. And I have to agree, California is a great place!
Hi Ryan,
What type of images we should use to make a layout? Where can we find the royalty free images for layout?
And also can you tell me how can I validate flash based website through W3C validator ?
Hey Bradly,
It really depends on what you are making the layout for. I use http://www.sxc.hu and other free stock photo sites for mock-ups and such. If you are putting together a finalized design for a client, then there are several ways to go about it. I usually ask the client if they would like to provide their own images/photos. If they wish not to, then I also love taking pictures myself if it is sensible to do so. Don’t forget to factor that into the estimate! If all else fails, there are endless amounts of stock photo sites out there. The provider of imagery for the final site should be outlined in the proposal.
I don’t work with Flash that much, so I don’t really have good advice on validating it. One of the reasons I tend to shy away from Flash is the fact it is not really standards compliant. I also find that a lot of things you can do with Flash can instead be done with standards compliant methods, such as jQuery.
Although I am not an expert, I hope this helps!
thanks for this useful information and i glad to be here . thx again
That is one hell of a write up but your spot on, I will be using this as a quick reference guide when I do my next website design. Cheers.
I’m glad you found it useful! Thanks for stopping by.
Great article….i enjoyed reading it!
This is useful for all those web designers out there. Being a web designer means also that you have to have a great imagination and a creative skills. And of course knows about the tools use for web designing.
kirsty’s latest post …Split Tests on Shopping Carts and Content Management Systems
The imagination and creative skills do come in handy, haha. And with the ever growing technology, there’s always new tools to learn.
This is good bro, I’ve worked with people in a professional capacity with nowhere near the organisation and breakdown that you’ve provided here. I’d consider sprucing it all up a bit and selling it as an ebook
Good luck!
J_Sporto Boots’s latest post …Sporto Duck Boots and Shoes
Thanks for the comment! Organization can be tough to stick with, but it definitely helps to have a concrete outline. I haven’t made an eBook before.. any advice? Haha.
Awesomely detailed write up, I designed and manage my own website in a bit of an ad-hoc way, I perhaps need to revist it and take on board some of the functionality and presentation ideas you have detailed to make sure they actually work for my website visitors a bit better. Paul from Eco Homes
Hi Paul! I’m glad you found the write up helpful. It can be hard to keep the whole process in order, but it does help in the long run.
Some interesting takes on the process. Very thorough. Thanks, well worth the read.
Thank you for the comment! I’m glad you were able to get something out of it.
Hi Ryan. I love the breakdown you present on web design. As a not-so-tidy person, I’ve never actually tore the design process in pieces.
Gelato Sundae’s latest post …Gelato Sundae
Haha, being tidy can be a difficult thing to keep up with. That’s why I wrote this when I did. I don’t stick by it 100%, and every project is different. But it does help to have some type of outline to go by!
easy to read, to understand, to practice specially for me, the newbie
thanks Ryan!
I am glad you were able to find this useful! Thank you, and good luck! If you have any questions, you know where to ask!
Very detailed from concept to the final launch, can be followed by any newby because is clearly explained
implicit’s latest post …Change the default browser for Windows 7
Nice concept. Easy!
hi Ryan,
thanks for sharing information with us. Your information is very helpful for web designer. If they follow that rules they will be successful.
Really in-depth post. Do you mind if I use this as a basis for an article I’m working on? It would obviously be original but the way you structured your post and pdf work well and I’d like to emulate that.
Drew’s latest post …Rodz-N-Rydz Restaurant Website
Hello,
As long as your article is original, then I won’t mind. A link back to this post might be nice, too! Either way, I’d love to see your finished article!