Web Site Development

A Designer's Perspective on Web Project Teamwork

Static and Dynamic Pages

There are a couple of ways you can present content on a website.

Static Pages

the pages are created and are stored on the server until someone wants to view it in their web browser. If the page needs to be updated, someone opens the page in an HTML editor and makes the changes by hand.

Dynamic Pages
A dynamic page viewed in your browser is actually created when requested, often based on the user input. The content displayed on the page is stored in a database. Two people looking at the same dynamic page may see totally different content based on what they ask to see. We all are very familiar with this – for example when you look for a particular book or CD on Amazon, you see only the items that match your search criteria on the page.

The heart of a dynamic page is not the content, but programming code that fetches the content requested by a user. There are many different programming platforms available for creating this code, such as ColdFusion, asp, php, etc.

What type of functionality requires programming? Here are some examples:

  1. You need to maintain a list of users that are authorized to use the site or certain restricted portions of the site.
  2. You have a large number of items (products, news stories, photographs, etc) that change on a regular basis and need to be easily searched.
  3. You need an easy way for non-technical people to update the content of your website

Division of Labor on a Web Development Project

Many web sites can be created by a single person.  This person has a combination of graphic design and technical skill to put together a web page that functions properly.  Depending on the person’s ability, this can work fine for many types of web sites. This is especially true of web sites that could be characterized as “online brochures”.

However, it is often the case that to put together complex functional websites, several people with specialized skills are required. In addition to the normal graphic design and HTML, these sites usually require programming skill and thorough knowledge of a software development environment. It is rare that any one person has the necessary skill (or time) to achieve a quality result by themselves.

I've occassionally seen a relatively complex site created by a single person, who handled the graphic design and detailed programming single handedly. For the most part, these sites worked quite well but did not look very good. (I'm whispering now - many programmers are not great designers).

I've had experience on both sides of this equation. For many years I was a programmer, and the thought process necessary to do this type of work is very different than the mental space I experience when doing graphic design.

That’s not to say that there aren’t rare people who can combine design and programming talent to produce extraordinary work (you can see this in some of the phenomenal Flash work out there). It’s just to note that most programmers I’ve worked with on websites don’t have much sense of design. Likewise, I try and keep away from programming nowadays – even though I’ve had years of experience. I can often understand the code produced by others, but I know just enough to be dangerous. But getting into the right mental space to do programming takes me out of the "right brain" orientation that I need to accomplish decent design.

Web Project Workflow

What is the workflow on a typical small project where a team of people are working to create a functional website? There are several perspectives to look at this process from, but since I am a designer, that is the perspective I will share here. Let's assume we have a team consisting of designer, programmer, animation designer, and project manager.

  1. The project manager meets with the client and obtains a complete brief on what this site is trying to accomplish, and the various elements they would like to see on the site. Client input is obtained on how they would like to site to look.  It's always helpful to get links to other sites the client finds attractive.
  2. Next, the team comes up with a plan to implement the client's wishes.  This involves discussion on look and feel, site structure and navigation, where animated elements will be used, how functionality will be implemented, etc.
  3. Next, the designer comes up with a mockup created in either Photoshop or Fireworks, that demonstrates site look and feel and site navigation.  Usually there are some iterations with the client and then client approval for the design.
  4. At this point the designer creates the site HTML and turns it over to the programmer.  Any animated Flash element can be integrated into the design at this point. The designer also creates a complete style sheet for all of the content elements, which usually include font styles and other elements that properly position in place the content and images that will go into the pages. In the meantime, the animation specialist begins creating what ever elements the elements he is responsible for.
  5. The programmer takes the HTML created by the designer and adds the code for the dynamic page elements.  Often times the programmer breaks the original formatting created by the designer, so the designer needs to work in conjunction with the programmer to fine tune the formatting of the dynamic output.  The designer needs to be careful not to break code created by the programmer, and should regularly test page output as she changes design elements.
  6. After all design and programming is complete, the site is tested to make sure it is functioning properly and all design elements are in place. The site is presented to the client for sign off.

Note: I receive some compensation if you purchase products mentioned on this page.