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, Web Design & Usability

   

Assignment:  (Do after Class)

1. Skim over the basic elements of the "CRAP Principles" in Williams and then reread my "Summarizing the CRAP Principles" below.

2.   Now go to some of the award-winning websites in the Webby Awards sites.  Try to see how many of the "CRAP Principles" you can find in these websites.

3.  As you are reading some of your favorite magazines this week,try to see how many of the "CRAP Principles" you can find in the articles and advertisements you read.

4.  Do you find that understanding basic design, layout, and the "CRAP Principles" changes the way you look at webpages and magazines?

5.  How would you explain "visual literacy" to one of your friends who has no interest in art and design?  Do you think that visual literacy could be of value to non-artists and non-designers?


1. 1. I will start grading your image websites on Wednesday .Make sure that your image website is up and running by Wednesday. If you are still having trouble using FTP to load your pages on the web, please come see me during my office hours or make a special appointment to come see my at another time. Please send me the new URL for your Design Portfolio page if you were transferred to the www.cclewis.com server or if you have changed the URL address for your portfolio webpage. Please check by Wednesday to make sure that I have the proper URL on the Students' Web Design
Portfolio webpage.

 

2. Summarizing the "CRAP" Design principles.


3 .When using Macintosh computers in the computer lab that use "Fetch" make sure that you select "Raw Data" when asked how you want to FTP your files and images onto the web.

2. For a good discussion of graphic design and visual literacy in web design, see:

        Roger Black, Web Sites That Work 
             (San Jose, CA: Adobe Press, 1997)

3. Repetition

  1. The principle of repetition states that you repeat some aspect of the design throughout the entire piece.

  2. Repetitive elements may be a bold font, a thick rule (line), a certain bullet, color, design elements, particular format, shapes, spatial relationships, etc.

  3. Repetition works to unify all parts of a design. Repeating elements across pages creates consistency and visual unity.  Because of repetition, you know you are still on
    the same website.

  4. Repeating certain elements in a page is a visual
    trick designers use to control a reader's eye and how the reader's attention moves down or across the page.

  5. Strong, repetitive elements help to organize the page into visual units.

  6. Repetition helps to organize, unify, and add visual 
    interest to a page.  If a piece looks interesting, it is
    more likely to be read.

4. Contrast

  1. The principle of contrast states that if two items are
    not exactly the same, then make them different.  In
    order for contrast to be effective, it must be strong.

  2. Strong contrast adds visual interest to a page and
    makes it more attractive to the reader's eye.

  3. Contrast helps to organize your information.  Use
    contrast in your titles, heads, and subheads and
    page segments to make it easier for the reader to
    glance at the page and understand what is going on.

  4. The easiest way to add interesting contrast is with
    typeface.  But you can also add contrast with rules,
    colors, spacing between elements, textures, shapes, etc.

  5. Use contrast to help create a focal point for a page.
    In addition to contrast, also use strong alignment
    and the use of proximity to reinforce your focal point.

  6. Don't be afraid to make some items small to
    create a contrast with the larger items and to allow
    blank space.  Once you pull the reader in with your
    focal point, they will read the smaller print if they are interested.
  7. Avoid using typefaces, colors, rules, images, graphics that are too similar.  Make them different to add contrast and visual interest to your page.

5. Summarizing the CRAP Principles

  1. Don't be afraid to create your Design with plenty of
    blank space. Also make sure you have plenty of 
    white space between elements and visual units.

  2. Don't be afraid to make words very large or very small. Don't be afraid to speak loudly or to whisper.  Contrast is an essential element of good design.

  3. Don't be afraid to be assymetrical, to uncenter your
    format--it often makes the effect stronger.  It's
    okay to do the unexpected.  Try to break out of the box.

  4. Don't be afraid to make your graphics very bold or 
    very minimal, as long as the result complements and reinforces your design.

  5. Vary the space between the elements on a page to 
    indicate the closeness or importance of the
    relationship between elements. Proximity is a central tool in design.

  6. To keep an entire page unified, align every object
    with an edge of some other object.

  7. Avoid using all Capitals in your titles, heads, and subheads. Also avoid using italics, which are harder to read on the web.

  8. Remember the Computer is not a Typewriter.  Don't
    use two spaces after periods, or underline a lot of
    text, or just use open quotation marks. Use both open and closed quotation marks to look professional.

  9. Remember that horizontal alignment is as important as vertical alignment. So make sure your text and images are both horizontally and vertically aligned.

  10. It takes a very self-assured designer to recognize
    and act on the power of simplicity.  Many great
    websites are created simply, quietly, and with grace.

  11. Good design doesn't have to shout.  Beware of getting too fancy and colorful.  Try for restraint and simplicity in your designs.

  12. Any good design must have a strong focal point.  You can create focal points using contrast and visual hierarchy.

  13. Make your message as easy to understand as possible. Organize and chunk your information into segments and sections introduced with catchy heads and subheads.

  14. Try to develop a consistent, unified design that
    has a focal point and creates visual interest.

6.  Visual Literacy and learning to read
      variations on the Design Layout Grid

  1. Look at Parker handout:  "The Basics of Effective 
    Print Design"

  2. The Basics of Effective Web Design
    (Also see Photoshop Layered version of this webpage)

  3. Look at layouts in two popular News Magazines:

    a) Newsweek

    b) US News and World Report

  4. Look at layouts in the Webby Awards

  5. Visual literacy involves training the eye to see
     and understand design, layout, images, and 
    visual style.

  6. Designers develop a toolbox of basic design tricks they have learned by studying good designs.

  7. The first real step in learning to become a graphic or web designer involves the conscious development of visual literacy and a keen eye for detail.

  8. Without the development of visual literacy, a web or graphic designer is hopelessly lost.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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: 
5626      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: 3 April, 2006
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/usable.htm

Digital Design Course homepage