Basic Design Principles
Ideas for this page were gleaned from the Web Style Guide, 2nd Edition, Lynch & Horton
We think it's important to review some very basic design prinicples before jumping into the task of learning how to use RWD. Designing a web page is different than designing a paper document. Web users don't just look at information, the interact with it in novel ways that have no precedent in paper document design. The graphic user interface of a computer system comprises the interaction of metaphors, images, and concepts used to convey function and meaning on the computer screen. The spatial organization of grpahics and text on the Web page can engage readers with graphic impact, direct their attention, prioritize the inforamtion they see, and make their interactions with your web page more enjoyable and efficient. Listed below are some of the big ideas of design in a web environment.
Visual Hierarchy
The overall graphic balance and organization of the page is crucial to draowing the reader into your content. Too much text, overly bold graphics, or typography will district or repel users. It's important to strike an appropriate balance between attracting the eye with visual contrast and providing a sense of organization.
Page Dimensions
The computer screen is different from the printed page. It is typically smaller, and the designer has to be careful not to spread content or graphics beyond the width of the page. You want to avoid a design that forces uses to scroll both horizontally and vertically to see the full web page. Pages on Windows machines usually appear larger than those on a Macintosh. You want to design with a maximum width of 760 pixels - which is a little over 10 inches wide. The length of a page is really determined by the type of information that is on it. It makes sense to keep closely related information within the confines of a single web page - but keep this rule in mind: don't have more than 4 "screens" of information on a single page.
Maximize Prime Real Estate
The top of the page is always the most dominant location. On a web page the top four inches are always visible, regardless of monitor size or computer type. Use this space efficiently & effectively.
Use Subtle Colors
Subtle pastel shades of color typically found in nature make the best choices for background or minor elements. Avoid bold, highly saturated primary colors except in regions of maximum emphasis, and use them cautiously.
Beware of Graphic Embellishments
Horizontal rules, graphic bullets, icons, and other visual markers have their occasional uses, but apply each sparingly. Overuse of graphic emphasis leads to a "clown's pants" effect in which everything is garish and nothing is emphasized.
Typography
Good typography depesn on the visual contrast between one fone and another and between text blocks, headlines, and the surrounding white space. The idea is to use typography to "paint" pattersn of organziation on the page - like the example shown below:
Fonts
There are two families of typefaces, serif and sans-serif. Serif fonts have a squiggle on the end of the characters - Times New Roman - is an example of a serif font. San-serif fonts lack the squiggle - like the font you are reading, which is called Verdana. The fonts available on any given computer vary, and it's best to use only fonts on your web page that you know will be installed on users machines. A list of common fonts is provided below:
Some basic rules for working with fonts are:
- Don't mix more than two fonts on the same page and avoid unusual typefaces.
- It's easier to read san serif fonts on screen.
- Avoid the use of all capital letters.
- Avoid using the underlined style - it is usually reserved for hyperlinks.
- Use colored text as a subtle means of distinguishing headers - but don't use colored text block.
- Left justified text is the most legible option for web pages.
| 
