A "Caught in the Web" Workshop
UTK School of Information Sciences
26 March 1998
Dr. Gretchen Whitney, gwhitney@utk.edu

agenda
9:00 am - 9:15 am: Welcome, Overview
9:15 am - 10:15 am: General Principles
10:15 am - 10:30 am: Break
10:30 am - 11:30 am: Photoshop Techniques, Frames, CSS, Evaluation
11:45 am - 12:00 noon: Summary and Wrap-Up

general principles

what makes a good page?
Principle No. 1: Good web page design does not mean shimmering and colorful graphics. Glitzy graphics are frequently an inhibition to good design.

Principle No. 2: Good web page design does not rely on knowing JavaScript, Java, or Photoshop. Images changing unexpectedly can be unwelcome surprises.

Principle No. 3: While a high degree of interactivity is fun and engaging, interesting and useful content can be more compelling and satisfying.

Principle No. 4: Good web page design relies on adherence to good coding, a sense of organization, and knowledge about the information needs of your readers.

some examples
The awful is obvious. See this gem. (I wish I could take credit for it, but I can't.)

Portland's Mayor.
oops!		 American Civil War Homepage
award-winning
University class syllabus
oops!		 Yahoo
award-winning

the development process
Consider the steps in this process.

mental models
Maps, such as University of California Museum of Paleontology.

A tv network, such as Food TV

A university/school, such as Newbie-U

A course, such as SIS 567

General interest, such as How Things Work

blocking out your design
Using a grid to achieve balance, sense of proportion

content vs. something else...
"I just learned how to Perl!", "I just got PhotoShop", "I ONLY use X machine", "Doesn't everyone have a T-1 in their living room?", "I just got a digital camera!!!!!"

But there are more subtle differences. Compare www.cbsnews.com with www.abcnews.com. Which one is getting the news of the day across?

Compare www.nabisco.com and www.pillsbury.com. Which one gets across large amounts of information across better? Compare www.chryslercorp.com and www.ford.com/us/. Which one helps you find what you want?

design tips
Design is a combination of earthy practicality and sky-high innovation. A good site is grounded in the basics of coding and adherence to standards, an understanding of user needs, and a striving for excellence inside and out. It is not necessarily a perfect puce against a black background or an animated gif that shows all seventeen stages of the metamorphosis of a fruit fly. But it does convey the information that the user needs quickly, and it conveys it in a manner that the user can find quickly.

Review Design Tips

navigation
Menus on the right. Inter-page and intra-page navigation: see the East o' the Sun fairy tale, and note the relationships between the text, the annotations, and the footnotes.

accessibility issues
Web page accessibility means access for folks with disabilities: sight, movement, colorblindness. This suggests the following:
  • use of alternative text tags with images
  • text options for image maps
  • using style sheets whenever possible
  • validating code; testing under multiple browsers
For more information, consult the WAI Accessibility Guidelines: Page Authoring.

good design means good coding
Have your coding, spelling, links and general status checked at Doctor HTML. Regular check-ups advised.

Activity: submit the URL for this workshop page:

http://web.utk.edu/~gwhitney/design.html

break

photoshop techniques with web resources
For lettering and logos, see Net-FU.

For image (.gif) manipulation, see the Imaging Machine

For more interesting effects with .gifs, see WebFX.

Images you can work with are:
http://web.utk.edu/~gwhitney/gulls.gif
http://web.utk.edu/~gwhitney/violet4.gif
http://web.utk.edu/~gwhitney/colordino8.gif

You might look at them before you call them in Imaging Machine.

For example, you might run the Charcoal filter on colordino8.gif, and the Oil Paint filter on violet4.gif; or, run the Blur filter on violet4.gif and then the Border filter, using one of the seashell colors. (To see what these colors are, see Colours of the Rainbow.

frames
I don't know of subject that can inflame web users more than frames. Most people find them very difficult to navigate. They don't make good use of available real estate, and it is hard to print what you want, or bookmark what you need. If you must use them, be sure you give people an optional no-frames version.

If you do want to learn them, Sharkey's Frames Tutorial is a good place to start.

ccs: cascading style sheets
Things to be aware of:
  • ccs are not well supported by either Netscape 4.x or IE 4.x, and not supported at all in either browser's 3.x versions (which is why we can't use them in this lab). See the WebReview chart for which browser supports which capability.
  • lynx and other browsers support them even less
  • they are intended to replace items such as <center> and <blockquote>

    Basic concepts

    • attributes of text
    • inline use
    • <STYLE> in <HEAD>
    • style sheet = template specifying characteristics of HTML elements, such as color, size
    • basic element of style = rule or ruleset
    • structure of rule = selector { property: value }
    • the "selector" is the element being specified, eg <H1> or <HR>
    • use of .class and ID to "create" a pseudo-tag
    • cascading: priorities followed in conflicts on site, between author and user

    css examples

    Best places to start: The HTML Writer's Guild FAQ - general questions and their FAQ - specific questions. See also Creating Your First Style Sheet for a story of basics.

evaluating sites

ratings sheets
These are checklists for evaluating web sites:

CyberGuide for Design

CyberGuide for Content

evaluation criteria
Review the criteria for evaluation at SIS 567 Evaluation Criteria.

In reviewing instructional pages, consider in addition: Is the page an advertisement for the course, a replacement for a printed syllabus, or a working document for the class? Can the student find quickly what he or she is supposed to do for the class, such as assignments and daily class activities? Can the student readily contact the instructor?

sites to critique
Activity: Choose 2-3 to critique, of your choice.

Web Publishers Guide Toyota American Studies at U Texas
History course syllabus History course 2 British lit course
Film cricitism course

 Mankato

discussion of findings

resources for further study

design sites
The Sun Microsystems Style Guide covers page length, navigation, image, and other concerns, and in itself is a superb presentation. If you read one site after this course, read this one.

Web Page Design for Designers. Includes a very readable and useful discussion of color, also Suzanne Stephen's list of resources for page construction and design.

The Web Consortium Style Guide gives good practical tips in making an effective page, from the structural point of view.

The HTML Writers Guild has an excellent collection of Style Guides.

The Web Pages That Suck is an engaging way to learn about design: by looking a pages that have various problems in them.

Tip of the Iceberg: TOTI design.

Some good ideas at Randy Bickman's site, the colors are invigorating.

art gallery

Everyone has their own aesthetic and sense of design: sometimes just for overall pleasure, sometimes for sheer utility. These are some interesting resources, or resources I use constantly. This section is my taste only. Yours is your own.

Riven. Graphics to die for. ALIS FoodTV. I can find what I want.
Lynda's Page, inspiration section. Barebones. Just the facts. Live Examples. More just the facts.
World Lecture Hall Jay Boresma's Designs The Awesome List

Downloaded from <URL http://web.utk.edu/~gwhitney/design.html>, updated 24 March 1998.