HOME > Instructors > Course Development > Web Courses > Web Page Design

Web Page Design

Basic Web Page Design Considerations

Whether you're designing a single welcome page or an entire course web site, check out this page for great tips and guidelines. Be sure to visit the Animations and Graphics Pages for even more tips.

Be sure to incorporate plenty of Feedback Channels
- Have your email address links on each page
- Have day/night phone, fax, mailing address clearly displayed on the home page
- Set up listservs, bulletin boards, chat rooms, and/or discussion groups and link to them from the home page
A Glossary and FAQs page will save you a lot of time and typing
- Anticipate questions and create an online FAQs page with answers.
- Draw on your past experience in determining the kinds of questions that may arise
- Ask potential students what kinds of questions they might have
- Ask a student or colleague to navigate your site as you watch them
- Anticipate words or concepts that may need clarification and create a glossary
- Have a link to netiquette morés, common emoticons and acronyms to help students acclimate to online culture
Make sure your page is easy to Navigate
- Have a table on contents on each (main) page, including links to
  - the library home page
  - the institution's home page
  - tech support
- Don't lose your audience with links! Use pop-up windows on links so your audience can always get back to your page by closing the link. If you use pop-up windows, you may want to tell students to disable any 'pop-up killer' software while on your site.
Carefully consider the use of Graphics and Animation in your design
- Don’t overdo graphics and animation! Use graphics in small doses to maximize effectiveness. Be able to justify the presence of every graphic -- does it support the message?
- Remember your audience; students may have slow Internet connections. Heavy use of graphics and animations will increase their download time.
- Be able to justify effects/animation or people will begin to anticipate the next effect rather than concentrating on the material
- When content must be downloaded from your site, make the file as small as possible
- Use interesting graphics. Everyone has seen the clip art that comes with Word -- find something new! Look at the links on the Animations page for ideas, and also to see what too much animation looks like!
- You may want to reduce your image sizes so that they are as small as possible yet still convey the information
- You can reduce the quality of a JPEG file (high, medium or low quality). The image will contain less information so it will be smaller. You can often reduce image quality while still delivering your message.
- Reduce the color content of your image and you will reduce its size. Changing the color palette of some images from 16 million colors to 256 colors does little to change the quality.
Use Colors and Fonts wisely. ABC
- Use subtle pastel shades for backgrounds and minor elements
- Make sure the font color and background color work well together
  Check out this interactive color chart to select text and background colors
- Avoid bold, primary colors for backgrounds
- Too much color can cause confusion
- Avoid patterned backgrounds that clash with your text or images
- Use a common sans serif font (Arial, Helvetica)
- Don't use fancy script fonts. Some people may not be able to see it anyway, and those who can will wish they couldn't!
- Avoid all uppercase headlines. They're harder to read
- Avoid Capitalizing Each Word In A Headline
- Go easy on italics; overuse of italics ruins the effect (and your eyes!)
- Block your text so it’s only a few inches long – 40-60 characters max, so no one has to scroll across the screen to read. Think in terms of screens, not pages. Try to adhere to the 3-Click Rule(s).

Remember to use these General Design Tips
- The top 4 inches of the page are the most crucial, since that’s the area most users will see when they hit your page, regardless of monitor size. Make sure you've got the most important content in those top four inches -- contact info, links to the home page, special announcements, changes to schedules, etc.
- To promote long term retention, try to foster a positive emotional association with the content
- Use similar logos or repeating patterns on web page, handouts, mailings, etc. to increase recognition and retention
- Design a friendly and engaging background without going overboard
- Test your content
  - Have you checked and RE-CHECKED for spelling errors and typos?
  - Have you asked AT LEAST one other person to proofread your page?
  - Is the content readable?
  - Do the hyperlinks work?
  - Do the directions make sense?
- Evaluate your content
- Revise your content

Miscellaneous Tips

Use common file types.
Keep your audience in mind. Even though you may have state-of-the art computer equipment and the latest software releases, your students may not. Don't make it hard for them to access the course material.

Clean up documents for smooth conversion.
Watch out for special characters or fonts. Some symbols don't translate from MS Word into HTML. For example, in MS Word a smiley face emoticon appears as it 'should' -- in other programs it shows up as the letter "J" or as a question mark.

Direct users to necessary plug-ins or helper applications.
Many sites like Adobe offer instructions on how to link users to their sites for free product downloads. For example, Adobe offers "Get Acrobat Reader" and Adobe PDF logos. The "Get Acrobat Reader" logo should point users to Adobe.com to download the latest version of Acrobat Reader. The Adobe PDF logo tells users the document they are downloading is in Adobe Portable Document Format.

Download a free copy of Acrobat Reader to view PDF files

Keep images small.
Choose the smallest size file format that is practical to minimize the time it takes for your page to load. Again-- not all of your audience will have high speed access and won't appreciate waiting for an image to load, particularly if it isn't relevant.

Consider user screen sizes when creating tables.
Don't make your user scroll from side to side to view the entire table. Set the table size to 'percent' rather than 'pixels' so it will automatically adjust to the user's screen.

Test your recall! Click on the compass to take an interactive self-assessment made with FREE WebQuestions2 software. Close the answer window and the quiz window to return to this page. Download the free WebQuestions2 software here.

HOME > Instructors > Course Development > Web Courses > Web Page Design

Continue with Animations and Graphics

The Northeast Texas Network Consortium Coordinating Office / 11937 Hwy 155 at Hwy 271 / Tyler, TX 75708
phone (903) 877-7510 / fax (903) 877-7430