This process is a documented outline of all the steps that are to be followed from the beginning to the end of the development of the website. The structure separates the work into categories, and later breaks them down into sections, tasks and resources that will be used in the process of the design.


Just like in any project, the planning part is the most vital because this is where all the activities that are to be done are outlined. In this stage, the input of the client is of utmost importance, and the designers have to be attentive not to miss a single detail.

Analysis of the needs
This entails the goals of the clients, the targeted customers and all the information that can possibly be gathered to enhance the development of the website. Some clients are at times ready with their designs of the site they want, but that is not to say that you can go a step further and offer your advice based on the experience you have in web designing.

Project Charter
This is a document that contains all the gathered information that has been agreed on, the document is not technical and it is used as a guide through the entire project.

Site Map
In the process of designing, the designers might stray a bit, and this is when a site map comes in handy. It provides quick information that will help the designers to fix errors they may have done. This document helps in the organization of the process.

Copyright, Roles and Financial Points
This is a very important section of planning. It includes various things like the terms of payment, project timelines, copyright and ownership, clauses of project closure and termination. This document is very vital to cover you in case there is a misunderstanding, and it can work against you if you do not deliver as per the agreement of the contract.

Server Access  and Folder Structure
The general information that should be validated includes the username, password, FTP host, login authentication, configuration of the database and currently installed framework languages.

Point out the required resources and software
Prior to determining the third-party requirement s that you may want, it is prudent to know the source where you can get them. According to the magnitude of the project, you may require sub-contractors and extra resources like software. Include them in your budget of the project and charge them accordingly.


This entails the implementation of the plans in the initial stages of the project. The main tools that you will have are the documentation of the site structure. The best of the plans is the visual documentation. After a well-calculated design phase, the website will start to shapeup, although it will be lacking most of the features and content.

Element Planning Design and Wireframe
This is the point at which the website will start to come alive. Depending on the information that you gathered from the client, you can then design the layout by the help of a Wireframe Pencil. You do not have to worry a lot if you do not have such tools because you will get assistance online.

Mock-ups on the basis of analysis of the needs
Technology makes processes easier, and in this case, you will benefit from Photoshop to design the mock-ups. It will help you in the organization of the layers. As you progress it will allow you to get rid of what you do not require as you tweak your coding.

The Cycle of Review and Approval
This is a process of checking the mock-ups repeatedly, making changes that you find necessary. The procedure should go on until the designer and the client agree that the design has shaped up as they intended it to be. You should capitalize on making changes at this stage, instead of waiting until you have coded your design because any changes at that level will be challenging.

Remove Mock-up and code valid XHTML/CSS
When it gets to the time of coding, get rid of the Photoshop mock-up, and start designing the HTML and CSS for the main design of your project. The things that will follow later are jQuery and interactive elements. At this level you should only concentrate on coming up with the visuals. Always remember to do a validation of your code before you move to the next section or level.


This is the point where most of the programming works lies. You will need to load your content and any that may be provided by the client. Take a lot of care in organizing the code and commenting it. Keep referring to the details of planning as the websites shapes up after every step. Keep in mind that you should test your work constantly, as it will help you to avoid future problems.

Build development framework
At times web design requires unique features that will make you stray from the normal plan. You might be using ASP/PHP, Ruby on Rails or some CMS, but at some point, you will need to get realistic and implement the engine and power it up. Any other setup or configuration that you do to your system will not be a surprise to the serve and you will enjoy smooth installation and setup.

The use of code templates for different pages
A standard website has a number of pages, which include Home page, the body or general content, blog page and the feedback and contact page. These pages can be created as templates for quick fixing instead of designing them in every project. It is a perfect practice that will save you time later.

Interactivity of features should be tested in development
This is the point at which you put the fancy features of the website. It is better done before the addition of the static content, so that you can take advantage of the clean workspace. At this stage, many developers will want to go live with forms and validation.

Fixing the Content
At this point, the developers have to struggle to fill in the content provided by the client, or content writers. The process is mostly boring but it has to be done. It can be tedious but you have to be very alert to ensure that you fit in the right content where it is required.

Testing and Verification of Links
It is the perfect time for the review of the whole website. Your file manager will guide you as you go through all the pages that you have designed. Ensure that all the features are working perfectly. Ascertain that you have not missed anything visual or functional.


Launching is the process of releasing the website for viewing to the public. The final designs will require to be polished through the testing of the functionality and interactivity of the various features that make up the website. The user experience has to be considered and at this point, the designers will want to confirm that the measures they too will give the users and unforgettable experience that will make them make repeated return visits. The first main step in this phase is to move the site to its permanent server. Testing again after moving the website is crucial because different servers have features that are not the same.

If you are not time constrained, then polishing will be very important for the final product. This is because you will have the chance to go through the whole project improving the parts that need improvement. The final product should make you as proud as the owner.

Shifting to the live server
This means shifting it to the site where the owner is hosting it. This is where you do the final tweaking when the website is in the state of functionality. Ensure that the client knows that you are doing that test so that together you can give it a thumbs up if everything is okay, or fix whatever issues that may arise.

The Test
To do a final diagnosis you will use the available tools at your disposal. These tools are broken-link checkers, spell-checker, validators, website health-checkers and such other tools. It is good and comfortable to personally learn that an error exists than hear it from the end-users or the client.

Cross-browser verification
Do another final round to ensure that the website can run on the different browsers available, such as Firefox, Safari, Opera and Internet Explorer to name a few.


At this juncture the business comes in to the picture when you start the handing-over process. By this, you will be giving instructions and training the users on different things to make the site run smoothly. The clients should always be left in a state that they can work on their website without a hitch. Predict the questions that the clients may ask so that you can offer a conclusive answer that will work and leave them satisfied. Do not ‘close the door’ behind you when you are done, this is because the clients will definitely need your assistance at one point or another when they are doing maintenance. If you have not communicated to them about the maintenance charges, this is the right time to do it so that when they give you a call they can be ready to pay you.

Handing over
For starters, you should ensure that the client is comfortable with the work that you have done. You will definitely have met all the contractual mandates before you decide to close the project, and this should be done in agreement with the client.

Documentation and Source files
The documentation that you should provide and the point of termination are a softcopy of the site map, and details of the resources you have used in the framework. The client will be comfortable with that to avoid surprises later on. The same will be very helpful if they are to work with a different website developer in future.

Finalization and documentation
When you hand over the documentation, the client should sign in the relevant areas to show that he or she has been satisfied by the work that you have done. Clients will always appreciate if you come back maybe after a month to check the progress of the functionality of the website. This gesture maintains a very healthy relationship.