Saint Mary's College - Notre Dame, Indiana

Instructional Technology Resource Center - Saint Mary's College - Notre Dame, Indiana
 
 

web design principles

1. Do Not Overwhelm Your Audience

  • Do not give your user too many options when he or she opens the page. In webpage design, the main concept to understand is LESS IS MORE!!! The less cluttered your page is with links and graphics, etc. the more professional it will look.

2. Scrolling Text, Marquees, and Constantly Running Animations

  • Don't include page elements that move around a lot. Moving images have an overpowering effect on the human peripheral vision.
  • Any form of blinking text or constant animations are distractions for the user, and should not be used too frequently.

3. Long Scrolling Pages

  • Only 10% of users scroll beyond the information that is visible on the screen when a page comes up. Therefore, it is best to put all important information at the top of your page.
  • All critical content and navigation options (links) should be on the top part of the screen when your site is displayed.

4. Create an Understandable Structure

  • Provide a site map and let users know where they are and where they can go.
  • Build a table of contents on your home page telling what your site offers. Keep the text short and the navigational graphics small yet attractive.

5. Non-Standard Link Colors

  • Certain colors are standard for links that have been followed, and links that have not been followed.
  • Don't change colors used for links unless the link color interferes with your background. If this happens, either change the settings for the links on that page, or create a table for the text.

6. Long Download Times

  • All webpage designers need to consider download times. It doesn't take long before users lose interest. If your page takes a long time to download, users are more likely to visit other pages instead.
  • Be sure to consider how long it takes to download your page when you're designing it. Having too many graphics slows down the loading process and makes the reader impatient.

7. Tables

  • Limit Line length with tables. Readability is maximized when there are only 8-15 words per line.
  • Do not have tables exceed the size of the screen. Horizontal scrolling makes it difficult to read what is on your site.

8. Text

  • Limit Paragraph length. Screens are less readable than paper, so give your readers a break by using short paragraphs and bullets.
  • Use sans-serif fonts for readability (examples are: Verdana, Helvetica, Avant Garde, Arial, and Geneva).
  • Small fonts are usually easier to read on the web.
  • When choosing a font, be sure to be consistent and stick with ONE particular font per page.
  • Check to be sure that text is readable. If it is difficult to read the chosen font for a page, you may want to consider changing the font. Previewing your site before you publish it is an excellent way to avoid this problem.
  • Do not underline text unless it is a LINK (this confuses the user).
  • Make your text more readable by giving it some "breathing room," and moving it away from edges and borders.
  • AVOID MAKING SPELLING ERRORS in your website!!!! Nothing looks more unprofessional than when you have a page that is full of mistakes. Read over the information you provide CAREFULLY and check to make sure you have not made any errors.

9. Giving Your Page a Meaningful Title

  • Titling your page is not to be confused with the heading at the top of the page itself.
  • The title is essential because it is the name that search engines use to find your site on the web and also the description used when someone bookmarks your page.

10. Graphics

  • Try to use only GIF or JPG files when including graphics on your page.
  • Don't put too many pictures on one page, as that slows down the loading time for the user. Also, be sure all pictures included on your page are as compressed as possible.
  • Try to use original graphics. If you borrow something from someone else, be sure to get that person's permission, and give him or her credit for the particular graphic on your site.
  • Use transparency around a graphic that is non-rectangular in shape.
  • Put graphics and text side by side. This is recommended because graphics rarely take up the entire width of the screen, therefore putting text next to the graphic minimizes scrolling.

11. Backgrounds

  • Try to avoid busy backgrounds that detract from the content of your webpage. If you decide to use a busy background, it is recommended that you lighten it before using it for your page. This will help your text to be more readable.
  • If you use a solid color for your background, try to use only muted colors. Bright backgrounds make reading difficult because it hurts the reader's eyes.
  • Do not use a background that has animations. Animations distract from the content of the page.

12. Links

  • When creating links on your page, be sure you are descriptive. Avoid simply putting the address to a link. For example, if you create a link to your friend's webpage, do not just include the URL to the site, but include what the site is about.
  • Include a "Back to Homepage" link on every additional page you make. This will assist the user in navigating around your site.
  • If you include a link to your email address, it is suggested that you put your address (For example, jdoe1234@saintmarys.edu) on your page as well as creating the link. Some web surfers do not have a default email program that automatically opens those links, and therefore those people will receive errors if they click to send you an email.

Information for this was taken from the following places: