Using Graphic Design Principles in Web Design

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

Version 1
Version 2
Suggested Changes for Version 3
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:

2. Roger Parker on Web Design

4. Graphic Design Resources

Summarizing the CRAP Design Principles

1. Repetition

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 on 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 is
more likely to be read.

2. Contrast

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.

3. Proximity

Group related items together so that related items
are seen as one cohesive group rather than a
bunch of unrelated elements.
Items or elements that are not related to each
other should not be in close proximity to each
other.
How do you know if a group of elements are
related to each other?
By grouping non-related elements you either
confuse or intrigue the reader.
By grouping several elements in close proximity
to each other they become one visual unit.
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.
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.
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.
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.
Violating the principle of proximity can be a design
tool.

4 . Alignment

Nothing should be placed on the page arbitrarily.
Every item should have a visual connection with
something else on the page.
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.
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.
A centered alignment creates a more formal look,
a more sedate look, a more ordinary and
oftentimes dull look.
Combine a strong flush left or right with good use of of proximity and you will be amazed at how strong your work looks.
Don't combine a flush left and flush right alignment
on the same page. Try to do one or the other.
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.
Never center headlines over flush left body copy
or text that has an indent.
Find a strong alignment and stick to it. If the text is
flush left, set the heads, subheads, and paragraphs
flush left.
If there are photographs or graphic images, align
them with a text edge and/or baseline.
Align image caption stories with the strong line of the photograph, which makes each stronger because of the stronger vertical edges this creates.
Lack of alignments is probably the biggest cause of
unpleasant-looking documents. Our eyes like to
see order; it creates a calm, secure feeling.
Alignment helps create unity on the page. Alignment helps connect and unify all the elements on a page, which creates an ordered, clean look.
Breaking the principle of alignment can be a nice
design trick by breaking the reader's expectations.

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

Look at Parker handout: "The Basics of Effective
Print Design"
The Basics of Effective Web Design
(Also see Photoshop Layered version of this webpage)
Look at layouts in two popular News Magazines:

a) Newsweek

b) US News and World Report
Look at layouts in the Webby Awards and
Lynda Weinman's Inspirational Websites
Visual literacy involves training the eye to see
and understand design, layout, images, and
visual style.
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.