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 microsoft.com 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.
   
   
• You should probably use an absolute width of 480 pixel if you want to work with the lowest common denominator of possible screen resolutions. Many contemporary designers though are using tables with 700-760 pixel widths assuming that their audience uses 800 x 600 resolution or greater.
• Activity: Test Dreamweaver's convenient screen size toggle switch in the status bar at the bottom of the page editor.
• Activity: View the source code of professionally-designed pages to see what absolute table width others are using.
• Activity: Create a quick Flash page to see how a Flash designed site can be used to create pages that proportionally resize too the browser.
• Type a quick web page with the source  <a href="javascript:resizeTo(640,480)">click to resize</a>   
  
  Then bookmark that page and visit it to quickly resize your browser window to see how your pages or other designer's pages look in a browser window at 640x480 resolution. See other bookmarks at bookmarklets.com.
  
  
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 bestdesigns.com 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.
   Activity: 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.
   
   
• Use shorter line lengths for readability. Do not use more than 10 words horizontally on home page
• If the client supplies you with copy that is too wordy, ask him to chop it up.
• Do not try to say too much on a Web page. Less is more - see Weinman's simplicity inspirational sites.
• You should probably assume that the user is skimming your page to start with so you must forcibly grab his attention with your design and your content.
• Use active white space so that your page is easy to understand. This is very important for a site's home page.
  
  
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.