Good design is crucial to your site’s usability as well as to the aesthetic impression you make on viewers. These elements will help your site be functional as well as pleasing.

• Navigation
• Color Palette
• Photography
• Typography
• Usability
• Best Practices

Navigation
Navigation is the key to helping users find information on your site. Organize your site based on your primary users’ needs, not your organizational chart. Your goal is to help your users find the information they want as quickly as possible.

• Use a set of navigation links in the left margin on every page of your site, a practice called global navigation. This helps users explore your site and return to your home page easily. Although every page in your site does not need to appear in your navigation links (i.e. there will be links within the text), every page in your site should display these left margin links.
• Make your page title descriptive. This helps the reader understand what your site is about. It is the text that appears if the user bookmarks or prints the page. In addition, many search engines use the title to help determine how and whether to display the page in search results. Include it in the <title> tag of your HTML.
• Make sure your pages aren’t isolated. Users frequently enter sites on pages other than the home page, so make sure that users can navigate your site from any page.
• If your page is long, offer internal links so users don’t have to scroll.
• Users should not have to use the back button to return to your home page.
• Offer a site map or site index.
• If your site is complex, include a search engine.
• Include a link to the site’s Webmaster so users have a contact for assistance.
• Avoid the use of frames, which make your site less accessible for many users.
• Links should tell users if the destination is not another Web page, such as a PDF or Word document.

Color Palette
A consistent color scheme helps users navigate the DePaul Web site as well as reinforce our graphic identity. DePaul does not restrict the use of colors on the Web, but for a list of "Web safe" colors and their corresponding codes, visit http://www.web-source.net/216_color_chart.htm.

Headline Colors
Use color for headlines and subheads to provide emphasis and to break up sections of text.

Link Colors
We encourage you to follow these common practices for Web links:

• Embedded text links always should be underlined and in a different color than the rest of the text. Most unvisited links on the Web are blue.
• After a user has visited one of your links, it should change color. Most visited links on the Web are a lighter blue than the one used for unvisited links.
• Links in your navigation panel do not need to be underlined or appear in the same color as your text links.
• You do not need to underline links in a bulleted list. However, they should appear in the link color.

When text is black or dark on a light or white background, the following colors are recommended:

Links: #0033cc Visited links: #6699ff

When text is light or white on a black or dark background, the following colors are recommended:

Links: #ffffff Visited links: #999999

Photography
When used correctly, photographs enhance your site, but several requirements must be met.

• All images must be either owned by the university or licensed for use (i.e., purchased with the understanding that the image will appear on the Web). Do not assume that photos which appear in brochures or magazines are licensed for the Web; generally, they are not. If you use a professional photographer’s images, the photographer must grant specific copyright permission for use on the Web.
• Do not reproduce photos from another site; it is a copyright infringement.
• When using photos of students, a photo release signature must be obtained from the subject(s) in the photograph. Sample of the photo release form for adults and the photo release form for minors are available.
• All photographic images should have a digital watermark to guard against copyright infringement. Digital watermarking can be done through Internet Communications.

Photo sizing
The higher the resolution, the more slowly the photo loads in the user’s browser. Resize your photos to a resolution of 72 dpi. If you need to post a high-resolution image, provide a link from a thumbnail to a downloadable file. When sizing photos, be sure not to distort the image.

Correct usage of photo



Incorrect usage of photo


(Stretched Vertically)


(Enlarged proportionally, but the enlargement causes pixelation)


(Stretched Horizontally)


Typography

HTML text
Most of your site’s content should be in HTML text, which loads quickly, is easy to edit and is fully accessible to users with assistive devices.

Operating systems, software, browsers, screen resolution and font preferences all determine how HTML text will look on the screen. Users are able to adjust their displays to suit their needs and preferences. However, you can partially determine how your text displays by using style sheets to define relative sizes and weights. You can also specify preferences for a particular font. Remember that users must have the font you’ve chosen on their computers to read your page properly.

Several fonts are recognized for their readability. Arial, Helvetica and Times New Roman are commonly used because they are so reader friendly. Common serif fonts used for headers or titles are Times New Roman, Bookman and Palatino.

Choose font sizes that are large enough to read but not gigantic—very large letters are hard to read. Use italics sparingly. The only underlined text should be hyperlinks.

Text Graphics
Text graphics allow you to control how certain copy on your page appears. While this can be attractive, it makes your page load more slowly. And, unless you use alternative text <ALT tags>, users who don’t have graphics enabled on their browsers will not see these images. Limit use of text graphics to primary navigation links, site titles and decorative headers.

View an example of text used as an image

Style Sheets
You can create pages for your Web site faster and with fewer mistakes if you create style sheets. A style sheet enables you to specify all your formatting—font, color, heading sizes and styles and other elements—into a single style that can be applied to new blocks of text. In addition, if you change your style sheet, the change will appear throughout your site.

You can learn more about style sheets by visiting http://webmonkey.com/webmonkey/reference/stylesheet_guide/


Usability
Usability testing helps you understand how users actually use your site. You can do usability testing in the planning stages to help determine navigation, with your initial site design to find out how people interpret your visual cues, and as a final check before you go live.

Usability testing can be done effectively with just five to 10 people. Give each person half a dozen tasks that visitors to your site would commonly do. Have an impartial observer take notes about the choices they make. You also can ask the testers to talk out loud so that you can understand their perceptions. Each person works separately, without observing the others. You’ll quickly discover if portions of your site are confusing or if you need to give people better methods to accomplish tasks.

For more information about usability testing, contact Internet Communications.


Best Practices

• Keep your home page clean. Pages with lots of links, images and text confuse viewers. Your home page should provide a brief introduction and clear navigation links.
• Prioritize. Most viewers skim Web sites. The most important information should be easy to find. Place less-important information on pages deeper in your site or in follow-up materials.
• The upper left-hand corner is key. Users scan a Web page from left to right, top to bottom. We recommend putting the DePaul logo in that corner and your program name to its right.
• Forget the bells and whistles. Most users are looking for specific information. Fancy graphics, audio and other trendy applications slow loading times. Unless you need a certain application to convey your information, don’t use it.
• Be careful with color choices. Use contrasting colors for your text and background. Black or dark text on a white or light-background is easiest to read. Busy backgrounds or bold, intense colors can impair readability.
• Be print friendly. Users may print your pages. Can your page be read in black and white?
• Use relative font sizes for HTML text. Let users adjust text size within their browsers for maximum visibility.
• Avoid very large or very small type. Use changes in type size to indicate the relative importance of information.
• Boldface and italics are harder to read. Avoid them in body copy.