A Web page consists of many elements, usually presented in the form of a header, footer, logo, content, buttons, images, photos, and links. It is important to present the useful elements on a page effectively rather than make them distracting.
Don't design your site for your computer, design for your average reader. Internet browsers, including different versions of the browser, may create different effects with your design. It is wise to test your site with different browser versions and computer platforms.
Graphic design is visual information management using tools of layout, typography, and illustration to lead the reader's eye through the page. Readers first see pages as large masses of shape and color, with foreground elements contrasted against the background field. Only secondarily do they begin to pick out specific information, first from graphics if they are present. Then they start moving through the text and read individual words and phrases.
A page of solid text will repel the eye. The reader may feel it too much 'work' to read the page. However, a page designed with a balance between attracting the eye with visual contrast and providing a sense of organization will ease the reader through the page.
Fig. 1 |
Fig. 2 |
Fig. 3 |
In Fig. 1, the page is dull and expresses no visual interest to the reader. Fig. 2 shows two graphics and centers the text. Although there is more to look at on the page, it is poorly designed as it is too distracting for the reader to focus on the information in the text. The centered text makes reading more difficult because of the random line breaks. Fig. 3 is an example of nice page design. It offers balance for the elements on the page and makes the page more organized for the reader.
A problem with Web sites is the lack of a sense of where you are within the site. Clear consistent logos and schemes can give the user a sense of finding what they are looking for more quickly. Page and site design should be built on a consistent pattern of units that share the same layout grids and graphic themes. Users should be able to return to the homepage and other major navigation points on the web site. Avoid pages with no navigational links. Such 'dead-end' pages may cause the user to get lost in the site or may prohibit return to the department or USI's homepage. Consistently using navigational headers and footers will take care of 'dead-end' pages. Read the Web Publishing Policy concerning this issue.
Images
Most images are saved in either GIF (Graphic Interchange Format) or JPEG (Joint Photographic Experts Group). By choosing the optimal file format, you can create a Web graphic that will download faster and look better.
The GIF file format uses a relatively basic form of file compression that squeezes out inefficiencies in the data storage without losing data or distorting the image. It is less efficient at compressing complicated pictures with many colors and complex textures.
The GIF file format also allows images to be saved with transparent backgrounds. This option is useful if the image is going to be placed on a colored background. The GIF file format also offers an interlacing feature. The conventional (non-interlaced) GIF graphic downloads one line of pixels at a time from top to bottom. In interlaced GIF files the image data is stored in a format that allows
Internet browsers to begin to build a low-resolution version of the full-sized GIF picture on the screen while the file is downloading.
The JPEG file format is used for full-color images because of its incredible compression capabilities. The degree of compression can be modified by the designer to achieve the desired quality he or she wants. However, the more the file is compressed, the more quality it loses.
Designers should carefully consider the characteristics of their images and then determine which file format will best produce the desired results.
Image Parameters
When using images in Web pages, always use both the ALT parameter and the WIDTH and HEIGHT parameters. The ALT parameter allows you to add a text description to an image that can be seen by users who are browsing with images turned off and also by handicapped
Web surfers who are using a voice reader.
To add the ALT tag to an image in HTML, your code should look something like this:
<IMG SRC="USILOGO.gif" ALT="USI Logo graphic">
Content developers should also include the WIDTH and HEIGHT attributes of an image in their HTML because it speeds the download of a page. To add WIDTH and HEIGHT attributes in HTML (with an example image of 90 pixels wide by 90 pixels high), your code should look something like:
<IMG SRC="orrcenter.jpg" WIDTH="90" HEIGHT="90" ALT="This is a photo
of the Orr Center">
Fonts
The use of publisher-defined fonts (fonts invoked by the author through the use of HTML code) in
Web pages is extremely limited. Until support for Cascading Style Sheets is widely adopted and standardized,
Web publishers have few options for defining the look of fonts or styling type in web pages. Two widely used options are:
Use of the FACE parameter in the FONT tag in HTML (i.e. <FONT FACE="ARIAL"></FONT>).
Setting type as an image and invoking it with the image tag in HTML (i.e. <IMG
SRC="title.gif" ALT="Title of the column">)
Fonts in HTML text
As mentioned above, it is possible to use the FACE parameter in the FONT tag in HTML to override the default font of the user's browser. This can be helpful in making
Web pages more readable and attractive. But this option has limitations:
To invoke a font(s) in HTML, write your code like this:
<FONT FACE="ARIAL, HELVETICA, SANS-SERIF">Styling HTML Type</FONT>
You can also add other parameters to the <FONT> tag such as color and size. Consult an HTML book or any of the HTML resources on the Web for more.
Font Recommendations
Just because HTML makes it possible to invoke specific font types into Web
pages doesn't mean that any font can be used. If the visitor doesn't have the font specified in the HTML, then the text will appear as the browser's default font.
It is wise for content developers who use the FONT tag in their pages to use fonts commonly installed on the majority of computers. These fonts include: Arial (Windows), Helvetica (Macintosh), Geneva (Macintosh), Monaco (Macintosh) and Times (both Windows and Macintosh), or
content developers can add HTML parameters which will invoke a computer system's font default such as SANS-SERIF or SERIF.
So the HTML code could look like this:
<FONT SIZE="2" FACE="VERDANA, ARIAL, HELVETICA, GENEVA, TIMES, SANS-SERIF, SERIF">Styling HTML Type</FONT>
When using the FONT tag it is good to invoke multiple fonts (as shown in the example above) because different users may have different fonts installed on their computers. The FONT tag will look for the fonts in the order you include them in your HTML. If none of the fonts exist, then the page will use the browser's default font.
Content
To convince users that the information you have is accurate and reliable, you will need to design the site with the same editorial standards as any other communication piece. Like any printed document that your department publishes, the Web pages you produce are official publications of your department and
USI. A site with poor visual design and low editorial standards will not inspire confidence. You should submit your Web pages to the same review and approval processes that are already in place for your department's printed publications.
Color
Color can add a lot to the aesthetics of a site when used correctly. It is important to use 'browser safe colors' in images or other elements on a Web page. The browser safe color palette is made up of a mathematical color cube. This palette contains 216 colors that has become the standard for web color and will display without dithering on any platform, at any resolution. If you use colors outside of this palette, the colors will dither on monitors set to a low resolution. Dithering is the process of attempting to create a color not in the palette with the available colors from the palette. This results in inconsistent appearance of color among a variety of monitors. It is safer to stay within the color palette to achieve the desired look for the site. We have chosen several 'browser safe colors' for you to use in your site.
Academics | Calendar | Athletics | Visitors | Events and News | Administration
8600 University Boulevard - Evansville, IN 47712-3596 - 812/464-8600
Copyright © 2008 University of Southern Indiana. All rights reserved.
