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.
   

• Webby Awards
• Lynda Weinman's Inspirational Websites
• Sewall Academic Program Website
• Celebrating 125 years at CU-Boulder

• Jakob Nielsen: ww.useit.com
• Microsoft's Truetype Homepage
• Robin Williams: Uri's Internet Cafe
• Lynda.com
• Roger Parker's New Entrepreneur.com