ENGL 391C: advanced software
spring 2008
portfolio site map

Overall design:

When you begin to build a web site, you may feel overwhelmed by relatively small problems like broken links, formatting that looks different on different browsers, and so on.

It is crucial (both for your own sanity and for the timely completion of your site) that you not waste too much time on such issues, and keep an eye on the bigger picture -- that is, the overall design of your site.

So, with paper and pen, draw a site map, like this:

main page
[index.html]

longer introduction
[intro.html]

resume
[resume.html]

grant proposal
[proposal.html]

MSWord manual
[word.html]

FrameMaker manual
[frame.html]

RoboHelp project
[robo.ppt]

website of imaginary corporation or non-profit organization
[website.html]
written assignments from other classes, creative writing, etc.
       

first page of imaginary corporation or non-profit organization
[firstpage.html]

second page of imaginary corporation or non-profit organization
[secondpage.html]

third page of imaginary corporation or non-profit organization
[thirdpage.html]

 

Fig. 1: sample site map for an online portfolio

Page Design:

A professional site has consistent formatting on all its pages -- that is, similar margins, color scheme, and so on. The consistency reminds a viewer moving from page to page that he or she is looking at parts of a single site. Effective formatting need not be difficult to accomplish. It may be as simple as a light-colored left margin or sidebar.

Your site is likely to have a great deal of text, perhaps more than a similar site in another field. For this reason, you should be especially careful about the text's presentation and placement. Many amateur (and amateurish) web sites have text that extends all the way across the page; a viewer is likely to find reading difficult. Professional web designs, on the other hand, use a great deal of white space or empty space, and make columns of text only three or four inches across. In fact, the proper model for web page text layout is not books, but newspapers. What to do with all the resulting space? The simplest solution is to color it an off-white or pastel shade, and don't worry about it.

ColorMatch 5K will help you select a matching six-color palette for your website. Define a single color that you like, and matching colors will be calculated. (It works best when viewed in Internet Explorer.)

Further Reading:

If you would like more design ideas, glance through the Yale C/AIM Style Guide, or look at the sites of The Museum of Modern Art, the Sterling and Francine Clark Art Institute, and the Marine Biological Laboratory at Woods Hole,

Note: Images on the web are protected by U.S copyright laws, and copying images for your own website violates those laws. Where then, to get images? There are several "clip art" sites that feature images you may use at no charge. Most clip art images, though, look like -- well -- clip art. Perhaps a better source is the U.S. government. Because the government cannot copyright, any image on a U.S. government agency site is in the public domain. NASA, in particular, has thousands of images of planets, moons, nebulae, "stellar nurseries" and the like -- many are quite beautiful. Another possible source is a photograph you have taken, or an image you have made from scratch with Photoshop.