Illinois Online Network myion

Resources    online education resources

Simple Web Page Style Guide


Web page design depends entirely on your message. What is the purpose of your web site? Is it a personal homepage, a commercial site with the intention to sell a product, an online course in Chemistry, English, or some other subject, or the home page of your school? Before you can consider design issues you must identify the audience you intend to reach and the overall message of you want to convey. Sometimes this is not easy. For example, a college web site should look professional, yet retain a feel that is appealing to students.

As you create your web pages, you will probably want to add graphics and other elements. For example, for a school’s home page, often certain logos and colors should be included in the web site’s theme. As you build your pages, ask yourself the question, "Does the element I want to add have a purpose in the web page?" If the answer is yes, then insert the element onto the page. If the answer is no, do not include it.

Before you start building your pages take a look at other web sites with similar goals as yours. For example, if you are building a site for a school home page, look at other schools’ sites. Consider what looks good and what looks bad. As you build your site, remember that each word, image, and link should have a purpose. Images and links should be self-explanatory and easy to use.

The following are some general guidelines to consider when you design a web site:

1. Keep the message concise.
2. Make sure that graphics look good at a low resolution (640x480) since not all computers have high resolution capability.
3. Design your web site for the lowest common browser type. For example, some users might have a text-only browser, and you should keep that in mind when you use images to convey information. Use <alt> tags to give a text description of each image you use.
4. Make your web site easy to download quickly. Remember that every image or dynamic component you insert into your web increases the amount of time that it takes for your page to load. The average person’s "Internet-attention-span" lasts about seven seconds, so the longer the load time, the less likely the user will stay at your site.
5. Just like other graphics within your web site, background images should support the message, have a purpose, and be of a good quality at low resolution. If you plan to use a background, you should avoid:
  • Dark colors combined with dark text fonts.
  • Distracting images that overshadow the text.
  • Large files that require users to wait for the background to download.
  • Backgrounds that clash with your images.
6. If you use one graphic repeatedly throughout your site, downloading time will be reduced. The reason is that once the image is downloaded the first time, it remains in the computer’s cache. The next time that image appears on the site, it will be called from the cache instead of the Internet.
7. Make your site easy to navigate. The links should be easy to understand, graphic links should be clear and have text link backups, and previous pages or sections should be easy to return to.
8. Every graphic that you include on a page should support the message. Ask yourself about the image’s purpose and use. If you cannot defend its presence, do not use it.
9. Don’t over do it. For example, too much animation, too many colors, multiple font types, and long sections of unbroken text will draw away from your message.
10. Pay attention to details:
  • Does the title match the page content?
  • Does each page of your site have a Navigation bar?
  • Are all of your HTML tags PERFECTLY correct?
  • Have you checked and RE-CHECKED for spelling errors and typos?
  • Have you checked the consistency of the design elements (styles, buttons, bullets, backgrounds, etc.)?
  • Have you included an email link to the webmaster or other contact person on EVERY page?
  • Have you checked and RE-CHECKED for spelling errors and typos? (yes, do it twice!)

 

 

Home | Educational Resources | Web Design

Home | Online Courses | Institutes & Presentations | Educational Resources | Initiatives | Institutional Partners | About ION

uiuc uic uis