Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Web Site Design and Navigation

   

Assignment: (Do before Class):
Dreamweaver MX, pp. 30-38;
Web Page Design, pp. 40-42, 56-58;
Page Design

Assignment: (Do after Class)

1. Go to the Digital Design class Website.  See if you can figure out what the site structure for this website is.  How have I laid out the site so that a user doesn't have to click more than three times to get to any page on the site?

2.Practice creating a model grid template layout that you can use to create any future webpage?  Here is an example of such a model grid template layout:

3.  You could copy this Modelgridlayout file or you can create a couple of different versions of this gridlayout   page.  I colored the backgrounds to show you how the modelgridlayout page would look on the web.


1. Basic elements of a Digital Design class Website

2. Looking at Webgenre pages for Ideas

  1. Wild Oats Market

  2. Birkenstock.com

  3. BMX Online

  4. CMT.com

  5. Maccosmetics.com

  6. Led Zeppelin.com

  7. FreeTommyChong.org

 

2. Web Design Tools

3. Creating borders around images and text gifs. See Surfboader collage with border.

3. Creating Transparent Gifs

4. Adding hotspots (links) to images and text gifs.

5. Creating Collages

  1. See collage.jpg: Sewall Snow Days
  2. See surf1.jpg: Surfing Days
  3. See hotspt.htm : National Parks and Surfing

5. Using the Gradient tool to create cool color schemes.

6. Creating Webpages with a table and layers

7. Use "Alt tags" on images because people
use the mouse to scroll over "dynamic web pages."

8.  How should you layout a Website

  1. Lynch: Basic Information Structure
    and Lynch: Creating Site Diagrams

  2. Create flowchart diagrams to help you 
    layout a website.


  3. Remember your site structure depends on how you want the user to access and use the information and related pages on your site.

  4. A well-thought out site structure makes 
    linking webpages within your site easier.

  5. A general rule is to try to create a
    site structure that requires no more than
    "3 clicks" to get to anywhere in the site.

  6. Site structure is important because web-
    surfers don't like to have to "click" too
    deep into a website to get exactly the
    information they need.

  7. A good site structure is user-friendly.

9.  Envisioning Site Structure by Using Flowcharts

  1. Navig.htm Hyperlink Site Structure Diagram

  2. Use the Dreamweaver Site window to check the layout and links between pages on your site.

  3. Planning Site Structure makes laying out
    the entire website much easer.

  4. Learning to Understand Site Structure from Model Sites
    1. UPS Home Page
    2. Adobe Home Page
    3. National Gallery of Art
    4. NASA Home Page
    5. C-Net Home Page

10.  Creating a Page Template for your website

  1. Example of Page Template for Digital Design website

  2. Picture Image of the Digital Design Page Template

  3. You can use Fixed-width or variable-length tables to create the outer limits or your webpage.

  4. Be careful using variable-width tables because your webpage content will look different in different browsers with different screen resolutions.

  5. Once you have created your initial table, you can now use layers in Dreamweaver to layout the grid for your webpage.

  6. Once you have created a basic model for all webpages on your website, save it as a template.

  7. Now everytime you create a new page for your website, you can do so by going to "File" and selecting "new from template."

  8. Using templates makes it much faster and
    easier to create additional pages for your website.

  9. See template for cclewis.com

11. Using Fireworks to edit images and create graphics

  1. Photo Tour of Sewall and Boulder
  2. Boulder Farmers' Market
  3. Creating thumbnails of Images
  4. Creating imagemaps and linking to them
    in Dreamweaver.

12. Using Fireworks to create basic buttons

  1. Demonstrate creating buttons and beveling
  2. Don't overdo beveling and drop shadows

13. Creating text-based navigation bars for text links

  1. See Digital Design Home Page
  2. See cclewis.com Web Design Portfolio
  3. In Dreamweaver, go to "Insert" and
    select "Special Characters".  Notice
    the special characters you can insert
    into your page
  4. See example of a Textbased bar gif.

14.  Web Genre websites

  1. Top 100 Photography Sites
  2. The Web's top Nature Photographers
  3. The Web's top Photography Pages Portal

 

 

 

 

 

 

 

 

 

 

 

 

Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
7501      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 13 February, 2006
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/navig.htm

Digital Design Course homepage