Michelle Stanek, Catherine Brown, Kendall, Joe, Jenny, Kirsten, Ron

Web Style Guide Quiz

Do not overdo special effects.

Keep hyperlinks short, one word or two words.

Organize the multiple pages around the home page.

Part II

Page Design

Graphic Design 100

There are two ways readers experience web pages: online or downloaded into text files. The site technician must understand the audience as well as the potential for translating text files to and from the web. It is important not to patronize your reader. For example, the site must not be grossly exaggerated. A technician needs to use common sense when making the page while understanding possible limitations of a user’s equipment. You do not need to dumb down your content in regards to text and format.

There is a logic to your web site. The information you present must be logically organized so that the reader sees first what is most important. The reader reads left to right and top to bottom so the page must be organized to comply with this structure. There is a balance between graphic design and organization. Too many graphics will take away from the substance of the site. There is a proportion to the graphics and text. The goal is to not confuse the reader and to be consistent with graphic and navigation. All the criteria of graphics as stated in the Web Style Guide will allow the graphics to design themselves as opposed to the technician creating the graphics.

Balanced Pages

Graphic Safe Areas

The majority of screens tend to be 13 to 15 inches with 640,480 Pixels. With this in mind, a web designer should create the site to fit within these parameters. This allows the graphics to fit nicely in the browser space without have to use the bottom scroll bar to view the entire page. The maximum width should be 535 pixels and 295 pixels for the height. The maximum screen usage is 595 pixels for the width and 295 for the height. By following these dimensions the page will print properly. All graphics need to be able to fit within the safe area of the browser window. If these rules are followed, the page will look professional rather than amateurish.

Page Headers

Page headers are the most important parts of a web page. Headers are the most crucial areas on a site because that is the only part of the site that the viewer will see when they select a home page. Headers should definitely be appealing to the eye, but it should not contain too many graphics. If the graphics at the head of the page takes more than a minute to download many viewers would probably stop the process and look for another site before any links to the site are shown. Page headers should always be based on what the viewer would see on the first screen of information. The best web page headers have a combination of both graphics and interactive links available to the viewer.

Typography I

Typography depends on the visual contrast between one font and another as well as well as the text block surrounding the empty space. The aesthetic value of the page depends on the juxtaposition of bold/non-bold and caps/no-caps, etc. The designer should no overuse bold because nothing will stand out. The page should not be crammed with text because it become an over-kill. The HTML headings should e used sparingly as well. Avoid all upper-case headings for they are much harder to read. Initial caps are also something to avoid for they disrupt the reader’s scanning of the word.

Typography II

Typography is a tool used to "paint" patterns of organization on the page. When a viewer logs on to a page the first thing he or she sees is the overall pattern and contrast of the page, but not the title or other details on the page. A well-patterned page helps the viewer to organize and establish the location of the information within the page. Typography also gives the page legibility. A web page that is not well organized or patterned is not at all easy to read and the viewer would more than likely be lost in trying to find information.

Consistency

Consistency makes the webpage so much better. Consistency makes the webpage

appealing to the reader. Fonts, paragrpaph spacing and the size of the

subheads and the information helps create a certain style. Consistency is

not an easy thing to obtain, it is common to not have a consistent layout on

the screen as it is on the printed page.

Basic Tables

Tables hold information in an organized manner and make the page look more

professional. HTML has limited uses and by using tables more options are

available. Table borders are unattractive and are recommended not to ever

be used.

 

Page Lengths

There are 4 Major factors for determining the proper length of a web page. One is the relationship between the page and screen size. Another factor is the content of the document. Whether the content will be based online or downloaded for reading is a third factor. The fourth factor is the amount of band width available to the target audience. Shorter web pages are better for home pages, documents to be browsed on-line, and for pages with very large graphics. Larger documents are easier to maintain more like regular papers and are easier to download and print.

Web Graphics

Introduction

In order to optimize the look of efficiency of the web page the designer must consider the common connection speed of modems. Most run at a 28.8 K causing a 36 K picture to load at 10 seconds or longer. Though the speed of the serve as well as the type of web browser effect the speed, basically the more graphics on a page the longer the page will take to load, and the more aggravated the viewer may become. In stead of over-loading a page with graphics a better strategy would be to gradually increase the graphics loading onto the page. But the wed designers must remember that graphics are what draw people to a sit and with more people getting faster connections graphics are becoming easier and faster to load.

Color Display Primer

Current monitors on PC and Macintosh computers are based on Cathode Ray Tubes (CRT), using a system based on red green and blue. Those colors add up to white light (additive). Most computers have a small amount of RAM dedicated to controlling the color of each pixel. This is called the ‘Video RAM.’ The more memory dedicated to each pixel, the more colors can be managed. For example is eight bits are dedicated to each pixel, there will be 256 colors. A 24-bit color display will show millions of colors. To find out you Video RAM capabilities go to your Display properties.

Summary, File Formates

Netscape and other browsers allow users to utilize both GIF and JPEG graphics on the web pages. General rule for web designers is that GIF files are for graphics and JPEG files are for photographs. GIF files are useful because all web viewers support them and they support transparencies. The advantages of JPEG files are that they can be highly compressed and can support full color 24-bit images. JPEG files can be very compact and contain over a million different colors.

Illustrations

The greatest challenge for web images is to provide high resolution, crisp clear, images. With the 24-bit displays, the resolution has higher capabilities to reproduce photographs. Because of these capabilities, education and science are now able to distribute color photography in a cheaper and relatively, reliable manner. For complex pictures JPEG files are normally used, whereas graphics with complex icons or diagrams are better viewed as GIF files.

Tom Kelliher