Foundations of Web Design

Basic Design Principles

  1. Using tables to layout page

    • use tables to serve as a grid for interesting or effective design; do not make excessive use of them though by nesting several tables inside of each other. When you nest tables, it is more difficult to modify the page, it slows down the browser a bit, and it drives up the overall size of the page.
    • use small tables rather than one large table
    • difference between tables sized as percentage of window or with absolute pixel size. See as an example of a page where one column expands to fit the browser window. See Penn State Berks' home page as an example of a page with a table that has an absolute size in pixels.
    • view other sites' use of tables by opening in Netscape Composer or Dreamweaver

      • Activity: Open commercial sites in Netscape Composer (File/Edit Page) to observe or copy their use of tables. First predict whether or not a table was used. If a table isn't used, determine how the author has placed graphics, text blocks, and other elements across the page. The author may be using DHTML layers or Flash.
      • Activity: Create a table that has 3 or more columns making the left and right columns a fixed pixel width but the center column unspecified. Make the table itself 100%. Use a browser to view the page and resize to see the middle column "take up the slack".
      • Activity: Decide whether or not the pages in the site you are designing for this workshop will have a fixed width or 100% browser window width. Modify the table(s) in your site's home page using the View/Table View/Standard View menu command. If you haven't already used the View/Table View/Layout View menu command to draw a table, do so now.

  2. Determining the width of the pages in your site is an important step. This should be a factor of the monitor size and resolution of your audience.

  3. Use active, rather than passive, white space to make it easier for users to focus on the important elements on a page. This
  4. Remember that on a home page, the motto "less is more" usually applies, especially with regard to content and maybe even links. Keep down the visual noise (see p. 38 and pp. 46-48).
  5. Tour sites such as to see how other designers effectively use tables and design principles.

  6. Use single pixel spacers effectively to align items on your page and to set minimum cell widths.
    Create a single pixel spacer if you haven't already and use it to force a table column to have a minimum width.

  7. Realize that users scan a web page rather than read the segments of text on the page. They are probably scanning your Web page from left to right and top to bottom. So place items appropriately to get their attention. See the illustrations pages 21 & 23 of our textbook.

  8. Do not get out-of-hand with the overall number of colors and fonts on a page.

  9. Readability issues.

  10. Consistency in design is key. However, a balance between unity and variety is important.

  11. If the page is meant to be printed, do not use white text on a dark background. Also be sure to limit the width of the page to what a printer can handle.

  12. Make sure that important search keywords in plain ASCII text (non-graphics) are placed toward the top of your home page so that search engines place your site higher in their index.

  13. Take advantage of Macromedia's Designer & Developer Resources site to learn more about design and Macromedia's tools including Dreamweaver, Fireworks, & Flash.