Principles of Design

These examples will use web design as a demonstration platform, but the principles apply to everything from photography to painting to poster design. I'll be demonstrating using submissions to CSS Zen Garden, a popular web design "ideas" site.

The Principles of Design lecture will cover:

1. Elements of Design
2. Principles of Design

1. Elements of Design

Line
Line can refer to either drawn lines or "line" created by placing elements together.

-Line created by dashed outlines and white line through background gives emphasis to Paravion and directs your eyes to the envelope first. The dashed outline, not being solid, permits your eye to move on easily while still highlighting the envelope (coincidence? Yes, envelopes really do look that way, but it definitely helps the page design too).

-The jagged line of the roof adds interest to "mediterranean"

Shape
A shape can be any defined area within your design.

-An contrasting shape causes the page to "jump" or "pop". Check out the human form as it breaks out of the straight-lines mold in "Attitude."

-Crooked, asymmetrical, or unnatural shapes can cause distress. See "Defiance", especially the asymmetrical cross, crooked lines, and shapes that make you guess at what they are.

Direction (...leads to Eyeflow)
Direction can be Horizontal, Vertical or Diagonal. Horizontal suggests peace and calmness. Vertical gives a feeling of balance and freshness. (Notice this in patterns especially). Diagonal suggests movement and action. In web pages, direction correlates with eyeflow.

-Mountains give direction (ridgelines point directly to the content) in Blackcomb*75

-Buildings in background emphasize vertical feeling: Deco

Texture
Is it rough? Smooth? Furry? Shiny? Texture is a powerful emotional additive to any design. We associate texture with our senses, such as touch and taste. Adding color to texture (or subtracting it) adds another dimension, allowing us to almost "taste" the designer's intention.

Icicle Outback

The Original

A Walk in the Garden (ewww!)

Useful link: CG Textures, a site with some nice, freely-downloadable texture images.

Color and Value
Hue, Saturation, Value (explained at wikipedia)
Juxtaposition (or combination) of Color is used to give a worn, yet warm effect in Red Paper (desaturated reds and tans).

Bright + Desaturated = pastel. Pastels lend a relaxed feeling to Like the Sea.

General absence of color can give a stark, depressive feeling (combined with textures, shapes, typography): Austrian's Dark Side

Complementary colors are very pleasing to the eye. The basic complements are red/green, blue/orange, and purple/yellow. Look at the eye-popping use of complementary color in "Kyoto Forest"

2. Principles of Design

Balance
Balance in design is a lot like balance in real life! If something dominates so much that it is not counterbalanced, people may miss the entire point of the design. On a website, poster, flyer, or DVD cover, an unbalanced design can really disorient those who are trying to understand what you're communicating.

Balanced colors: Business style

Leaf icon holds the page together with balance: "Some Leafs"

"Moving" balance as you scroll down a page (illustrative counterweight at bottom): Edo and Tokyo

Gradation
Gradation adds movement and gives interest. A gradation from dark to light or light to dark can make your eyes move around. In this case it adds to the sense of vertical flow.

Floral Touch

There's also a gradient tutorial that may be of use if you find yourself wondering how a nice gradient should look.

Repetition
Repetiton with variation can be fascinating. Without variation, it can get a bit monotonous.

Reinforces a theme: Zen city morning

Can establish time and place: Kelmscott ...this is also a bit monotonous and distracting on big, bright screens, like 24" - mainly a contrast problem.

Contrast
Contrast is the juxtaposition of opposing elements, like opposite colours on the colour wheel - red / green, blue / orange etc. Contrast in tone or value - light / dark. Contrast in direction - horizontal / vertical.
The major contrast should be placed at the center of interest. Too much contrast scattered throughout a painting can destroy unity and make your design look thrown-together.

Elegance in Simplicity - not much contrast overall, but the flower is drawn using contrast to draw edges and shapes. So, there's contrast where it matters.

Contrast of Pattern vs. Chaos: Wilderness

Harmony
Harmony is at its most powerful when you are combining similar, related elements, like adjacent colors on the colour wheel, similar shapes, etc. The difference between harmony and balance is mainly one of "things working together well to establish a theme" vs. "a design that doesn't look too dominant in one area and not enough in others."

Harmonious shapes and colors: Business style

Harmony between color, texture: Uncultivated (crosshatch pattern matches wheat, harmonious colors)

Dominance
Dominance gives a painting interest, counteracting confusion and monotony. Dominance can be applied in more than one place for emphasis.Zen Army, Lily Pond

Unity
Linking together all the visual elements of a design. The different elements, be they photographs, illustrations, or shapes, should all "speak" as one, conveying one general message or mood. The difference between unity and harmony is "making sure my design elements all convey the same message" (unity) vs. "making sure my design elements work together well, regardless of individual messages." (harmony)