Globale linker

Book 1

Book 2

Ch.2 Web Page Layout and Elements

The web is a different medium than existing media, so there are different standards for web site development than there are for print, video and other traditional media.

Surveys confirm that as many as 80% of web users merely scan web page content, looking for key words and phrases. Furthermore, the average person reads 25% slower from a monitor than form print.

Each web page should contain approximately 50% less text than a printed version of the same information.

To make reading easy keep the lines in your paragraphs no more than 10 to 12 words long.

As a designer, you must create pages that allows users to quickly scan and find the information they seek. If you create a web page with the same content as a brochure or newsletter, the user will likely move to another site. If you know that users only scan your page, why try to force them to read a lot of content that may not interest them?

A web page should be designed to offer information concisely. Provide users with the basics then give them links to more depth and detail. But do not divide a page just to make it shorter unless it is a logical breaking point. Each page should be able to stand on its own.

Keep users satisfied, give them what they want, and they will come back. Users do not want to see cluttered pages with irrelevant content and images.

White space helps reduce clutter

The web is self-sentric. Users are interested in only what they want.

Web page layout can be compared to a newspaper's layout or the inverted pyramid layout style. This style offers the user a list of story summaries first, then links to the details for those who are interested.

Web page elements:

Common layout formats use common basic structures to perform certain important functions. For example, navigation elements are generally located on the left and top margins.

Users demand speed. Users feel interrupted after about one second, after 10 seconds, you are likely to lose their attention.

Design for a screen resolution of 640x480.

A company's style, culture and mood can be portrayed by the colors presented in the site and how they blend, coordinate and contrast.

A computer monitor consists of thousands of picture elements called pixels (= picture elements). Colors we see on a monitor are RGB-colors. The RGB-model is additive, because adding more color to the mix moves the color towards white.

Colors are standardized in two numeric formats:

To comply with strict HTML, use hexadecimal values exclusively.

216 Web-safe colors:

When you mix two colors, the resulting color is the complimentary color to the remaining color. For example, mix red and green, the remaining color is blue and the complementary color to blue is yellow.

RGB Complimentary to CMYK
Red <-- --> Cyan
Green <-- --> Magenta
Blue <-- --> Yellow

The two most commonly used fonts are: Times New Roman (Times for Mac) and Arial (Helvetica for Mac).

Serifs are small decorative strokes added to the ends of a letter's main strokes, for example: Times New Roman. Best for print.

Sans serifs or non-serifs do not have serifs, for example: Arial. Best for screen.

Always consider an individual font's contributing factors and how that font relates to the whole design.

You can use transparent gifs to indent paragraphs:

<img src="transparent.gif" height="1" width="20">Text text text text

This would indent the text with 20 pixels.

Chapter 1 Chapter 3