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

Graphic Design and good Web Design


Assignment: Work on finishing your image websites.
Remember, your image websites are due March

1. See Examples of Image Websites

2. Creating a website on Hotels at Waikiki

  1. Visit Waikiki Working Draft

  2. Graphics that helped stimulate
    design work for this website

  3. Basic Page with the slideshow
    in a movable layer

  4. Ideas for Revising and Improving this website.

3. Redesigning the Sewall Academic Program Website

  1. Sewall Academic Program website
  2. Example of draft revision of Sewall Homepage
  3. Gallery of the Open Frontier: Digital Image Library
  4. Images of the American West
  5. Images of the Western States
  6. Images from the History of the American West
  7. American West Images

3..Remember, your Image websites are due on Saturday, March 25th.  If you need some ideas for improving your websites, see Webby Awards and/or Lynda Weinman's Inspirational Websites and look at some of the award-winning websites across different categories. I would refer to these categories as web genres.

2. Logging on to and using Smart Force's E-Learning Site

  1. Go to Smart Force's E-Learning Site at:

  2. Smart Force's E-Learning Site is open to all
    CU faculty, students and staff.  All you need
    is your CU login name and your "Identikey"

  3. From the Smart Force homepage, go to 
    "E-Learning Paths" and select "Assigned

  4. You will now have a choice between two CU-Boulder IT curricula: 1) IT Certification and 2) IT Curricula. Select "IT Curricula."

  5. In "IT Curricula," notice all the online E-Learning
    IT appplications courses you can take.  Select
    one of these that interest you and explore the material

  6. If you are interested in the full features of Smart Force's E-Learning website, select "Take a Tour"
    to get a full tour of all the material available to
    you on this site.

  7. Smart Force's E-Learning website provides CU-Boulder faculty, staff, and students invaluable IT and computer learning resources.  So take advantage of the Smart Force website.

3.  According to Alan Swann in his book, "How to Understand and Use Design and Layout":

"The basis of design is the bringing together of various
   elements into one area to achieve an interaction that
   will communicate a message within a given context.
   The message may be conveyed and even manipulated
   through the careful visual juggling of the elements that
   are used within the design area.  Essentially, these
   elements will be words, photographs, illustrations, and
   graphic images, combined with a controlling force of
   black, white, and color."

Once you understand the basic elements of graphic
design, then you can manipulate and  use them to create good designs.

5. Roger Parker on Successful Graphic Design:

    "Successful graphic design usually emerges from
       trial-and-error experimentation.  Complicated 
       solutions are the result of a willingness to try
       various design alternatives until the solution
       'looks right.' "

     "Effective design is a process of experimenting
        with the tools at your disposal....Remember
        there's no single design solution suitable for
        every [graphic design]. There are always 
        'better' solutions, but never a 'best' solution."

6.  Let's look at three Photoshop sample design pages:

  1. Graphic Layout Number 1

  2. Graphic Layout Number 2

  3. Sewall Academic Program Homepage

7. Williams' Four Basic Principles of Design--CRAP Principles

  1. Contrast

  2. Repetition

  3. Alignment

  4. Proximity

8. Using the CRAP Principles to manipulate the elements of a graphic design page

  1. Contrast.  If the elements are not the same, then
    make them very different.  Contrast is often the
    most important visual attraction on a page.

  2. Repetition.  Repeat the visual elements of the design throughout the page.  Repetition helps develop the organization  and strengthens the
    unity of a page.

  3. Alignment.  Every element on a page should have some visual connection with another element on the page. Alignment creates a clean, sophisticated, fresh look.

  4. Proximity.  When several elements are in close proximity to each other, they become one visual unit rather than several separate elements. Proximity helps organize information and reduces clutter.

9. Seeing websites with the eye of a Graphic Designer and Artist

  1. See Lynda Weinman's Inspirational Websites

  2. See the Webby Awards websites

  3. A skilled web designer learns to develop an
    "artist's eye."

  4. Robin Williams on learning to see how the eye
    moves on a page:

    "Be conscious of where your eye is going; where
      do you start looking; what path do you follow;
      where do you end up; after you've read it, where
      does your eye go next?"

  5. Robin Williams argues that "alignment" helps the 
    eye understand what things go together:

    "When items are aligned on the page, it creates a
      stronger cohesive unit.  Even when elements are
      physically separated from each other, if they are
      aligned there is an invisible line that connects
      them, both in your eye and in your mind

  6. Robin Williams argues that you can use proximity to combine various "page elements" into discrete,
    "visual units."   A  reader's eye should jump around
    the page from one "visual unit" to the next "visual unit." So that a neat, organized page is a collection of strategically organized visual units.

  7. Learn to look for web design inspirations from
    advertisements, websites, art, and nature.

  8. Like artists, web designers try to express their
    own vision and sense of  the "order of things."

  9. Like graphic designers, web designers are challenged to educate their clients about the
    "what and why of how things go together."

10.  Robin Williams on Web Design:

  1. Good Web Design Features

  2. Bad Web Design Features

11. Roger Parker on Web Design

  1. Roger Parker: How to Rate a Web Site

  2. Roger Parker: Web planning and design

  3. 11 Common Web Design Frustrations

  4. Choosing your web site address

12. Lynda Weinman on Web Design

  1. Lynda Weinman's Inspirational Websites

  2. Lynda Weinman's Web Resources Links

  3. Browser-safe Web colors
















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: 
7702      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: 22 March, 2006

Digital Design Course homepage