6 Phases of the Web Site Design / Development Process
Posted by Selene M. Bowlby on March 20th, 2008
About a year ago, I wrote an article for the main site that outlines The 6 Phases of the Web Site Design & Development Process. As part of my business web site, the article is slanted to how I personally help clients through the process of creating a web site.
Here, however, I wanted to create a more generalized post. Same basic idea, however this version can be utilized by anyone, regardless of who they hire to design their web site.
I hope this helps when considering building your own site!
The Web Site Design and Development Process
There are numerous steps in the web site design and development process. From gathering initial information, to the creation of your web site, and finally to maintenance to keep your web site up to date and current.
The exact process will vary slightly from designer to designer, but the basics are generally the same.
- Information Gathering
- Planning
- Design
- Development
- Testing and Delivery
- Maintenance
Phase One: Information Gathering
The first step in designing a successful web site is to gather information. Many things need to be taken into consideration when the look and feel of your site is created.
This first step is actually the most important one, as it involves a solid understanding of the company it is created for. It involves a good understanding of you - what your business goals and dreams are, and how the web can be utilized to help you achieve those goals.
It is important that your web designer start off by asking a lot of questions to help them undersand your business and your needs in a web site.
Certain things to consider are:
- Purpose
What is the purpose of the site? Do you want to provide information, promote a service, sell a product… ? - Goals
What do you hope to accomplish by building this web site? Two of the more common goals are either to make money or share information. - Target Audience
Is there a specific group of people that will help you reach your goals? It is helpful to picture the “ideal” person you want to visit your web site. Consider their age, sex or interests - this will later help determine the best design style for your site. - Content
What kind of information will the target audience be looking for on your site? Are they looking for specific information, a particular product or service, online ordering…?
Phase Two: Planning
Using the information gathered from phase one, it is time to put together a plan for your web site. This is the point where a site map is developed.
The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable. This serves as a guide as to what content will be on the site, and is essential to developing a consistent, easy to understand navigational system. The end-user of the web site - aka your customer - must be kept in mind when designing your site. These are, after all, the people who will be learning about your service or buying your product. A good user interface creates an easy to navigate web site, and is the basis for this.
During the planning phase, your web designer will also help you decide what technologies should be implemented. Elements such as interactive forms, ecommerce, flash, etc. are discussed when planning your web site.
Phase Three: Design
Drawing from the information gathered up to this point, it’s time to determine the look and feel of your site.
Target audience is one of the key factors taken into consideration. A site aimed at teenagers, for example, will look much different than one meant for a financial institution. As part of the design phase, it is also important to incorporate elements such as the company logo or colors to help strengthen the identity of your company on the web site.
Your web designer will create one or more prototype designs for your web site. This is typically a .jpg image of what the final design will look like. Often times you will be sent an email with the mock-ups for your web site, while other designers take it a step further by giving you access to a secure area of their web site meant for customers to view work in progress.
Either way, your designer should allow you to view your project throughout the design and development stages. The most important reason for this is that it gives you the opportunity to express your likes and dislikes on the site design.
In this phase, communication between both you and your designer is crucial to ensure that the final web site will match your needs and taste. It is important that you work closely with your designer, exchanging ideas, until you arrive at the final design for your web site.
Then development can begin…
Phase Four: Development
The developmental stage is the point where the web site itself is created. At this time, your web designer will take all of the individual graphic elements from the prototype and use them to create the actual, functional site.
This is typically done by first developing the home page, followed by a “shell” for the interior pages. The shell serves as a template for the content pages of your site, as it contains the main navigational structure for the web site. Once the shell has been created, your designer will take your content and distribute it throughout the site, in the appropriate areas.
Elements such as interactive contact forms, flash animations or ecommerce shopping carts are implemented and made functional during this phase, as well.
This entire time, your designer should continue to make your in-progress web site available to you for viewing, so that you can suggest any additional changes or corrections you would like to have done.
On the technical front, a successful web site requires an understanding of front-end web development. This involves writing valid XHTML / CSS code that complies to current web standards, maximizing functionality, as well as accessibility for as large an audience as possible.
This is tested in the next phase…
Phase Five: Testing and Delivery
At this point, your web designer will attend to the final details and test your web site. They will test things such as the complete functionality of forms or other scripts, as well last testing for last minute compatibility issues (viewing differences between different web browsers), ensuring that your web site is optimized to be viewed properly in the most recent browser versions.
A good web designer is one who is well versed in current standards for web site design and development. The basic technologies currently used are XHTML and CSS (Cascading Style Sheets). As part of testing, your designer should check to be sure that all of the code written for your web site validates. Valid code means that your site meets the current web development standards - this is helpful when checking for issues such as cross-browser compatibility as mentioned above.
Once you give your web designer final approval, it is time to deliver the site. An FTP (File Transfer Protocol) program is used to upload the web site files to your server. Most web designers offer domain name registration and web hosting services as well. Once these accounts have been setup, and your web site uploaded to the server, the site should be put through one last run-through. This is just precautionary, to confirm that all files have been uploaded correctly, and that the site continues to be fully functional.
This marks the official launch of your site, as it is now viewable to the public.
Phase Six: Maintenance
The development of your web site is not necessarily over, though. One way to bring repeat visitors to your site is to offer new content or products on a regular basis. Most web designers will be more than happy to continue working together with you, to update the information on your web site. Many designers offer maintenance packages at reduced rates, based on how often you anticipate making changes or additions to your web site.
If you prefer to be more hands on, and update your own content, there is something called a CMS (Content Management System) that can be implemented to your web site. This is something that would be decided upon during the Planning stage. With a CMS, your designer will utilize online software to develop a database driven site for you.
A web site driven by a CMS gives you the ability to edit the content areas of the web site yourself. You are given access to a back-end administrative area, where you can use an online text editor (similar to a mini version of Microsoft Word). You’ll be able to edit existing content this way, or if you are feeling more adventurous, you can even add new pages and content yourself. The possibilities are endless!
It’s really up to you as far as how comfortable you feel as far as updating your own web site. Some people prefer to have all the control so that they can make updates to their own web site the minute they decide to do so. Others prefer to hand off the web site entirely, as they have enough tasks on-hand that are more important for them to handle directly.
That’s where the help of a your web designer comes in, once again, as they can take over the web site maintenance for you - one less thing for you to do is always a good thing in these busy times!
Other maintenance type items include SEO (Search Engine Optimization) and SES (Search Engine Submission). This is the optimization of you web site with elements such as title, description and keyword tags which help your web site achieve higher rankings in the search engines. The previously mentioned code validation is something that plays a vital role in SEO, as well.
There are a lot of details involved in optimizing and submitting your web site to the search engines - enough to warrant it’s own post. This is a very important step, because even though you now have a web site, you need to make sure that people can find it!
Note to self… write post on SEO/SES. 
The Bottom Line
All in all, your web designer should work closely with you on a very similar process to this one. A good working relationship with your designer, including an open line of communication, is important to ensure they are creating a successful web site that will help your business grow.
Shameless Plug
I’ve personally been designing and developing web sites for a full decade now. So… if you’re ever in need of a web site and happen to like my design style, please don’t hesitate to contact me! You can also read more on the specific details of my own personal web design process on the FAQ page.
By the way… if you found this article helpful - and I hope you have! - please subscribe to this blog, because there are more informative posts on the way!
Category: Business, Web DesignTags: Business, design process, Web Design, web development, web site, what to expect
March 20th, 2008
Good Layout and design. I like your blog. I just added your RSS feed to my Google News Reader.
Jason Rakowski
March 23rd, 2008
I find it incredible how self-appointed web-designers and developers insist on writing white on black. They should be the first to know about the already well-known readability problem using this combination.
March 23rd, 2008
Very cool article, thanks !
March 23rd, 2008
@Jason - Thanks for the kind comments! I’m glad you like the design as well as the blog itself. Thank you for subscribing!
@George - I’m sorry you feel that way. Design of course is completely subjective. It’s all about personal opinion, and what I think works for me, you might not think works for you, etc. Very subtle, but I use light grey type, which is less jarring than pure white on black.
The previous design was black text on a white background, so I wanted a change - in this case, one that matches the design of the main site (and light on dark is very good for designer portfolios, as the dark background helps portfolio pieces pop… in my case web design screenshots, but this works well for photography or illustrations, etc. too.)
I do appreciate your opinion, though, and will keep it in mind for future re-designs of the site.
@Polo - I’m glad you like the article!
March 23rd, 2008
@ George - Personally, I think Selene’s design works perfectly for the look she’s going for. I’ve never been a huge fan of lighter text on black backgrounds, but she pulls it off perfectly. The complimenting colors are great…the pink and green work!
I enjoyed this post, so I subscribed to your feed and dropped by EntreCard for you too. Keep up the great work.
March 23rd, 2008
@Bryan - Thanks for “sticking up for me” in response to George’s comments!
I’m glad to hear you think the colors work - I actually have heard from several people that although it is usually difficult to read light on dark, that this particular combination seems to work. To each his own, though…
Thanks again! I checked out your site and dropped an Entre Card on you, too.
March 24th, 2008
its really great to have a such a good information on webdesign
March 24th, 2008
Rarely have I ever seen a site development go this smooth. On paper, yes, these are good steps.
In practice, somewhere in step 3 or 4, you get some new information and that causes more work back in 2 and 3, leaving little wiggle room for 5. By the time 6 comes up, your client wants to start at 1 again…
March 25th, 2008
@web designings - Glad you like the article!
@Jay - Unfortunately you are very right about that. I should have included a disclaimer that this is how it “should” go.
Although, it is important to have a good system in place to eliminate going back and forth between stages - especially going from development back into design.
What I personally do is make sure that the client fully approves of the design before continuing into the development stage. I don’t start coding any html until I receive final approval on both the home and interior page designs.
This is where a good contract comes in - to protect both you as the designer, as well as the client. I have been burned in the past - haven’t we all?
- and now specify a certain number of designs and revisions that are included with the starting price. This way the client knows, right off the bat, that if we go beyond the agreed upon number of unique designs or rounds of changes, etc. that it will be billed as an additional charge.
Similarly, I also include a clause that there will be extra charge if significant changes are requested to a previously approved design. I actually had this happen to me recently. Becuase of the up-front and very open line of communication that we have, this client was more than ok with the extra charge, since they knew that they had already approved the design (and we were well into development) when they requested a fairly big design change.
I guess overall, it’s important to set the expcatations and “limits” up front so no one is disappointed down the line. Yes, extra work for the designer, but as long as they are compensated for their time, and NOT taken advantage of, then sometimes you just have to go with the flow.
March 25th, 2008
The six phase information is very informative for a web designer. I would like to add the flavor that a web design is one of the main areas where you can invest money in your business, it doesn’t matter if you have a small shop with one employee, you can still be an expert if you are standing at top at search engines.
March 25th, 2008
This is a great outline of the web design process, Selene. I may have to “steal” it from you sometime.
Stumbled.
March 25th, 2008
Great article!
I like how this article is aimed at the client, but provides great ideas for us web designers as well.
I certainly will use some of these ideas in future projects, as well as transmit them to clients. I love the idea of information gathering being the first step - many clients tend to give you only bits of info at the beginning.
Thank you for writing a great easy-to-read article
March 25th, 2008
@Web design - I definitely agree with you that a web site is a very good business investment. I don’t think there’s as good a way to get quite so much exposure. Except maybe national tv commercials which must cost an insane amount of money - much more than a web site…
As a consumer, when I am considering different companies for a particular product or service that I’m interested in and my decision is down to two companies… one with a web site, and one without… 9 times out of 10 I end up going with the company that has the web site.
I almost always pick the company with a web site, because I’m able to learn more about the company itself, and/or the product or service I’m interested in, etc. I’m sure I’m not the only consumer who thinks along similar lines, too. So yes, I’m a web designer, so I might be biased, lol, but overall, I do think it is a very worthwile business expense. One that any small (or large) business will be able to reap the benefits from for years to come.
@Joshua - So glad you like the article - Thank You for the Stumble!
@Luis - I’m glad you like the article, too! I did write it with the client in mind, so I’m glad to see that it’s coming in handy to other designers, as well.
March 25th, 2008
Very Thoughtful article, Selene. I’m sure this will help any potential client to understand the process better and give them confidence that you’re the gal. Congrats on taking the time to do it right!
March 25th, 2008
@Bill - Thanks for your kind words on the article! I do hope that it helps potential clients get an idea of what’s involved in the process. And if they decide I’m the gal for the job… well, that’s even better.
March 26th, 2008
Hi, Great post, but I am surprised to see SEO only coming in at the 6th stage. I often find it beneficial to include SEO in the concept/structure/planning stage.
March 26th, 2008
@Web Design Peterborough - Glad you like the post! You know you are right about the SEO… so far, it’s something that my own clients have not been interested in until after the site is built, which is why I put it at the end.
Although now that I am building sites with validated code, I do work some basic SEO into the mix during the development phase (ie. proper headings, as well as alt / title tags for images, etc.)
It’s just been my own experience that the clients don’t provide the meta tag info until the end. Of course, things such as the sitemap files need to wait until the end - sitemap.xml in particular, but there are several formats… Obviously the actual submission must wait until the site is complete, as well.
You are correct, though - that in building the site the designer/developer needs to be conscious of at least the basic elements of SEO, so the site is built correctly from the start.
Thanks for giving me something to think about - I might have to refine the process a little bit to incorporate SEO better.
March 27th, 2008
Hi there. I read your article here, and thought it to be very insightful. I’ve been designing websites for 6 years now, and even I had something to learn.
Thanks for the Post!
March 27th, 2008
I enjoyed reading this article immensely, it was very interesting and enlightening to learn where and how the process professionals use to develop pages.
@George; Consider an eye test, there is nothing that I can find wrong with the layout of the style she used, nor can I see anyone having similar problems. Perhaps it is just you, so try this; highlight the text you want to read, often that dulls the surrounding area and makes it less sore on the eyes to read.
March 27th, 2008
Good article overall, but your planning phase is too brief. A lot of work should be done here like sitemap, wireframes, content inventory, SEO research, functional/technical specs, etc. Unfortunately, the planning phase often gets shafted on projects of all shapes and sizes in various industries.
P.S. Nice blog design!
March 28th, 2008
@Jacob - Thanks! I’m glad I was able to give you some additional information to consider for your own web design process!
@Karl - Thanks so much - I’m glad you enjoyed reading about the process. And thanks for “backing me up” on the readability issue. That is a good suggestion you have for George (one that I’ve done on the past on other sites that I really have found difficult to read!)
@The Loon - I’m glad you like the article, and my blog design, too!
I do reference the sitemap creation, which is a major step. You are right that there is more in-depth work involved… this was primarily intended to serve as an overview of the process (especially for non-designers considering hiring someone to create a web site for them).
I definitely agree that the planning stage often gets overlooked, or not focused on as much as it should be. It sounds like you have a great setup for planning out your sites in advance, though!
March 29th, 2008
Great article Selene.
I can’t stress enough that information gathering and planning should come before design, as content should drive design and not the other way around.
March 30th, 2008
Thanks for the tips!
March 30th, 2008
Nice article. I had to subscribe to your rss to to read it though. The white or even grey text on black is very hard to read.
March 31st, 2008
Nice and detailed. Another article which discusses the phases in building a website in six steps more in terms of development here:
http://www.cheb.com.au/how-to-build-a-website-design-websites-easy-steps/
April 1st, 2008
You mean this?
http://en.wikipedia.org/wiki/Systems_Development_Life_Cycle
April 1st, 2008
@larz - Thanks! You are so right that the planning stage is crucial. I’ve worked on more than one site where the client has changed their minds on the navigation well after we were into development.
Often times, you or the client might think - oh, it’s just a link (or ten
) - but it does influence the design - as well as development. Many times you base the design on the number of links outlined in the planning stage - 5 links could easily fit across one line in a horizontal format. But 10 links would likely need to go in more of a sidebar setup.
A horizontal or vertical navigation system can make a huge impact on a site’s design. That’s why it’s important to settle on such details early on in the process.
@Fubiz - Thanks! I’m glad you like the article!
@Lifda - I’m glad you like the article, too! Sorry about the light on dark text.
It is interesting to see opinions on this. For the most part it seems to not bother most people, but there are a few who have difficulty reading it. Something to keep in mind for future re-designs. I appreciate the feedback!
@SeannyB and @Drew - Thanks for those links! As I guessed, this does indeed seem to be a fairly universal process. The specifics do vary from person to person, but the foundation is primarily the same.
April 3rd, 2008
Great! you invented the Waterfall model..
April 7th, 2008
Thank you for this summary about the webdesign process.
My option about this article it’s a nice summary, but much more details are not mention
Ralph
April 7th, 2008
@Pedro - LOL, I admit I had to google that one.
That’s pretty cool, though!
@Ralph - Thanks. It is definitely meant to be a summary and not a step by step guide, though. It’s a pretty long post to begin with, LOL.
Although maybe an idea for a rainy day (or week?) would be to expand upon this and post individual articles with additional details for each of the 6 steps. Definitely something to think of for some future post ideas!
May 2nd, 2008
I’m not enjoying the white on black and tiny text myself but readability not withstanding this is one of the most gorgeous and charmingly idiosyncratic layouts that I’ve seen in a while. It certainly suggests someone on top of her game. So stop hating.
May 3rd, 2008
@Al - The light on dark will probably always be a controversy, LOL.
THANK YOU so much for the very kind words on my design!