Thoughts on Good Web Design from Lynda
(of www.Lynda.com)

Color

She discussed how the web-safe colours of the early '90s don’t necessarily apply today given that computers are capable of millions of colours.

One doesn’t have to use the web-safe palette unless one is targeting older computers.
Think of colour as value, saturation, and hue. The value-- is it light or dark. Saturation-- is the colour intense or muted; and hue-- where is the colour is on the colour wheel.

If you put several colours in a web page and don’t give thought to how the colours relate to one another, the page is not going to look good or read well. Think about the relationship between light colours and dark colours, how some colours will make objects come to the foreground and others recede (not unlike the Monterey fog that hung about for a day or two.)

Composition

Everything on the web comes natively in the form of a square-- from the browser window, to the frames etc. Try changing the graphics to rounded edges; use background images, avoid congestion on the page. Using grids can aid in the layout of a well designed page.

Lynda talked about how a lot of web designers today throw text on the web that fills the browser window, instead of having text in tables, turning off the borders, putting text into two column systems. Think about having more white spaces (open spaces). Put important information above the fold (at the top of the page)-- a good example of this approach is CNN’s web page.

Space between types can create different densities; patterns that are broken or carved out spaces will catch ones attention.

Typography

Determine what kinds of type will be used for headlines, sub heads for buttons, when to use graphical text and html based text. Don’t use too many fonts. Linda showed examples of sites using no more than three fonts. Tiffany's site uses one typeface with the exception of the Tiffany logo. Use a combination of upper and lower case fonts, different colours etc. Studiomotiv.com is a good example of how one can communicate text by altering the weight, colour and size of a single typeface.

Linda considers Georgia to be a more suitable font for the web than, say, Times
(that was accepted more as a print font.) She finds that a lot of designers use Helvetica for their web pages, and while it may look good on a PC, it can be difficult to read on a MAC. Lynda’s favourite type is Verdana because it reads better than any other small type.

While printed material uses 10 and lower font sizes, the web works in the opposite direction. Anything below a twelve font is not workable. Serifs are easier to read in print than they are on the web. Anti-alias text is better than alias text on the web, unless one is working with small type; then alias text is better. Hotkey.org has a font that works well on the web and is free.

Design Hierarchy

Involves the use of colour, topography, scale, animation, sound, perspective. A lot of designers today don’t have a sense of how to steer the viewer towards the important content on the web. Good deign involves using good hierarchy. For example, have areas where the viewer eyes can rest (e.g. blank space). The darkest item on the screen is going to receive the most attention. Keep in mind one’s own goal versus the institution's goals (try putting oneself in the shoes of the viewer). Adjusting the focus of an item calls attention to it or lessens its importance. Use different weights of type. Come up with the goals of the site and the user.

Navigation

Before working on navigation, one has to work on the architecture of the page (how you are going to organize the information). What labels to use? The Abercrombie site is a good example of a beautiful design, but bad labels. The shop label is critical to the company's survival and yet it is the last label. The music label that doesn’t have anything to do with the product is given a central place in the layout.

Rollover buttons that give information on what is available is worthwhile. Site maps are useful.

Lynda felt that persistant navigation is the most important navigation tool. It lets visitors know where they are and how big the site is. She mentioned the example of how folks from Adobe and Macromedia linked to her colour page for years, and when visitors to their site linked to her colour site, they wouldn’t have known anything about Lynda.com’s page. So, having information about one's site on each page is important.

Lynda showed examples of Flash that are being used in web design. For example, Barney's site has elements sliding into place. Discovery.com is a good example of presenting a lot of information. VW.com site is a good example of persistant navigation where you have to clip in order to get to want you want.

Usability

Make things simple; identify with the user; get feedback from users; employ user testing; try to make the navigation obvious; make buttons that look like buttons; the busier one's page, the more difficult it is to use; keep text short as people just scan information.

Accessibility

Are we making sites accessible to all users? Now that Section 508 has been introduced, Government sites have to be accessible to all as of June 21 (today!) and it is only a matter of time before all sites will have to comply.

One out of ten males is colour blind, so it is important to keep that in mind when thinking about colour values.

PDF is considered an enemy of accessibility. There is new information on Adobe that tells one how to make current PDF documents accessible.

Hue

When you are matching colours one needs to pay attention to their relationship. Is the colour light? Is it dark? Does it contrast with other elements on the page?

• Heather Woods
• Information Services
• Date Created: August 18, 2000
• Last Modified: June 5, 2003
• Expires: August 31, 2003