"Art has to move you and design does not,
unless its a good design for a bus."
David Hockney, draftsman, printmaker
Web Design Tips
Good Web design means your site achieves its
goals and objectives with minimal obstacles to the user.
Good design is CRAP: Humorous acronyms aside, youll
find this is the key to the four essential elements of good graphic design.
- ContrastAdd variety by making dissimilar elements look different
- RepetitionAdd unity by repeating elements
- AlignmentCreate visual connections between elements
- ProximityGroup related items together
A few basic tips:
Tip 1: Uphold user-friendliness (the most important design principle)
- Keep the user in mind.
- Even if your fabulous design makes perfect sense to you, if others
are bogged down it is not effective interface design.
- Only design that is understood is truly effective. The designers
opinion is secondary.
- Web sites should be accessible.
For public institutions in the United States Web sites must be accessible
to people with disabilities such as low vision, blindness and color
blindness, hearing impairments, and people who cannot use a mouse.
The World Wide Web Consortium (WC3) has developed a list of "Checkpoints
for the Web Content Accessibility Guidelines" for Web designers
The Guidelines are quite extensive and complex. The following is
a summary of a few of the key checkpoints identified as Priority 1
by the WC3.
- Provide a text equivalent describing the images (graphics, animation,
video) for people using a screen reader or browsing without images.
- Provide text equivalent describing any important sounds for people
who are hard of hearing or deaf.
- Avoid using frames (if you dont know what frames are you are
probably not using them) It is difficult for people with screen readers
to navigate frames.
- Avoid combinations of red and green for color blind people (8-12%
of the population.)
- Keep navigation simple for people with motor impairments.
Tip 2: Functionality first
- Function over form: Make it readable and accessibleº
then make it pretty
- Dont substitute functionality for artmake the art fit
the functionality (this sounds exceedingly simple, but all too often
people begin developing the art only to find that it does not meet the
technical constraints or the overall goals and objectives. Begin by
developing the content of your site and then develop the art to accommodate
- Avoid click and click again
- Dont bury information in your site
- You should be able to get what you want in two or three clicks
- If you have a large site, create a site map, index, or table of contents
so students can find information
Tip 3: Grouping items
- Group things that are similar by color, shape, and proximity
- Make dissimilar things look different
- Accentuate things that are clickable
- Reserve blue text for clickable items
Tip 4: Question your interface: Can I turn this on its head? Can
- Remember effective design is often a matter of compromise; a balance
between competing goals and objectives
- According to Dr. George Bracket, "Sometimes a picture is worth a thousand
words but sometimes a word is better than a picture." How do we symbolize
a word? If the word is volume, you can show a picture of
a speaker; however, if the word is quit, you can show a
picture ofº ? Its possible the
word quit is more effective than its icon.
Tip 5: Chose typestyles that increase reading comprehension.
- In the online environment san-sarifed fonts such as Ariel, Helvetica
and Verdana are easier to read.
CapsDO NOT USE ALL CAPITAL FOR SENTANCES THAT ARE MORE THAN
FOUR WORDS IN LENGTH. CAPITAL LETTERS ARE HARD TO READ. MANY PEOPLE BELIEVE
THAT USING CAPITAL LETTERS WILL CALL ATTENTION TO THEIR MESSAGE, BUT IN
REALITY MOST PEOPLE TEND TO SKIP ENTIRELY CAPITALIZED TEXT.
BoldBold typeface should be used cautiously. Boldface is great
for headers but after ten words in running text it is difficult to read,
especially for people with vision impairment. Most people tend to skip
long sentences or paragraphs written in boldface font.
Web Design and Accessibility
a Web design and accessibility plan for your course
Table of Contents
Tip 6: Use tables to lay out your text. Studies show that reading
comprehension increases if each line of text is no more than 1012
Most English language print material is laid out with no more than an
average of 1012 words on each row. If text is permitted to adjust
to the size of the screen, it can be challenging to comprehend and retain
what you read. Most professional Web sites use tables to constrain the
size of the text so it doesnt go across the entire screen. (For
more information on tables see Diane Wangs course "HTML"
and read the module on how to create tables in HTML http://think-ink.net/html/table.htm)
Rubric for Web Design and Accessibility
Diane Wang's module on Accessibility
"A Web Without Barriers Accessibility And Usability: What's In It
For Me?" by Beth Archibald Tang
"Distance Education: Access Guidelines for Students with Disabilities"
"Quicktips to Make Accessible Web Sites and Accessibility Resources"
An easy to follow guide based on the accessibility guidelines of the W3
"Quicktips to Make Accessible Web Sites" by the W3
California Virtual Campus site on accessibility:
"Considering the Color-Blind" By Chuck Newman
Web Design Resources
"Design" by Jay Cross, Founder of www.internettime.com
This is an outstanding site on user-centered design.
One chapter "Don't Make Me Think" by Steve Krug
"Good Design Features" by author Robin Williams
"The Yale C/AIM Web Style Guide"
Provides design tips as well as "how to" advice and is the most recognized
guide for Web design
"About the Human Interface"
Offers great tips on Web design and showcases well designed sites
A parody site dedicated to showing bad Web design
An online magazine for serious Web designers
"Non-Designer's Web Book" second edition, by author Robin Williams.
This is a primer on how to create Web pages. It provides simple but powerful
tips on how to create Web pages and how to make them look good.
"Don't Make Me Think! A Common Sense Approach to Web Usability"
by Steve Krug
This is a insightful and entertaining book on interface design.
Be your own web designer and market you site too.
Developing an Effective Online
© Valerie Landau, 2001. All Rights Reserved.