6 Phases of the Web Site Design and Development Process

By Selene M. Bowlby in Web Design on March 20th, 2008

6 Phases of the Web Site Design and Development Process

When putting together the main business portion of this site, I wrote an article that outlines the Six Phases of the Web Site Design & Development Process. As an integral part of my own company web site, the article is slanted to how I personally help clients through the process of creating their own site.

Here on the blog, 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 the same.

  1. Information Gathering
  2. Planning
  3. Design
  4. Development
  5. Testing and Delivery
  6. Maintenance

Phase One: Information Gathering

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 understand 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

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 what CMS (content management system) such as WordPress to incorporate, will any contact forms be needed, etc. are discussed when planning your web site.

Phase Three: Design

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

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 the CMS (content management system) like WordPress, interactive contact forms, 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 HTML / 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

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 HTML 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. Some web designers offer domain name registration and web hosting services as well, or have recommendations as to where you can host your site. 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.

Other final details include plugin installation (for WordPress or other CMS driven web sites and SEO (Search Engine Optimization). SEO 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 many WordPress plugins available that further enhance the default WordPress functionality – many of which directly relate to improving your SEO, as well.

There are a lot of details involved in optimizing your web site for 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. ;)

This marks the official launch of your site, as it is now viewable to the public.

Phase Six: Maintenance

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) such as WordPress 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 with 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 regular site backups, WordPress upgrades, additional plugin installation, etc.

Are You Ready to Design (or Re-Design) Your Web Site?

Custom Web Site Design and Development

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.

I follow this same process myself – a process I’ve been using and refining over the last 15 years, through the web sites I’ve designed and developed for my own clients. If you are in the market of a new or updated web site, and like my design style, please don’t hesitate to contact me – I would love to hear from you!


Editor’s Note: This post was last modified on March 11, 2014 to update some of my current methods that have changed since this article was originally posted.

About the Author

About the AuthorSelene M. Bowlby is a web designer and front-end web developer with over 15 years of professional experience in the design industry. As the owner of iDesign Studios she specializes in creating custom WordPress driven web sites for other small businesses. Follow Selene on . more »

Related Posts

Tags

, , , , , ,

Sponsors

  • http://www.goodcustomerserviceblog.com Jason Rakowski

    Good Layout and design. I like your blog. I just added your RSS feed to my Google News Reader.

    Jason Rakowski

  • George

    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.

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @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!

  • http://www.grandmasterb.com Bryan

    @ 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.

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @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. :)

  • Jay

    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…

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @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.

  • http://www.profitpullingprofessionals.co.uk Web design

    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.

  • http://joshuaclanton.com/blog/ Joshua Clanton – Design for the WEB

    This is a great outline of the web design process, Selene. I may have to “steal” it from you sometime. :-)

    Stumbled.

  • Luis

    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 :)

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @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. :)

  • http://www.greyvisual.com Bill Grey

    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!

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @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. ;)

  • http://www.doublespark.co.uk Web Design Peterborough

    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.

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @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.

  • Jacob Behunin

    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!

  • http://kajuah.deviantart.com Karl

    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.

  • The Loon

    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!

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @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!

  • http://goodbarry.com larz

    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.

  • http://www.fubiz.net Fubiz

    Thanks for the tips!

  • Lifda

    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.

  • SeannyB

    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/

  • Drew
  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @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.

  • Pedro

    Great! you invented the Waterfall model.. :)

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @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!

  • Al

    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.

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @Al – The light on dark will probably always be a controversy, LOL.

    THANK YOU so much for the very kind words on my design!

  • panerdante

    …incredible article. I like it..Great outline, layout and the design..its cool..the information is given in full…great job

  • http://blog.3rdbee.com val

    the “Pick Nick’s Brain” website you created really looks good!! ;) I really liked it.. :D

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @panderdante – Thanks! I’m glad you found the article helpful (and that you like the design of the site, too!)

    @val – Thank you too! I’m glad you liked Pick Nick’s Brain – we just made some minor design changes last weekend, too. :)

  • Chris Branson

    I love white/grey on black! I’m doing my portfolio in the black/white look. I love the look and pop black sites can give. Your designs are pure inspiration!

    Chris.

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @Chris – I’m glad you like the site, and thank you for such kind words on my designs! The whole light on dark thing is a big issue… designers tend to love it, but it can be touchy for others. It’s a fine line, I guess – but one I was willing to push. ;)

  • http://www.abixalmon.com abiXalmon

    This is one of the best web development article i have read online! It gave me solid idea on planning web development phases, Thanks a lot!

  • http://www.idesignstudios.com/blog/ Selene M. Bowlby

    @abiXalmon – Thanks for the kind comments on the article! I hope that you find it helpful in your own web development projects!

  • http://www.adgcreative.net +0ny

    Hi,

    I read your article and think that you have some excellent high level information here. I’d be very interested in hearing your viewpoint in the process between design and development.

    When showing a photoshop comp, do you use anti-aliased text for what will be html text?

    Do you ever work on larger efforts in which you are not designing and developing the site but are working with a more nuts to bolts backend /application developer?

    I have very similar professional experience to you and would love to know your stance on communicating technical restraints on original designs.

    Kudos on the beautiful blog and great info.

  • http://garmahis.com Michael Garmahis

    Here are my thoughts about Web design process

  • http://www.cenbank.org Eme

    Reading through most of the comments, seem to suggest we designers know what todo but really cant lead the process professionally. I stumbled on your blog and appreciate the write up (Actually need it as an in put for a very serious RFP) . I also liked the black background.

  • manish

    thanks for such cool tips this helps me lot in developing my college website and also for preparing viva.

  • http://www.TheItValley.com Ecommerce Don

    I recently started web development, and this post really helped me a lot to understand the phases of web development.

    I am really thankful to the author for such a great help.

  • http://www.siliconwebsolutions.com Jacklee

    The 15+ minute queue for Browsershots was plenty of time for me to check out the Wave and TAW accessibility checkers. I think TAW did a more thorough job of ripping out my heart. However, I found Wave easier to understand. Both tools made me want to serve text-only documents in the future. Thanks for the list!

  • http://www.lyndonabing.com lyndon

    Thanks.. great article.. i just searching before of how to deal with orgranize and planning for website development. I Guess this is so good as far i’ve been reading also others article.. nice blog site, clean and readable.. yeah its bcoz u r a veteran in web design..:D peace.. thanks again..

    ~lyndon

  • http://www.superheromarketing.net Doug

    Great outline for clients and new designers especially.

  • http://sexybookmarks.net Josh

    I love the article, and think that you’re spot on in regards to a perfect world…

    However, in the real world relationship of Client/Developer there are all these little subsections that you seem to have omitted somewhere between steps 1 and 4 where the client continues to change their mind about how they want things to look and/or work.

    This is turn leads to a number of rewrites to the overall plan and thus increases the amount of workload.

    There are also the countless clients who quite honestly don’t have a God given CLUE what they want or how they want the site to look! (I HATE THESE)

  • Sammie

    I like this article-type blog. I read this for my Advanced Web Design class today and I thought it was very well written and I love the dark background and light text, its easy to read. :)

  • Inder

    I have enjoyed reading your article – more like how you go about a project, be it technology based or development of a product. Having been follower of processes within business environment, I like this systematic and well organized approach to making a website. I am sure many a times, you must be ending up explaining to your clients what each phase meant!! Well done Selene – keep it up!

  • http://cyborgit.in Jaivardhan Joshi

    A good post but posted on a “hard to read page” :( . I think you missed the user-acceptance testing here !

  • Kathir

    Hello Selene,

    Your article is pretty neat and clearly stated all the points. In fact, I wanted share my NON-IT staff about the Web Development Workflow. Believe me! This is what exactly I wanted to share. It is quite simple but very effective understanding. With your permission, I would like to share the info with my staff as well.

  • http://www.thinkkeno.com Keno Vigil

    Great outline! Thanks!

  • Dan Simpson

    Hello,

    I’m a web design student and referenced your site on best steps for planning a website. I love your work, amazing web skills and a hottie!

    so I guess that makes you a web hottie :)

  • http://www.socfx.com Lou Sparx

    Great article. Fully bookmarked so I can digest it all later but from what I skimmed.. I followed a similar design process with my own blog.

    I try to have a system for everything I do.

    Lou

  • http://scvinodkumar.wordpress.com scvinodkumar

    Good, i am going to follow the steps in upcoming projects. Thanks

  • http://www.metacomdesign.com/blog Ryan Cowles @ Metacom Creative

    It’s really astounding how many clients wish to skip right by steps 1 and 2, and expect to see a design right away, haha. Communication is key, and if you can communicate the basic points made in this article to a client, you’re a lot better of!

  • Josh Stewart

    Hi Selena, thanks for the great article. To add to further inhance it, it would be great if you could publish your base contract that you mentioned above.

    Getting the contract right from the start is where a lot of newbie designers fall down on.

  • http://www.intenseblog.com Jennifer R

    In 6 parts you were told I think the part number 6 is the most hard part to do :)

  • Ceph

    Great article. Very helpful indeed.

  • http://www.ceoofmydreams.com AAA

    Really like the post. I have been in the middle of keeping one foot in and one foot towards the future. I always give myself an excuse saying that I am too busy to work on my own project after a long day at work.

    Also at work I am not happy at all. It isn’t awful, but I feel I could be doing much more. When does it become too far trying to hold on to something while working toward something else? Do you have to wait until you are successful at something else before you can move on to the next project?

  • http://www.teatus.com Titus

    Nice article… I used this article becomes my guide to do my job in designing websites. Thank you very much…

  • Dave

    Hi Seleny… I’m a freelancer. I have just started taking projects from clients. This blog really helps me a lot. it’s kinda flow chart for your project.

    My question is, is it a good idea to show clients ready made templates rather than a customized design. ! (in 3rd process). And then may be we can design similar template for client or simply just buy the template and customize it according to the needs of clients ? I’m not sure.

    Thanks for this article…

  • http://www.csi-literacy.com Neale

    One comment on the subject of light colors (such as white) reversed out of a dark background – they are hard (and tiring) to read. I believe there has been some research on this too, Selene your light grey is a good choice – sophisticated yet readable, Neale

  • Divya

    Hi, i liked the option provided on the top of page for changing themes…. brilliant !!!!!

  • http://jmzolman.com Joseph Zolman

    Nice post! I been using WordPress and Joomla for my self, this helps me with my process for opening the door to get WordPress and Joomla web site clients. Thanks Much!!!

  • http://www.leytonjay.co.uk/ Leyton Jay

    Nice post, very helpful. I’ll be talking to my manager later about how my team and I can get into phases 1 and 2 as we currently only work on 3-6.

    A lot of the phase 1 and 2 work is done by our managers and marketing people and I think as designers and developers we should be involved too, if not for a better product then for my career progression at least.

    Cheers!

  • http://www.yorbalindarealestatepros.com Eric Watts

    Terrific outline of the web design and development process! Am actually just begining my first trial attempt at designing my own website, doing everything from conception to end product myself, so, thanks for the read and the information!

  • http://www.web-design-expert.com/ Harry

    As a web designer these information are very helpful to me. And the pictures are really awesome. Thanks for sharing this.

  • Paul

    The Planning stage is –> way too brief <— much more research and design consideration needed and possibly more questions for the client. UX design rather than just aesthetics to be considered.

    @ Gorge – it's clearly just a problem for you! I like it, as it seems everyone else does also. There IS NO golden rule as a designer as you suggest

  • maha

    thanks a lot..i used it for my project!! :) was very helpful :)

  • http://www.tacticalconsent.org Andy

    @George “well-known readability problem” A lot of things are “well-known” but are complete fictions or at least debatable. If legibility was the real reason you have a concern with reversed type, then consider the fact that many folks with really bad vision actually perceive reversed text easier…Think macular degeneration or glaucoma.

  • Anup

    Hi Selene,
    Nice Post really helpful.I am started as a bussiness analyst in web
    site development company . Client required entire process in flow charts now days…how we can make that easy and appropriate..

  • Eduardo

    Hello Selene,
    I’m from Brazil and i really like your article!

    Best regards,

    Eduardo.

  • Leonard

    Hello Selene,
    I’m from Philippines and i really like your article too! Please add me in facebook. <3

    take care,

    Leonard.

  • http://www.highergroundcreative.co.uk Phil

    Found a link to this article on another post of yours on Freelance Folder. Again, thanks for the tips, very useful! I’ll be sure to follow your step-by-step guides and share them with my clients…
    Oh yes, and I agree with some of the comments above, the light text on dark background works quite well for your site, but I see you have now developed a ligher version as well?

  • http://learning-php-tutorials.blogspot.com/ Javier

    That is a nice compilation.I only want to say that SEO is the most difficult task in the Website Development process as it requires a lot of patience which most of the new webmasters lack.

  • http://www.netprofitmarketing.com Jared Detroit

    Wow, lots of replies but what a great post. I see most self-proclaimed web designers forgetting about your whole post with 6 steps and only 3 and 4 for Design and Development. Beyond that, most people don’t worry about the information gathering, testing or anything else that creates a complete web design. It’s good to see some designers with some actual process behind their work. Great post. You can really see you put some effort in this one.

  • http://www.memoryimprintstudio.com Tony

    A very thorough step-by-step guide for web site design and development. I am looking forward to reading your SEO and SES post. Thanks.

  • http://web-design-process.blogspot.com Enrique

    Wow! I have to admit this is a great website. A great web design is very important to any online business. It is your store front just like any local store or business you might visit in your town. No one would like to visit a store that looks like something that would come out on Texas Chainsaw Massacre would they? At least I wouldn’t. First impression is very important. Your content is short, straight to the point and very informative. Keep up the good work.

  • http://chellemboyee.com Chellem

    Good points you’ve illustrated. It’s has been very helpful for me. Am actually doing software engineering at the university.

  • http://todaysadmin.com Zarina Hussain

    Very informative article. I completely agree that a web site is successful, when goals and purposes to build them are accomplished. Thanks for sharing.

  • http://www.5150Studios.com.au Mick Davies

    Awesome post Selene! I find the whole website creation process is so much smoother when the client is kept informed and communication is close between the developer & client.

    Cheers Mick

  • http://www.lefthandedproductions.net Heather Glaser

    Thank you so much for all this wonderful information on the steps of website design and development. I have been trying to refine our process to make the steps easier for our clients and this blog has giving me the detailed information needed. I’ll have to check back in to let you know how our newly refined process work!! Thanks a million.

  • http://www.cyberzoo.co.za frank zoid

    Lovely post, definitely forward this informative article. Thank you for using your experience to create and make helpful stuff like this info. Best John

  • http://ksworld.in sarath krishna

    very good Layout and design.i luv your blog.

  • Eduardo Zapata

    Great post, important to designers think outside the box. That´s something that not many persons here in Brazil think.
    *Great style of your site. (one question: what font you use in “Hello! Welcome to iDesign studios”, in your potfolio page?)

    Keep on it!

  • http://tuc-webhost.com/blog/autoresponder/ kester

    you real hit the nail on the head this is the article i have been searching for— quite easy to understand.
    Keep it up Selene.

  • http://www.slow-days.com simon J

    Good, straight forward article – we sometimes need to be reminded of the simple stuff when bogged down in a project or overwhelmed with information. Thank you Selene.

    P.s. The site design looks good to me. Nice subtle texture to the background. How’s it done?

  • garrison

    george is mean! and whats the point in getting on a website like this to insult somebody u have to have no life so how bout you just go tweet or something

  • Renu Mishra

    Very informative article!!! Helped me a lot in my work. Thanx a ton 4 sharing.

  • http://www.anushaworks.wordpress.com Nusaa

    Ah, such a well written article! :) Very neat and precise. Thank you!

  • http://nabinonline.com Nabin Ghimi Ray

    Thanks for this awesome article. As i was searching for web designing phases i found yours. It is helping for my web project for semester end project.

  • Muhammad Anas

    This WebPage is looking awesome!!! I am a Student of Software Engineering from University of Bradford U.K and doing my 2nd Semester. I find this webpage quite helpful 4 me in Future!!!
    I remain interact with you Selene…..
    Regards: Anas

  • http://mattabrahams.com.au Matt

    Nice article, very useful for clients

  • Praveena

    Hey Selene,

    Great work, especially the design what you have done. I have gone through your portfolio and found marvellous jobs there too. :)

    really appreciate your works and it made me a fan of urs! ;)

  • Namal Sri Lanka

    great ideas. Thanks for sharing. And great design.

  • http://www.accentfurniturecentral.com Michael

    Good, straight forward article – we sometimes need to be reminded of the simple stuff when bogged down in a project or overwhelmed with information. Thank you Selene.

    P.s. The site design looks good to me. Nice subtle texture to the background. How’s it done?

  • prince

    hi, your blog got the exact info what I was looking for, thank you so much for the post..

    Prince

  • http://www.spgraf.com Jack J

    I am writing a proposal for a project. This article was very useful in helping me fill in some of the gaps in the section where I explain the process. Thanks so much for sharing.

  • http://hiddenship.com Julian

    I liked so much the images you used to decorate your posts. Can you suggest where to get these kind of high quality images? Please? Thanks!

  • http://www.sourabhagrawal.com Sourabh Agrawal

    First of all the design of your website is very nice, neat and clear. I just love that simple design. And the article you publishes is very good, short, straight forward and to the point. Keep it up the good luck.

    Sourabh Agrawal

  • http://www.greenesweb.com Amit Sharma

    The overall look of your website is extremely important. Even before reading a single line of text, visitors will form a opinion about your organization based on how they interpret the visual aspects of your website’s design – colors, shapes, density, hardness, softness, animated, static, type-faces, relative sizing, etc, etc.

  • Josh

    Thanks for the words of wisdom.
    I also love the layout and design structure of the site. Simple yet effective.

  • T

    tjkgewvmascX

  • Eric

    i want to be your apprentice hehe :D

    (seriously)

  • Itumeleng

    Thank you so much for this, it really helped me a lot. May you continue growing stronger and helping others.

  • a real person

    spammy crap

  • Dev

    Nice Tutorial Really Appreciate that

  • Aff_Web

    Superb article, that is exactly how it is! Apart from you missed out the amount of coffee web designers drink!!

  • Bhadresh Arya

    Thank you for the article.

  • Dharmendra Pardhi

    Excellent…

  • Veeru Singh

    Great ….very useful article.

  • Siva Karthickeyan

    Super …
    Thank you so much for this, it really helped me a lot. May you continue growing stronger and helping others.

  • Robert C Designer

    Web Design & Content Planning with Robert Cipolla Graphics

  • http://www.lauruss.com/ Tarquin Hall

    Good thing that you shared this kind of information that would help a
    person in having good things just to make their work perfectly.

  • http://www.idea2psd.com/ John Abay

    I enjoy reading your blog Thanks for web design new ideas .

  • Nasir Khan

    Awesome..Found the same thing that i was looking for to get in my knowledge…