February 7, 2012 - Exercise 1 and Exercise 2 are due on February 21 - Final Projects due on May 22, 2012

Layout and Style

Cascading Style Sheets open the door to compelling style as well as allowing us to separate the content from the presentation. The following ideas/guidelines are intended to help you bring strength to your designs.

C.A.R.P.

C.A.R.P. can make your design snap, not just look good in a pond. No, we are not talking about a fish, C.A.R.P. stands for:

Contrast: Use contrast to separate or differentiate elements of your design. A simple example is the choices of text colors and background colors. High contrast choices like black body text on white background makes the text stand out in the design, it draws the eye and is easy to read. A paler text color on a white background (like the footer on each of these pages) is still adequately readable while not competing with the body text for your attention. Other contrast points include font size, "flavor" (serif, sans-serif, cursive, monotype, hand writing, and so on), and...
Alignment: Strong lines of alignment make strong designs. Center aligned text has no strong line on either side, it makes blocks of text hard to read. Alternating left and right alignments can create contrast.
Repetition: Repeating elements tie a design together. Consistent use of a chosen color palette ads familiarity for the eye. Or of the same contrasting font families. Or that same drop cap on the first paragraph of each section.
Proximity: Elements that related to each other should be close to each other. Allow some white space to separate elements that are not related.

That said, sometimes you need to break the rules to get the mood you want.

Color

Color can set a mood, make a statement, clash#?!*, or sooth, to name a few. Try some of these links for color picking tools.

Visibone Webmaster's Color Lab: http://www.visibone.com/colorlab/
Color Schemer: http://www.colorschemer.com/online.html
Back to Font Web Color Picker: http://www.markup.co.nz/colorPicker/back_to_font.htm
KrazyDad Colr Pickr: http://www.krazydad.com/colrpickr/
Meyerweb Color Blender: http://meyerweb.com/eric/tools/color-blend/

These are just a few of the online color tools available; do a search on your favorite search site and have fun exploring.

Online Style Links

Here is a link to a pages that discuss styles, enjoy!

The Principles of Design: http://www.digital-web.com/articles/principles_of_design/

A Pointed Essay

I liked this essay the first time I read it. Enjoy.

Rules of Composition

(taken from Design Language, by Tim McCreight):

There are rules of composition just as there are rules of language. In both cases, these are only useful as starting points.

The difference between language (which communicates) and gibberish (which does not) is an adherence to fundamental rules). Similarly, in visual language, following rules of composition should be seen as a stepping off point, a minimum standard.

Here are a few of the rules of composition:

avoid placement at dead center,
symmetry tends to promote stability,
diagonals are more active than horizontals,
proximity creates tension,
sameness is frequently boring,
regularity creates rhythm,
contrast exaggerates an effect,
placement in corners creates awkward tension,
arches support weight,
inverted arches imply weight,
equal amounts of figure and ground confuse the eye.

"The arrangements we make are either pleasing or not pleasing. An explanation is not necessary." -Kenneth Bates