ETC Technology Training
Previous Page Contents Next Page

Basic Web Design

The Good, The Bad, The Ugly

Learn good web design by looking at bad web design! There is an entire website devoted to this purpose. Take a look at it and see if you can find the mostly poorly designed website: http://www.websitesthatsuck.com/

Tips

As you read these tips, consider why each of them might be important based on the bad websites that you just looked at:

  • Keep it Simple

  • Simple IS NOT Boring

  • Know your audience

  • Five Fingers

  • Three Clicks

  • Thirty Seconds

  • Words Matter

  • Balance

  • Frames in Moderation

  • Keep Learning!!!

These tips were taken from Project Cool's Guide to Web Design. To find out more about why they choose them go to: http://www.projectcool.com/developer/tips/design01_tips/index.html

Advice for Getting Started

Use a pencil and paper first!

  • Create a basic outline of your web page's content.
  • Sketch a simple structural diagram based on your outline. Does your content lend itself more towards a linear structure like a story or more hierarchal like an upside tree?

Select a color scheme and layout for all of your pages.

  • Keep it consistent across all pages. If you have a link back to your home page at the bottom of your first content page, do not put it at the top of your next content page.
  • Be careful when you select colors. For the sake of those who are colorblind, do not choose a green background and red text. Also make sure that there is enough contrast between the colors that you choose that people do not have to squint to read your pages.

Gather all of the pieces (graphics, sounds, quizzes, external links, etc.) that will make up your website.

  • Keep everything that you collect together in one folder. It will make it easier find things and to create your web pages when you are ready to do that.
  • Do not feel like you cannot go back and get something after you have started creating your pages. If you find a really good external link as you are gathering content, you can always go back and add it later on.

Finally pull everything together in your web pages. Keeping in mind that you cannot control how your page will be seen by others due to the variety of browsers, fonts, video displays, monitors, number of colors, and so forth used by the users. Therefore:

  • Check your web page using more than one browser, such as Netscape Navigator and Internet Explorer.

  • View your web page with the monitor set at a different size, such as 640x480 or 800x600

  • Provide a link back to your homepage from each page.

  • Sign your page. Include the page's URL or a Base URL for your site, date of last update, and e-mail address of a contact person.

  • If creating multiple pages, create your own template page with the format so it will be easy to create new pages.

Sample Web Lessons

Students in Mrs. Strawhecker's class created the following web lessons last semester:

For More Information about Web Design
Top