Thursday, October 16, 2008

WEEK #7: Basic Form Interaction

Download

HOMEWORK:
Begin your next component mockups.

Saturday, July 12, 2008

Visual Rhetoric (summary)

Luba Lukova, Privacy, poster, 2008.
Rhetoric is the art or the discipline that deals with the use of discourse, either spoken, written or visual, in order to inform, persuade and motivate an audience. Claiming that “Rhetoric is a useful skill”, which “turns a weak man into a strong one”, Aristotle defines rhetoric as the power to observe the persuasiveness of which any particular matter admits (the skill to observe the persuasive aspects in any subject matter and to use them for argument).

Rhetoric deals with communicating an idea as effectively as possible.
The classical art of rhetoric involves five phases described as inventio (discovery of ideas), dispositio (arrangement of ideas), elocutio (stylistic treatment of the ideas), memoria (memorization) and pronunciatio (presenting the subject matter).

We will focus on the third stage –Elocutio, where the stylistic treatment and the shaping of the material are under consideration.
The stylistic treatments that are applied to increase the overall effectiveness of the expression are given the term: Figures of Speech (also referred as Rhetorical Figures).

FIGURES OF SPEECH:
Figures of speech are any artful deviations from the ordinary modes of speaking, writing, or visualization. As a means of departure from the ordinary ways of expressing an idea, they endow communication with strong dynamic tension.

The figures of speech are divided into two main categories: Schemes and Tropes.

Schemes involve deviation from the ordinary or expected pattern of words.

Tropes
involve shifts in the general meaning of words, –a word is used in a way other than what is considered its literal or normal form.

Although rhetoric has developed as a method that deals fundamentally with the spoken and written language, rhetorical principles are applicable to visual language as well.
Gui Bonsiepe was first to analyze the relationship between visual/verbal rhetoric (1965). Bonsiepe essentially studied the advertisements and demonstrated that visual rhetoric is possible on the basis of verbal rhetoric.

FIGURES OF CONTRAST:
Irony: The use of a word in such a way as to convey a meaning opposite to the literal meaning. E.g. Robbing the savings of a poor man is a noble act.
Waldemar Swierzy, Circus - poster, 1979


Antithesis: Placing contrasting terms of ideas together to emphasize their differences and give the effect of balance. E.g. A small step for a man, one giant leap for mankind.
Milton Glaser, Bach - concert poster.

Andrzej Pagowski, Hamlet, poster, 1987.





FIGURES OF SIMILARITY:
Metaphor: An implied comparison between two things of unlike nature that have yet something in common. E.g. Knowledge is an instrument for cutting.

Andrzej Pagowski, Hamlet, poster, 1985.

Luba Lukova, Health, poster, 2008.

Wieslaw Walkuski, Waiting for Godot, 1996.

Simile: When the comparison is explicit: E.g. Knowledge is like an instrument for cutting.

Personification: Comparison whereby human qualities are assigned to inanimate objects or to abstractions. E.g. The houses in the valley seemed to be a sleep.

John Gall, book cover, 2007.

Tomasz Boguslawski, Ubu King, 2004.

FIGURES OF CONTIGUITY:
Metonymy
: The substitution of some attributive or suggestive word for what is actually meant. The thing what is really meant is represented by something closely associated with it.
E.g. Crown for royalty, pen for authors, gold for money, bottle for alcohol, ear for music.
“The White House supports the bill” (White House instead of the President).
Jerzy Czerniawski, Hamlet, 1975.

MichelBatory, Idiot, 1995.

Synecdoche: Part stands for the whole, or, the whole is used to refer to part of it; and thus something else is understood within the thing mentioned.
E.g. Bread for food, head for brain (‘use your head’), steel for sword, mouth for hungry people…
Paula Scher, Him.

Periphrasis: The indirect reference by means of well-known attributes or characteristics. Substitution of a descriptive word or phrase for a proper name.
E.g. He is a Pollyanna. / She has gone to a better world.


Pun: Play upon words, two or more meaning appear in one word or in two words of identical
or similar sound. E.g. There is a certain type of a woman who'd rather press grapes than clothes.




Tomasz Boguslawski, Titus Andronicus, 2007.

LubaLukova, calendar cover, 2006.

FIGURES OF GRADATION:
Amplification: The expansion of a topic through the assemblage of relevant particulars.
E.g. He went to see the world: the east, the west, north and the south.
David Pearson, book cover, 2007.


Hyperbole: The use of exaggerated terms for the purpose of emphasis or heightened effect, emphasized by saying more than what is really meant, or more than is literally true.
E.g. I could sleep for a year.

Understatement: It can be considered as the opposite of hyperbole. The situation is made to look less important or serious than it is. E.g. “It's just a flesh wound.” (Black Knight, after having both of his arms cut off, in Monty Python and the Holy Grail)



. . . . . . . . . . . . . . . . . . . . . .
List of References:
Ehses, Hanno H. "Representing Macbeth: A Case Study of Visual Rhetoric. Design Discourse. Victor Margolin (Ed.). Chicago: University of Chicago Press, 187-197.

Behrens, Roy R. Illustration as an Art. Prentice Hall, 1986.

Saturday, July 5, 2008

Color (summary)

We tend to think of color as the characteristics of objects. Indeed, color is a function of light reflected from the objects. E.g. Blue objects absorb all the rays except the blue ones, and these are reflected to our eyes. Black objects absorb all the lights. White objects reflect all of them. Therefore, color is a 'property of light'.

This was illustrated by Sir Isaac Newton in the 17th century when he put white light through a prism. The prism broke up white light into familiar rainbow of hues.


The significance of the fact that 'color is a property of light', is: as light changes, colors also change. E.g. Grass may be almost gray at dawn, yellow-green at noon, blue-black at night. However, our mind insists that grass is green despite the visual evidence. This is called Color Constancy Effect. For many artists, this has been an important subject of study:
Monet, London, The House of Parliament, Stormy Sky, 1904.

Monet, London, The House of Parliament, Sun Breaking Through the Fog, 1904.

Although color comes from light, the guidelines of color mixing and usage are different depending on whether the color source is light or pigments & dyes.

Color from light combines and forms new visual sensations based on what is called ADDITIVE SYSTEM.

When color comes from the light reflected by pigments, it operates based on the SUBTRACTIVE SYSTEM.
(Pigments are substances that reflect approximately the same color as is seen in the band of the spectrum of refracted light.)

ADDITIVE SYSTEM (refracted light):

If you look at a screen with a magnifying glass you will see that all the colors are actually combinations of tiny red, green, blue dots. There is no color such as yellow on a screen.

Lights projected from different sources mix according to the additive method.
Three primary colors are: RED - GREEN - BLUE (RGB)
When three primaries are combined 'white light' will be produced.
Secondary colors are: CYAN - YELLOW - MAGENTA
When complementary hues in light are mixed, it will produce an Achromatic Gray or White. E.g. When light from a cyan spotlight and from a separate red spotlight overlap, the visual sensation is basically white.


SUBTRACTIVE SYSTEM (reflected light):

Artists reproduce the colors of the visible spectrum using pigments.E.g. Yellow pigment absorbs all the colors except yellow, reflecting yellow back to the observer.
No color occurs until this reflected wavelenght of light is received by the eye and interpreted by the brain.

Three primary colors are: MAGENTA - CYAN - YELLOW
Secondary colors are the mixture of primaries: ORANGE - GREEN - PURPLE
If the secondaries are mixed, a third set of hues is created:
Tertiaries are: ORANGE-YELLOW; RED-ORANGE; RED-PURPLE; PURPLE-BLUE; BLUE-GREEN and YELLOW-GREEN.


PROPERTIES OF COLOR:

HUE:
Hue simply refers to the name of the color. Red, orange, green, yellow are hues. Although the terms 'hue' and 'color' are often used as synonyms there is a distinction between them: Hue describes the visual sensation of the different parts of the color spectrum. One hue can be varied to produce many colors. So, there are few hues but almost unlimited number of colors. Pink, rose, scarlet, maroon, crimson are all different colors but hue in each case is red.

The most common organization for the relationship of basic colors is the color wheel. Dates back to Sir Isaac Newton (17th c.), then updated by Johannes Itten. 12 hues are divided into 3 categories. Color wheels are 2D models of color relationships that deal with only HUES – the names of the colors.

Hues opposite of each other on a color wheel are complementary colors.
Hues next to each other are called analogous.



VALUE:
The second property of color is value. It is the degree of lightness or darkness of a hue.

In pigment, value can be altered by adding white or black paint to the color (also dilluting can be used: adding trasparent paint, like water in case of acrylic or gouche)

Adding white lightens and produces a TINT, or HIGH-VALUE color.
Adding black darkens and produces SHADE, or LOW-VALUE color.

Please note that, not all the colors on the color wheel are shown at the same value. Each is shown at normal value, with the pure color unmixed and undiluted. The normal values of yellow and blue are radically different. Yellow is light, high-value color. Blue is comparatively low-value, corresponding to dark gray.


Value, like color itself is variable and entirely dependent in surrounding hues for its visual sensation. E.g. Against black background, the color appears lighter than when it is on lighter background.



SATURATION (a.k.a. INTENSITY - CHROMA):
It is a measure for the purity and brightness, or, grayness and dullness of a color.

Mixing black and white with a color changes its value, but at the same time affects the saturation.

If you want to change the saturation without changing the value, then what is necessary is to mix the color with its complementary:

In pigments there are two major ways of graying a pure color of maximum saturation without changing its 'value':
Mix it with a gray of the same value, or
mix it with its complementary of the same value.


Complementary colors are direct opposites in position and in character. Mixed complementaries will neutralize each other until they form a gray that resembles neither.


Contrarily, when complementary colors are placed next to each other (mixed visually, not as pigments), they intensify each other's brightness. When orange and blue are side by side, they appear brighter than in any other content. This effect is called Simultaneous Contrast, meaning that each complement simultaneously intensifies the visual brilliance of the other, so that colors appear to vibrate.
Henri Matisse, Piano Lesson, 1916.

Therefore, another way of changing saturation is to put one color side by side with its complementary. Both colors will look more intensified.

This is also based on a general principle of color: Colors are affected by colors around them.

COOL and WARM COLORS
Although we don't get burned or freeze by touching a colored surface, because of the learned associations, we attribute sensations such as warmth and being cold to colors.

By definition, colors between yellow and red-violet on the color wheel are referred as warm colors, whereas colors between yellow-green and violet are cool colors.
Archibald J. Motley, Gettin’ Religion, 1948.

Pierre Bonnard, Breakfast Room, 1930.

The final effect, -as in all colors- depends on the context in which we see the color. Depending on the surrounding color, a cool color like green can appear warm (e.g. when it is surrounded with a colder/duller color)



COLOR SCHEMES (Color Harmonies)

1) Monochromatic:

Monochromatic scheme involves the use of only one hue. The hue can vary in value (black and white may be added).
Picasso, Crouching Woman, 1902.

2) Analogous:
The adjacent colors on the color wheel are called analogous colors. The analogous scheme involves several hues that sit next to each other on the color wheel. The hues may vary in value.
Navaho Rug, 1885-1895.

3) Complementary:
This scheme joins colors that are opposite to each other on the color wheel, which results with a strong sense of contrast.
Van Gogh, Noon Rest, 1889-90.

4) Split Complementary:
It is related with the complementary scheme, but the colors which are adjacent to one of the complementary pairs are used. E.g. A red may be used with blue and green, instead of blue-green which is red's exact complementary.
Matisse, Two Girls in a Yellow and Red Interior, 1947.

5) Triadic
It involves three colors which are equally spaced on the color wheel. Because the colors come from different parts of the color wheel, the result is usually lively.
P.Fix-Masseau, Periodical Cover, 1948.


COLOR DISCORD
Color discord is the opposite of color harmony. Discordant colors have neither closeness nor contrast. Their relationship can't be described based on their being analogous or complementary. Therefore, their combination can be visually very disturbing. Certain color pairings in this group can almost be difficult to look at (e.g. red-cyan) as they have vibrating edges. Our eyes experiences conflict in trying to perceive them simultaneously.

Although color discord may sound negative at first, it can be used to create excitement and attract attention in a design.
Victor Moscoso, Young Bloods, poster, 1967.



. . . . . . . . . . . . . . . . .
List of References:

Lauer, David A. and Stephen Pentak. Design Basics. 5th Ed. USA: Wadsworth Thomson Learning, 2002.

Zelanski, Paul and Mary Pat Fisher. Design: Principles & Problems. NY: Holt, Rinehart and Winston, 1984.

Typography-History & Anatomy (summary)

Typography is the knowledge of creating and organizing letters, words, sentences & paragraphs to communicate an idea.

Another well-known definition states:
Typography is the study of the printed page.

The invention of movable type by Johannes Gutenberg (c.1455) marks the beginning of the history of the printed page. Although letterforms were standardized for the first time with Gutenberg, his aim was to print a book that looked like the hand-written books of the time. He used Textura (a.k.a Textur) –a type of Blackletter, widely used in the Medieval period.


Printing quickly spread across Europe, Rome and then to Venice, where Nicholas Jenson –a printer and type-caster, cut a new typeface that will have significant influence on other typefaces which were to be created from then on.
Jenson's reference was the Humanist Script (scrittura humanistica) which was itself derived from the Carolingian Minuscule of the 8th c.

Emperor Charlemagne, in the 8th c, issued an edict to standardize writing. The Alcuin of York, supervised a large group of monks to rewrite all the ecclesiastical and secular texts. This script, called the 'Carolingian Minuscule' set the standard for calligraphy for a century.

With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script. A condensed, strongly vertical letterform known as blackletter gained popularity and it remained the standard script for almost 500 years.

With the Renaissance, an enthusiastic revival of classical culture began. In the south, scholars were rediscovering, analyzing, and popularizing Roman and Greek texts. Their sources were written in Alcuin's Carolingian minuscule, which they mistakenly believed to be that of the ancient authors. Scribes adapted to the Caroline as they copied the manuscripts, calling it 'scrittura humanistica' –humanist script.

Jenson's most important achievement was to unite the uppercase (majuscule) and the lowercase (minuscule) letters in one alphabet. Rather than separate styles, they were now 'a set sharing the same design characteristics'.

Another Venetian printer –Aldus Manutius, and his type-caster Francisco Griffo, took Jenson's achievement one step further. Bembo, a typeface cut by Griffo, not only united the lowercase and uppercase better, but also standardized the form of the letters creating an extremely consistent color and texture on the page. Bembo is an epitome of the Old Style type category.
Aldus Manutius is also the inventor of the italic style. It was possible to fit more copy on one page with letters cut in this style, and Manutius used it in 'pocket books'.

As a category, Old Style typefaces exhibit a move away from calligraphy towards rationalized system of letterforms. Although they still bare a visual link to hand-writing, they are based on the design of punches for typefounding rather than pen on paper. Other important design characteristics are: Humanist axis, oblique stress (reminiscent of hand-writing & the broad-nib pen), moderate contrast, bracketed serifs, small x-height, and large aperture.


Compared to the Old Style, the Transitional typefaces follow a more mathematical system. They redefine the alphabet as a rational system of parts. Design characteristics are: Usually vertical stress (or barely inclined); generous counters and x-height; greater contrast than Old Syle; and, less rounded serifs.

printed by John Baskerville, 1757.

Modern typefaces are another move towards the standardization and idealization of letterforms. They show high precision. The stress angle is strictly vertical. The serifs are attached horizontally with no brackets, and are not thicker than hairlines. As a common characteristic, Moderns have sharp visual contrast.

printed by Giambattista Bodoni, 1818.

Egyptians or Slab Serifs have developed parallel for the need for advertising, posters & flyers in the early 1900s. They have strong, horizontal and geometric serifs. There is little or no contrast in the strokes, all strokes are in uniform width.
Clarendon is a bracketed version of the Egyptian style. As bold letters became increasingly popular, a need for ‘text size’ faces suitable for book typography appeared and the result was Clarendon.


The most obvious characteristic of San Serifs is the absence of serifs. Generally strokes are uniform, with little or no contrast between them. The stress angle is always vertical. Variations tend towards either humanist forms (Gill Sans) or rigidly geometric (Futura).

All typefaces that cannot be assigned to any other group – historic, decorative or experimental typefaces, are usually classified as Display. They are not suitable for continuous reading, but they have great expressive power, and the ability to take viewers’ attention.

Script typefaces are based on handwritten (cursive) letterforms and are not to be confused with italics. The individual letters are designed to ‘touch’ in order to create a flowing, cursive effect.