Our Design and Development Process

Welcome! In this article, we hope to inform the reader of the design and development process at a real design company. We cover the whole process in this article, from start-to-finish. I will that you will gain something from reading this article and hopefully have more appreciation for the process afterwards.

Step 1: Determine the company's goals and figure out what services it offers.

Find out the purpose of the site. Is the site going to be an informational page? Is the site going to offer services and tools for visitors? What types of services will the site offer? -- Find out what features they need visitors to use on their site and the purpose of the site.

Step 2: Determine the target audience. Create demographic profiles.

The reason for demographic profiles is to narrow down what type of audience the site being created is going to try to attract and cater towards. If we are creating a website for a children television website ages: 7-12, the design and functionality would be considerably different than a stock trading website created for male adults ages: 30-55.

Step 3: Define the Brand. (preliminary)

Based on the purpose of the company and the product or service they offer and their intended target audience, we can determine how to go about defining the experience of using the site. Things that get factored at this stage are: technology, navigation style, organization of information, usability and how all these elements will come together.

Step 4: Create flow charts and prototypes.

Loaded with enough navigational information, so we can get an idea of page hierarchy and linking dynamics. Basically, what links where and how the user will navigate the site and a general overview of the site navigational mechanics. This also helps because a cleaned up version of this is what the developers will refer to when programming the site. This helps the developers have a clear image of page order and it will save a lot of communication time down the line.

Step 5: Define the technology to be employed.

This is one of the most time consuming parts because a lot of research has to be done on a number of factors such as the technology to be used, the pros and cons of each, flexibility down the road for proposed solutions, the ease of customization and integration compatibility.

Step 6: Define site mechanics. Figure out how the features on the site will work.

Based on the features required for the site we begin with the user interface. We layout the modules on a wire-frame, this allows us to figure out what type of layout to implement best that will compliment the features/modules. This is an essential and very quick method of laying out a website because we can quickly create compositions that allow us to strategically position design elements in real time.


We take the wire-frames and create some quick design composition of the index page for the site. We go through a number of revisions until we finalize on two to three final compositions. The final compositions are submitted to the client and the one that is accepted is taken and used for the style guide.

Step 7: Create the style guide.

The reason for a style guide is to keep the design, the layout, the typography used, the colors, the graphics style and overall style of the site uniform and consistent. This one document sets the standard for the site and gives the designers a guideline to create visually consistent work for the duration of the project. This one document saves a lot of time down the road for us by ensures that the style does not deviate.

Step 8: Create a developer guide.

The reason for a developer guide is to eliminate any guesswork from the development team. The objective of a developer's guide is to tell the developers about the features that will need to be implemented for the site and how the users of the site will interact with the dynamic parts of the site. Writing a general overview of site mechanics including features to be used within site and overall scope of project necessities helps to inform the developers of how to plan the project and ensures that no time is wasted in the timeline of development.

The questions that are addressed within the developer guide are:

Once these questions have been answered, we can move on to preparing the pages for development.

Step 9: HTML layouts

All the pages are then created and layout in XHTML/CSS

Quality control is asserted on the pages for proper rendering across browsers and platforms.

Step 10: Send to programming development team

Step 11: Testing, Testing and more Testing. Quality Assurance and finalization.

Congratulations on making it this far. By now a few months would have passed and the site is finally completed. It's been a lot of work. However the final project has turned out great and it was worth all the work of preparation and planning to achieve the end result that's running live at this very moment. Pat yourself on the back you've earned it.