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

Understanding Web Genres

Assignment:  (Do before Class):
Web Page Design
pp. 20-38;
The Site Development Process

Assignment for Friday:
come to class
with a list of three or four links to websites
you want to use as models for your
Webgenre websites. See Professor Lewis's
model web genre websites.

Assignment:  (Do after Class)

1.  See if you can't fix some of the problems with your Design Portfolio site based on what you learned in class today.

2.  Go to Sewall Class Designs  and look at other Students' Portfolio pages.  What lessons can you learn about web design from your fellow students?

3.  Go to C-Net  Look under the categories--Internet, Utilities, Multimedia Design, and Web Authoring.  What are some of the tools you can download to help you make better web pages?

4. Install Fireworks 8 trial (PC)
Install Firewoworks 8 trial (Mac)

"People take their personal sites very, very seriously....
but don't you dare tell tell them their personal Web 
page is ugly."
                       Flanders & Willis (p. 7)

"Flanders: There are certain sites, such as movie, band,
and Web design company sites, that have the right to be inherently stupid. It's by their very nature."
 "A Discussion with Jakob Nielsen and Vincent Flanders" (new window)

1. Student work

  1. See Criteria for Design Portfolio webpages

  2. Make your homepage file name "index.htm"

  3. Make sure your homepage comes up
    when you go to your Design class account:

    for example:

  4. Make sure you have two webpages: 1) a homepage
    and a 2) Web Design Portfolio page. Make sure you
    can get to these pages using links on your Design
    class account. I will look for these working web links
    on Saturday when I start grading your pages.

  5. By Friday, test and make sure that I have the
    correct e-mail address for you by going to the
    class website and sending yourself an e-mail
    message using your e-mail address on this site:

  6. Bring a copy of the successful or unsuccessful
    e-mail message that you sent yourself to class
    on Friday. I will give you "20 points" for
    running this e-mail address for me.

  7. Revise your homepage and portfolio webpages
    so that all the images work, there are "Alt"
    tags for each major image, and all links work.

  8. I will grade your homepage and web design
    portfolio page beginning Saturday morning.
    See Criteria for Design Portfolio webpages .
  9. If you have not completed the above work by
    Saturday, I will take points off your homepage
    and web design portfolio page for being late.

2. Install Fireworks 8 trial (PC)
Install Firewoworks 8 trial (Mac)

2. Changing Link Properties

  1. See genres2.htm

  2. In Dreamweaver, go to "Modify" and
    select "Page Properties." Here you can
    change the link colors and other page

3. Understanding Web Genres

4. Snowboarding and Skiing Websites

5. Building a Snowboarding site

6. Controlling Screen size of your Webpage

  • 640 x 480

  • 800 X 600 (Default size for current websites)

  • 1024 x 768

  • 1280 x 1024

7. Using Fireworks

  1. Install Fireworks 8 trial (PC)
    Install Firewoworks 8 trial (Mac)

  2. Always use "jpg" or "gif" file formats for the web.
    Don't put "png" image files on the web.

  3. Digital Camera Picures ( DSC02659)

    --See Edited Picture on webpage

  4. Pictures of Sewall Hall and Sewall Students

  5. If you copy a "bmp" image off the web, make
    sure you convert it to a "jpeg" or "gif" file format.

  6. Start by using Fireworks to reduce or increase
    the size of the images you have on your websites.

  7. Don't put "png" file format images on the web.
    Fireworks will automatically save your initial
    work as a "png" image.

  8. Use Fireworks to adjust the quality, contrast,
    and brightness of your images.

  9. Always save your original "png" versions of
    the images you put on the web. It is easier
    to edit and change "png" files than "jpeg"
    or "gif" files

8.  Understanding the HTML Source Code for a webpage

     1. Reading and Copying HTML Source Code

      2.. Practice calling up the three class examples I
created of a Design Portfolio Page:

       2.  Practice calling up and looking at the HTML source
            code for these three model pages.

        3.  Can you think of ways to copy some of my  HTML
             source code in order to make it easier for you to
             create your own Web Design Portfolio websites?

9.  Dreamweaver Lesson 2

  1. Adding images to a webpage. See
    Chris Lewis Design Portfolio, model 4

  2. Did you notice that I used "layers"
    as layout grids to control where my images
    are placed on this webpage.

  3. Alligning graphics and adding "Alt tags."

  4. Wrapping text around an image

  5. Adding borders to images.

  6. If you use borders, make sure they are invisible.
    Black borders are not really necessary for good design.

  7. Go to "Modify" on the menu bar and select,
    "Page Properties."

  8. You can use "Page Properties" to modify
    the properties of your entire webpage.

  9.  Use "Page Properties" to add background
     images to your webpage.

10.  Basic Questions to ask about the Websites you Design.

        1.  Does your Website Design work with your "targeted audience"?

         2. How does the Design of your Website portray your 
             Image and Style?

          3. What does your Website say about who you are 
               and the Work you do?

          4.  Can, or should, your design lie about who you are?
               Companies often pay advertisers to create ad copy
               that misrepresent or even lies about their reputation. What should a designer's professional ethics be?

11.  Lessons in learning Web Design

  1. The first step is learning to use the tools

  2. The next step is understanding the limits of your tools.

  3. The next step is learning to lay out a web page.

  4. The next step is to learn basic design.

  5. The next step is learning how to trouble-shoot your
    web pages.

  6. The final step is revision, revision, and more revision.

12.  Learning Design from other Web Designers.

  2. David Siegel Design Home Page
  3. Dmitry Kirsanov Design Studio
  4. Dmitry Kirsanov Web Portfolio
  5. Circle.Com--Roger Black Web Designer
  6. Best of the Web--Web Design and Development
  7. New Media Design Web Portfolio
  8. The Internet Design Firm

13.  How should an Apprentice Designer advertise their skills?

14. The Importance of  a Design Portfolios for Web Designers.




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: 
4574                   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: 11 December, 2009
Digital Design Course homepage