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

Using Graphic Design Principles
in Web Design

   
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?

Assignment: Work on finishing your image websites. Remember, your image websites are due March 25th. I will start grading them on Monday, March 27th.

--------------------------------------

Inspirational Websites


1 My Visit Waikiki Website: A Work in Progress

  1. Version 1

  2. Version 2

  3. Suggested Changes for Version 3

  4. Making the background sound a
    smaller file so that the page will
    load faster

    --Download MPs file

    --Convert and compress to WMA file
    using Windows Media Encoder

    --Insert sound file into webpage

    --Always test sound file to make sure
    it works the way you want it to.

2..  Robin Williams on Web Design:

  1. Good Web Design Features

  2. Bad Web Design Features

  3. Top 10 Mistakes in Web Design

  4. Art and the Design of Web Sites


2. 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

4. Graphic Design Resources

  1. Graphic Design Resources and Art

  2. Web Page Design for Designers

  3. Webmonkey: Web Developer Resources

  4. The Business of Web Design

  5. Yale Web Style Guide

  6. Designer Today

  7. Roger Black on Web Design

Summarizing the CRAP Design Principles

1. 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.

2. 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.

3. Proximity  

  1. Group related items together so that related items
    are seen as one cohesive group rather than a
    bunch of unrelated elements.

  2. Items or elements that are not related to each
    other should not be in close proximity to each
    other.

  3. How do you know if  a group of elements are
    related to each other?

  4. By grouping non-related elements you either
    confuse or intrigue the reader.  

  5. By grouping several elements in close proximity
    to each other they become one visual unit.


  6. If there are more than three to five items on
    the page, see which of the separate elements
    can be grouped together into close proximity
    to become one visual unit.

  7. Try to avoid too many separate elements on a page. And don't stick elements in the corners
    and in the middle.  Try to group elements together.


  8. You can tell whether a page has too many separate
    elements by being conscious of where your eye is
    going as it reads down the page.  Does your eye
    have to jump around the page to read it.

  9. Once you have grouped elements into visual units
    make sure that you have sufficient white space
    between these groups.  White space helps
    separate and announce each of these visual units.

  10. Violating the principle of proximity can be a design
    tool.


4 . Alignment

  1. Nothing should be placed on the page arbitrarily.
    Every item should have a visual connection with
    something else on the page.

  2. Be conscious of where you place the elements
    on a page. Always find something else on the
    page to align with, even if the two objects are
    physically far away from each other.

  3. Align elements along "hard vertical edges."  If
    instead of centering your text, you align the
    text on the left or the right, the invisible line
    that connects the text is much stronger because
    it has a hard vertical edge to follow.

  4. A centered alignment creates a more formal look,
    a more sedate look, a more ordinary and
    oftentimes dull look.

  5. Combine a strong flush left or right with good use of of proximity and you will be amazed at how strong your work looks.

  6. Don't combine a flush left and flush right alignment
    on the same page.  Try to do one or the other.

  7. Don't center or justify lines of text.  Centering and
    justifying lines of text creates ragged vertical edges, which makes it harder to read the text.

  8. Never center headlines over flush left body copy
    or text that has an indent.

  9. Find a strong alignment and stick to it. If the text is
    flush left, set the heads, subheads, and paragraphs
    flush left.  

  10. If there are photographs or graphic images, align
    them with a text edge and/or baseline.


  11. Align image caption stories with the strong line of the photograph, which makes each stronger because of the stronger vertical edges this creates.

  12. Lack of alignments is probably the biggest cause of
    unpleasant-looking documents.  Our eyes like to
    see order; it creates a calm, secure feeling.

  13. Alignment helps create unity on the page. Alignment helps connect and unify all the elements on a page, which creates an ordered, clean look.

  14. Breaking the principle of alignment can be a nice
    design trick by breaking the reader's expectations.

8. 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 headings and subheadings.

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

9.  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 and
    Lynda Weinman's Inspirational Websites

  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: 
80905      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: 24 March, 2006
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/graprin.htm

Digital Design Course homepage