Foundations of Web Design


  1. Keep user interface (user-friendliness) central to the whole site and page design process. Think like your audience. See Weinman's "inspirational" sites for good navigation
  2. You must flowchart and organize your site before you build your navbar (navigation bar) and other navigation elements.
  3. Remember to use active white space around navigation elements.
  4. Remember alt tags, since accessibility is important these days. In fact, you should use Bobby to make sure that you site is user-friendly and accessible, especially with regard to navigation.
  5. Keep in mind that the user needs to have a sense of scale, a sense of direction, and a sense of location (p. 57) while browsing your site. Make sure that your site's navigation provides these and that a user can visualize where he is within your site at all times.
  6. Consider providing a search query box on your home page since some users prefer to search for something rather than to browse a site through the navigation bar.
  7. Review named anchors which are created by using the Insert/Invisible Elements/Anchor menu command and linked to by typing the name of an anchor directly after a # symbol in the Link area of the Property Inspector.

  8. Navigation bars
    • Types
      • button bar - graphics, words, Javascript mouseovers, etc. It could be created as a sliced graphic held together by a table or as seamless graphics aligned next to each other. It can be placed at the top or the left of the page.
      • icon bar - an icon is a 32 px by 32 px image
      • image map - one large graphic with hotspot areas
      • text links - plain words that are hyperlinked
      • a tabbed top or side navigation bar
      • other types of navigation? button bar at the top of each page
  9. Include visual navigation cues

    • use color to indicate which section of the site the user is currently in
    • use icons such as arrows
    • possibly use metaphors as navigational cues (ideographs and pictographs)
    • do you wish to always rely on blue, underlining to indicate text hyperlinks?

  10. Use Javascript rollovers or DHTML to indicate clickable graphics

  11. Activity: Find 3 Web sites that use different but effective visual navigation cues.

  12. Activity: Use the Show/Hide Layers JavaScript behavior in Dreamweaver to create a simple popup menus. This is an example of DHTML.