Visual Design

The intentional arrangement of visual elements to communicate with a viewer.

The artist or designer uses the design elements below as the 'vocabulary' with which s/he creates meaning.

The principles below assist in structuring the elements, just as grammar helps structure words into literature.

Five Modes of Design

    1. Naturalism = (photo realistic)
    2. Realism = (representational)
    3. Stylized = (simplification of details)
    4. Abstraction = (distortion and overlapping to create new shapes)
    5. Non-objective = (no recognizable object, elements producing the principles of design

The Mega-rules

• Know what you're trying to say -- and who you're saying it to.
• Content takes precedence over form -- but don't forget that style IS content.
• Never say it if you can show it.

Elements

The raw materials of images.

Seurat

Ross Bleckner, "Dome," 1999,

Line

Main types;

• Curved,
• Straight,
• Horizontal,
• Vertical,
• and Diagonal.

A curved line is dynamic, ever changing, and more natural, than the straight line, which is more static in character. The diagonal line is more dynamic and draws the eye. It can be used to create movement and depth. Horizontal lines are more static and therefore tranquil, calmer, more passive. Vertical lines evoke strength, power, but are less dynamic than diagonals.

"Art, like morality, consists in drawing a line somewhere."
G.K. Chesterton (1874-1936), English author.

"As in the fourteen lines of a sonnet, a few strokes of the pencil can hold immensity."
Dame Laura Knight (1877-1970), English. The Magic of a Line.

Jonathan Kincaid, photo etchings 2001

Travels of the Tingari Mob, Warlimpiringa Tjapaltjarri, , 48" x 48" (122 x 122 cms), Kintore, 2004

Shape

Shape is limited to two dimensions -- length and width. This two-dimensional character of shape distinguishes it from form, which has depth as well.. Examples of shapes include: circle, oval, and oblong; polygons such as triangle, square, rectangle, rhombus, trapezium, trapezoid, pentagon, hexagon, heptagon, octagon, nonagon, decagon, undecagon, dodecagon, etc.; and such other kinds of shapes as amorphous, biomorphous, and concretion.

Geometric shapes are generally read as more passive, decorative, and static than organic shapes. Repeated shapes can be used to create movement. Repeating geometric shapes increases the decorative effect. Look beyond the obvious shapes of heads, bodies, buildings, etc., and view your subject as abstract shapes. Change many of the obvious shapes and create new more interesting shapes. Try to find interlocking shapes. Keep the background shapes in the background, but look for places to connect the foreground and background.

Miro, Person throwing Stones, 1926

Miro

Form

Form refers to an element of art that is three-dimensional (height, width, and depth) and encloses volume. For example, a triangle, which is two-dimensional, is a shape, but a pyramid, which is three-dimensional, is a form. Cubes, spheres, ovoids, pyramids, cone, and cylinders are examples of various forms.

"The first things to study are form and values. For me, these are the things that are the basics of what is serious in art. Color and finish put charm in one's work."
Jean Baptiste Corot (1796-1875), French painter. Keith Roberts, Corot, 1965.

"It matters not whether the form is personal, national stylistic, whether or not it stands within the contemporary mainstream, whether it is related to a few or to many other forms, or whether it is unique or not, etc., etc.; but hte most important point in the questionof form is whether or not it springs from inner necessity."
Wassily Kandinsky (1866-1944), Russian painter, "Uber die Formfrage," Almanach der blaue Reiter, 1912.

"If the significance (spirit) of form is lacking, creative art can be nothing of or for the soul. Only where this significance is the aura of form does the spirit enter into man-made things. Art."
Frank Lloyd Wright (1869-1959), American architect, The Living City, 1958.

"We don't even learn form through the eyes; we learn it through the sense of touch."
John Sloan (1871-1951), American painter of the Ashcan School, The Gist of Art, 1941.

Flinders St. 2004

Giacometti, 'Cage' 1930

Tone or value

An element of art that refers to luminance or luminosity -- the lightness or darkness of a color. Value is an especially important element in works of art when color is absent. This is particularly likely with drawings, woodcuts, lithographs, and photographs. Painting etc uses techniques such as chiaroscuro.

A scene that is dark with many large shadow areas (a dark bedroom or a back alley at midnight)  produces a far different feeling from a scene that is brightly lit (the stage of a variety show or a beach at noon).

The predominance of bright or dark areas carries strong psychological meaning in itself, regardless of what else is going on.

Caravaggio, 'The Flagellation'

Kathe Kollwitz, Mother with Dead Child

Kathe Kollwitz

The tone (brightness and darkness) of objects in a scene suggests weight.  For example, against a medium background dark objects seem heavier than light objects.

Texture

texture is the surface quality or "feel" of an object, its smoothness, roughness, softness, etc. Textures may be actual or simulated. Actual textures can be felt with the fingers, while simulated textures are suggested by an artist in the painting of different areas of a picture -- often in representing drapery, metals, rocks, hair, etc.

Meret Openheim

Colour

REF: Basic colour theory slideshow

"The purest and most thoughtful minds are those which love color the most."
John Ruskin (1819-1900), English art critic.

"Color is the keyboard, the eyes are the harmonies, the soul is the piano with many strings. The artist is the hand that plays, touching one key or another, to cause vibrations in the soul."
Wassily Kandinsky (1866-1944), modern Russian painter, one of the first creators of pure abstraction in modern painting and founder of Der Blaue Reiter.

"Anybody who paints and sees a sky green and pastures blue ought to be sterilized."
Adolph Hitler (1889-1945)

"I try to apply colors like words that shape poems, like notes that shape music." Joan Miró (1893-1983), Spanish Surrealist artist.

The three dimensions of colour : Hue, Chroma, and Value.

1. "Hue" is the specific name of a colour, red, yellow, blue (primary colors).
2. "Chroma", also called saturation, often called intensity, refers to a colors strength or weakness, bright or grayed.
3. Color "value" refers to the lightness or darkness of the color, not to its intensity or to a pecific hue.

Colors come forward or recede depending on their warmth, intensity and value. Warm, intense, and dark value come forward, cool, grayed and light value recede. However, recession is also affected by color keying, or what color the color is placed next to. According to Eliot O'Hara, "The law for keying a color or value is always the same, an area will vary in a direction opposite to its immediate surroundings." (The Watercolorist's Complete Guide to Color by Tom Hill.)

Color preferences vary with age, sex, and race. We know that people prefer to see colors "in their place." Magenta-to-red colors may be popular—until they are brought into a kitchen setting. A particular shade of green may be an attractive color, until it becomes associated with the walls of a hospital room. 

Surrounding colors also greatly affect color preference. When a color is used near its complement, its preference rating usually rises—as long as the complementary color is subdued and is not brighter or more intense than the original color. (Recall that complementary colors are opposite each other on the color wheel.)

Just as people prefer a balance between mass and tone in composition, they also prefer a balance in colors, as seen on the color wheel. In particular, they prefer a balance between calming and stimulating colors.  In balancing colors in a scene be aware that it will take a larger area of cool colors to balance hot colors.

Paul Klee, The Golden Fish, 1925

Morris Louis , Nun, 1959

Philip Guston, Painter III, 1960

The Colour Wheel http://www.makart.com/resources/artclass/cwheel.html

Colour Schemes http://www.makart.com/resources/artclass/cschemes.html

• Monochromatic
  A monochromatic color scheme is a one-color color scheme. However, the color can be neutralized by adding its complement to lower the intensity of the color. Black and white can also be used to darken and lighten the value of the color.
• Complementary
  In this color scheme any two complements, all the semi-neutrals and the neutral they produce can be used. Black and white can also be used.
• Analogous
  Any three adjacent primary, secondary, or tertiary colors are analogous colors and can be used in an analogous color scheme. Each can be neutralized by use of its complement, and black and white can be used. Analogous colors "harmonize" well and produce a definite mood to a composition.
• Split Complementary
  Any three adjacent primary, secondary, and tertiary colors can be used, plus the complement of the middle hue. This complement is used subordinately and to produce semi-neutrals of the three colors while maintaining color harmony. Black and white can also be used.
• Triad
  Any three colors equidistant around the color wheel form a triad and can be used in this color scheme. Semi-neutrals are mixed using two of the colors in the triad and the third can be added to further neutralize the pair. Black and white can also be used.

Space

"Each work has its own space, which should neither be conceived as a sort of cage nor regarded as extending to infinity."
Marino Marini (1901-1980), Italian sculptor.

Space is represented by establishing a view. Everything within the boundary of the view is called a frame. (A frame is sometimes also called a viewport, window, canvas, support, ground, or stage).

Frames can in theory be any shape, and in painting or printing they can be sometimes elliptical or irregular. But in photography, video, and computer graphics frames are rectilinear. The main attribute of a frame is its aspect ratio - the relationship of width(w) to height(h). Video and computer displays are predominantly 4 units wide by 3 units high, while 35mm and 70mm film are 3 units wide by 2 units high. Another crucial aspect of a view is the viewer's position relative to the subject - the viewpoint. The viewpoint establishes horizon line, vanishing point, and perspective.

Objects in space close to the viewer may overlap objects in the distance. Each object can be said to exist on its own layer, or picture plane. Objects on higher-ordered planes (foreground) obscure objects on lower-ordered layers (background). Size of these objects relative to each other is called their scale. Distance of an object from the viewer is indicated by overlap of other objects and also by scale. Objects that are closer appear larger than objects farther away, despite their actual relative sizes.

Figure/Ground Relationships
The subject, or predominant object, in a picture is often called the figure, and the rest of the frame is called the ground. The figure is also considered positive space while the rest of the frame is called negative space. Achieving a harmonious balance of positive to negative space is desirable. In symbols, icons, and graphics a 50/50 distribution is usually best.

Positive/negative space

Chinese paper cut

Edmund Tufte, the doyan of visual communications, describes figure/ground relationships in the formula: 1 + 1 = 3. This describes the reality that we not only see 2 positive objects in a picture, but the negative space between them. This is exemplified by the tesselations of M.C. Escher.

Esher

Principles

Are methods to effectively use visual elements.

Create a centre of interest to guide the eye around the image

Rule of Three

Visual Architecture: the Rule of Three http://www.digital-web.com/articles/visual_architecture_the_rule_of_three/

Ues dynamic triangular compositions to structure the viewing plane,

El Greco, 'The knight'

Use contrast in one of the elements.

The eye is drawn to the brighter areas of a scene. This means that the prudent use of lighting can be a composition tool, in this case to emphasize important scenic elements and to de-emphasize others. 

eg Valequez Las Meinaiss

The eye is drawn to the flat area in contrast with theavily patterned areas

e.g. Gustav Klimt

Harmony and unity

The overall impression is cohesive and pleasing. There are no fixed rules for generating a harmonious composition, but there are general guidelines.

Composition

Composition can be defined as the orderly arrangement of elements in a scene which, when taken as a whole, conveys intent and meaning.

Balance -- the deposition of visual weight and importance.

Symmetry (also called 'Formal composition')

Symmetrical balance is easiest to see in perfectly centered compositions or those with mirror images. In a design with only two elements they would be almost identical or have nearly the same visual mass. If one element was replaced by a smaller one, it could throw the page out of symmetry. To reclaim perfect symmetrical balance you might need to add or subtract or rearrange the elements so that they evenly divide the page such as a centered alignment or one that divides the page in even segments (halves, quarters, etc.).

When a design can be centered or evenly divided both vertically and horizontally it has the most complete symmetry possible. Symmetrical balance generally lends itself to more formal, orderly layouts. They often convey a sense of tranquility or familiarity or elegance or serious contemplation.

Bilateral Symmetry = equalibrium, stability, stasis

Found in nature -- eg animals, leaves, etc
The geometry of life http://cccmkc.edu.hk/~kei-kph/Geometry%20of%20life/Geometry%20of%20life_page_1.htm

Art and design -- found in religious art

Coptic icon

Leonardo da Vinci -- Last Supper

Duccio

Durer -- The Fall of Adam and Eve

Van Eyck, Madonna and Child (Triangle composition)

Casper David Fredrich, The Wanderer

Joseph Cornell

Rodchenko Poster

Man Ray, 'The Kiss'

'Rule of Thirds'

The rule of thirds says that most designs can be made more interesting by visually dividing the page into thirds vertically and/or horizontally and placing our most important elements within those thirds. Take this concept a step further, especially in photographic composition, by dividing the page into thirds both vertically and horizontally and placing your most important elements at one or more of the four intersections of those lines.

it's often best to place the center of interest near one of the points indicated by the rule of thirds. A few still cameras even have the rule of thirds gridlines visible in their viewfinders.

According to the rule of thirds, horizon lines should be either in the upper third or the lower third of the frame. In the same way, vertical lines shouldn't divide the frame into two equal parts. From the rule of thirds we can see that it's generally best to place a dominant vertical line either one-third or two-thirds of the way across the frame. 

It's generally also a good idea to break up or intersect dominant, unbroken lines with some scenic element. Otherwise, the scene may seem divided. 

A horizon can be broken by an object in the foreground. Often, this can be done by simply moving the camera slightly. A vertical line can be interrupted by something as simple as a tree branch.

David, Oath of the horatii

Fra Angelico, The Annunciation

Fra Angelico

Radial Symmetry

In Nature -- flowers, cacti, starfish, snowflakes

The geometry of life http://cccmkc.edu.hk/~kei-kph/Geometry%20of%20life/Geometry%20of%20life_page_1.htm

mandalas (spiritual symbols)

Ottoman miniature

Ottoman calligraphy

Distributed -- over-all patterns

Paul Klee, Ancient Sounds

Peter Greenaway

Topkapi kiosk ceilings

rhythm
Rythym gives life and unity to a composition. Achieved through repetition and progression or variation of a visual element e.g. shape, line or colour. Progressions lead to a sequence produced by cummulatively increasing or decreasing one of the qualities. It is ordered, systematic change. Repitition can be as simple as reiterating a single shape, but is often given more intriguing complexity by alternating shapes, colours or textures. Complexity may be increased by mirroring or inverting elements, or by repeating in different sizes, colours or textures.

Mattisse

Mondrian, Broadway Boogie

Mondrian, Rhythm

Bridget Riley, Cateract

Bridget Riley

Vaseraly

Another special ratio is 2:3.5 for smaller shapes. This is the ratio of most business cards. This size, and multiples of it, seem very comfortable and familiar.

When designing a document, use these ratios to check your layout. When you place a photo or a completed module, use a calculator to help judge the element. Measure the sides of the rectangle, then divide the larger side by the smaller. If the result is between 1.50 and 1.75, you have a safe design element. If the result is too close to one, your element is too square. A ratio greater than two indicates that one side is too narrow.

Visual Hierarchies

Western societies read from left to right. In general this makes the left side of the screen more prominent than the right. Windows are drawn from the upper left corner to the lower right, for example.
* We also read from top to bottom. In general this makes the top of the screen more prominent than the bottom. Menu bars are at the top of the screen, for example. In a book the top of the page is where one finds the chapter title.
* The four corners of the screen rectangle have a pinning effect. Page numbers in a book are most commonly found in the lower left and right corners.
* The center of the screen does not have the prominence that many assume. In a book the center is the gutter.

The prominence heirarchy then is:

1. Upper left corner of the screen
2. Top margin of the screen
3. Upper right corner
4. Lower left and right corners
5. Bottom margin of the screen
6. Left and right margins
7. Screen center

Where the eye is drawn:

1. Moving pictures (video, animation)
2. Pictures (photos, graphics, illustrations)
3. Headlines (large, bold, or differently-colored text)
4. Body copy

Visual prominence accrues to:

1. Larger regions of positive and negative space
2. Regions with greater contrast
3. Higher saturations of color
4. Warmer colors

The Design of Information
http://www.cs.sunysb.edu/~tony/334/design/infodesign.htm

In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.
- Antoine de Saint Exupery

These notes on design are thrown together from bits and pieces scavanged from all over the internet and some I wrote myself for use in teaching -- please feel free to pirate in return. 2005 Shiralee Saul