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
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
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)
The principle of repetition states that you repeat some aspect of the design throughout the entire piece.
Repetitive elements may be a bold font, a thick rule (line), a certain bullet, color, design elements, particular format, shapes, spatial relationships, etc.
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
the same website.
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.
Strong, repetitive elements help to organize the page
into visual units.
Repetition helps to organize, unify, and add visual
interest to a page. If a piece looks interesting, it
more likely to be read.
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.
Strong contrast adds visual interest to a page and
makes it more attractive to the reader's eye.
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.
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.
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.
- 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.
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
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.
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.
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.
Don't be afraid to make your graphics very bold or
very minimal, as long as the result complements and reinforces your design.
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.
To keep an entire page unified, align every object
with an edge of some other object.
Avoid using all Capitals in your titles, heads, and subheads. Also avoid using italics, which are harder to read on the
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.
Remember that horizontal alignment is as important as vertical alignment. So make sure your text and images are both horizontally and vertically aligned.
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.
Good design doesn't have to shout. Beware of getting too fancy and colorful. Try for restraint and simplicity in your designs.
Any good design must have a strong focal point. You can create focal points using contrast and visual hierarchy.
Make your message as easy to understand as possible. Organize and chunk your information into segments and sections introduced with catchy heads and subheads.
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
Look at Parker handout: "The Basics of Effective
The Basics of Effective Web Design
(Also see Photoshop Layered version of this webpage)
Look at layouts in two popular News Magazines:
b) US News and World Report
Look at layouts in the Webby
Visual literacy involves training the eye to see
and understand design, layout, images, and
Designers develop a toolbox of basic design tricks they have learned by studying good designs.
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.
Without the development of visual literacy, a web or graphic designer is hopelessly lost.