Foundations of Web Design

Site Design

  1. Planning the site is very important.

    • meet with the key player(s) from the organization itself & identify their goals
    • determine the audience
    • the user's bandwidth - 56K modem, cable/DSL modem, or better
    • the user's browser - Netscape v?, Internet Explorer v?, & preinstalled plug-ins
    • the user's monitor resolution - 640 x 480, 800 x 600, 1024 x 768, or higher

  2. Flowchart the site

    • Flowcharting is the intentional design of the overall site. I recommend that you draw small rectangles on paper to represent each planned web page. Use arrows to indicate which pages link to which pages. Also write the planned filename for each web page next to its rectangle.
    • you can use the Site Map in Dreamweaver to view your site's flowchart
    • flowcharting helps you to identify and stick to your navigation principles
    • write out the names of your sites folders and files beforehand
      • do NOT make up filenames as you develop pages or they will end up inconsistent
      • naming files consistently makes for a low-maintenance and stress-free site
    • plan your site's conventions early so that you the site is easy to maintain and so others can share the workload
      • lowercase letters in filenames
      • use .htm extension rather than .html & .jpg instead of .jpeg
      • no spaces or symbols in filenames
      • decide whether or not to keep images and multimedia elements in folders separate from html files
        • for example, I store images in folders named "images" and sounds in folders called "sounds" but name those files carefully & consistently
      • see the "Web Design Coding Standards" that I require my students to follow

    • Activity: Flowchart the 3 (or more) page site that you must create as the Final Project for this workshop. Details for this project are listed on the Student Manual for this workshop that was distributed at the beginning of class.

      You must choose from one of the following:

      • a site that advertises a homemade product or craft
      • a site that advertises a place of interest in Berks County (e.g. Pagoda, Daniel Boone Homestead, Sovereign Center, etc.)
      • a site that advertises your home for sale
      • a site that advertises food that you might sell (e.g. pies, canned goods, home-grown vegetables)

      • You must be able to easily access visual material related to your choice. These graphics can be illustrations or graphics drawn by hand, scanned images, or digital pictures. You must bring these graphic files (png, gif, or jpg) with you to our next class. Make sure though that you have copyright permission to use the graphics in your web site.

  3. Storyboarding

  4. Cascading style sheets (CSS) give a Web site a consistent and uniform appearance, by defining and applying styles such as font color and size to elements on all pages within a Web site.

  5. Design locally, publish globally