Web Development Process 2 - A Freelancer's Perspective

7. Think Art

One of the most engaging attractions of a good Website is its graphics. Listen carefully to your client and find out what they really want. If the client can't explain what they visualize for the site, help out with a few questions:

• What sites are visually appealing to you?
• On a scale of 1 to 10, how important is a fast-loading site to you?
• What colors are you partial to?
• Do you already have existing collateral (brochures, catalogs, etc.)? If so, what flexibility do I have with your fonts, logo, and colors?
• Do you have any art that I'll need in order to complete this project?

And if you're having a hard time finding your creative self, take a look at CoolHomePages.com for some inspiration. Once you have an idea of what your client expects, you're ready to storyboard the site.

8. Storyboarding

Storyboarding is a device that's used to lay out the design and navigation of a site. It could simply be a rough sketch on a scrap of paper, however, I always send out a storyboard to a client before I start to actually lay out the site. For your storyboard, try laying out rough sketches in Illustrator or Freehand. Use your mind map or flow chart to guide you through this process. Once you have a polished storyboard, ask your client to sign it off so that you're sure you have their agreeance to your concept.

9. Photoshop

Now that your client has signed off on your storyboard, it's time to start the design process. Follow these steps:

1. Take a screen shot of your browser.


2. Bring this image into Photoshop and save the file.


3. Layout all design elements into layers for the home page of the site.


4. Design at least three different variations of the site look and feel.


5. Go to your local service bureau to print out 2 copies of each design, one for you and one for the client. Remember to charge the client for printouts with 5% - 10% markup. Place one of each printout copy into the project's docket -- this is your copy.


6. Mount the other printouts onto separate sheets of black board. Place a label with your company name and a space for the client to sign off, on the back of each.

If your client is local, organize an appointment to show them the mockups. If you have a long distance relationship, use Fed Ex to ship the mockups to your client, and ask them to sign off on the back of the mockup that they like.

If the client doesn't like any of your layouts, which happens to the best of us, it's back to the drawing board. But be sure to find out exactly why they didn't like any of your designs. Make notes about what they don't like, as well as what they do. These will help you redesign to an acceptable point.

Once your client signs off on a layout, rename the corresponding Photoshop file to reflect this, and move the unused files into an "idea file". There is no reason why these unused mockups couldn't be modified for your next client. Take the unused mockup copies out of the project's docket, leaving in the docket the chosen mockups.

The rejected mockups are by no means wasted. Place them into a binder that new clients can look through -- it's a handy sales tool and can speed up the design process for future clients.

Now, turn to the Photoshop file for the approved concept. Duplicate the existing file and make mockup files for the inside pages of the site.

10. Optimize Images

Now that you have all your pages laid out in Photoshop, it's time to cut out the images that you will use on each Web page. A good rule of thumb is not to exceed 30K per page, otherwise your Web page will take too long to load. Also:

• Save illustrations in gif format.
• Save photographs in jpeg format.
• Keep the number of colors in an image to a minimum.
• Aliased images are smaller than non-aliased images.
• The more compression you apply to a jpeg, the smaller the image will be.

11. Build a Prototype

Take your printed mockups and flow chart, and use them to layout your page. Create your pages so that they're all linked together. To help organize your files:

• Place all images in a folder called "images".
• Place every section of your site in a separate file.
• Structure your directories to roughly match your flow chart.
• Make sure your file names make sense (it's a good idea to have a company code in front of each file. For example, for XYZ Company's About Us page, I would use xyz_about.html.).
• Have an archiving system in place in order to backup your files. Name your files accordingly, so that you can link all your html files together to create a working prototype that the client can test.