Skip to content

Example of website design and development

The Web Design Process

Large Projects

Our web design projects typically take a six phase approach. Each phase must be signed off by the client before the next phase begins. During website development, a special demo website is created where the client can watch his or her site take form. This demo site is often updated daily if not hourly during the heaviest development time.

Phase I. Discovery

The purpose of this phase is to determine the scope and specifications for the website. During the initial free consultation, many questions are asked to get a feel for the client’s desires and expectations, and sometimes an on-site visit is made. A detailed Website Development Plan is drafted based on this consultation, which becomes the blueprint for the rest of the project. (If it is determined that further meetings or research are required before the Development Plan can be drafted, we charge an hourly consulting fee for this service.) Larger Website Development Plans include a Functional Specifications document, and a Technical Specifications document.

At this point a price quote or formal proposal is given. So long as the scope of the project remains the same, this quoted price will not change.

Once the quote is accepted, the contract is signed and downpayment is given.

Phase II. Design

In this phase, Photoshop mockups are produced, highlighting the major areas of the website and providing a sample user experience. It is here that the look and feel of the site are created. All of our designs are completely original. We do not build sites on prepackaged templates.

Phase III. Development

The bulk of our time is spent in this phase. It is here that Photoshop mockups are converted by hand into html and css templates, image sprites are created, database models are created and populated, php and Javascript code is written, and the website takes shape. At this point, a temporary development website goes live and the client is able to watch the site progress on a daily basis.

We develop many of the major areas of the site as “modules” that plug into our cms, and each of these modules uses a multiple-tiered programming approach. Thus, certain parts of the site might be progressing at different rates and at different times. We start with the database level and work our way up the tiers until we reach the front end user experience.

Phase IV. Testing

Next, we test the site both for usability and functionality. Unit tests are carried out on the model and controller layers. The views are tested using several automated tools, and are also checked manually run the site through its paces in multiple browsers and operating systems in order to find bugs and rendering errors.

Phase V. Delivery

Delivery may take place in one of three forms:
1. On-site. If hosting is provided at the client’s location, One Hat could come on-site to install the website.
2. Remotely. If using a third-party hosting service, the site can be installed via ssh and sftp. Alternatively, the site can be installed via either VNC-over-VPN or Microsoft’s Remote Access Client.
3. On-disk. Finally, the site can be burned to a cd or dvd and subsequently installed by the client.

Final payment is expected at time of delivery.

Phase VI. Maintenance

This phase represents the life of the website once delivery has taken place. It is of utmost importance that the content stay fresh and be updated regularly. Maintenance can take many forms, from having the original developer make sporadic updates, all the way to having dedicated staff whose job entails keeping the content fresh. Our Web Design FAQ page goes into more detail about the various options here.

Smaller Projects

Our smaller web projects take a similar but scaled down approach to that shown above. The free initial consultation is usually enough to draw up the Website Development Plan, thus no consulting fees will be charged. Also, delivery usually takes place in the form of directly installing the website on the client’s hosting service.

©2009 One Hat Design Studio, llc