Archive for Uncategorized
Outside class: week three
If you’d like to see some good examples of work from the Representing Interaction project. Examples can be found here.
In class: week three
What do you know?
We need to understand and develop a visual language in order to transform data into meaningful information.
Most of the time we need to answer a question;
description; who is this? , what are you?
location; where is this?
process; how can I?
comparison; which is better?
time; when is this?
subject matter ( data ) + form ( visual elements / relationships / dynamics ) = meaning ( content )
The first step in transforming data into information ; How do we organize the data?
Understanding Visual Language
Every visual composition involves a cascading hierarchy of meaning, what do we see first? what do we see next? What is foregrounded?
Rubin Vase; Edgar Rubin, Danish psychologist remembered for his work on figure-ground perception.
Mc Escher: exploring figure ground relationships.
We need to consider dynamics of affinity and contrast and overall dynamic range.
Surplus visual activity is non-information, noise and clutter
Economy, simplicity, the most important elements are foregrounded.
Organization of data + dynamics;
ordering / hierarchy excessive noise leads to confusion, where am I? what is this?
clarity; where am I? what is this?
Low dynamic range but too little contrast
1+1 = 3 or more, visual activity results from negative space
Too much ; West Service Center
Calming line, emphasis on suject matter; Icon Buffet
The world and information is 3 dimensional, paper and screen is flat. How do we resolve this?
Formal Elements:
Line; a path between two points, a path created by a medium, tool or instrument. Line can be actual or implied, gestural, calligraphic, contour describing shape or exist in three dimensional space. Line Character refers to the medium used to create line.
example 01: Berlin map
Shape; An area defined by value, texture, color. pattern, actual or implied contour line
example 01: Contour line
example 02: Color
example 03: Color
example 04: Texture/Pattern
Texture: The surface quality of a shape. Texture can be physical ( having a physically varied surface ) or flat and simulated.
example 01: Physical Texture
example 02: Simulated Texture
Value: The relative degree of light or dark ( the key word here is relative ) . In black and white photography value is defined using zones; Zone 0 is maximum black and Zone 10 is maximum white. In design; High Key ( middle gray or lighter ) and Low Key ( middle gray or darker )
example 01: Some good examples of using value to layer information in the work of Megan Jaegerman.
Color:
Hue; A specific wavelength of color in the visible spectrum of light. The subtractive color wheel includes the primary colors; red, yellow and blue, secondary colors, orange, green and violet.
wavelength and color
Intensity; The purity of a hue. We will also refer to Saturation and Chroma when discussing Intensity. The saturation point of a color is found in the spectrum produced by a beam of light passing through a prism. Adding the compliment of black to a color desaturates it ( makes the color less intense ) .
example 01: High Saturation
example 02: Lower Saturation
Color Value / Chromatic Value: The degree of Light or dark in a color. Adding black or the compliment produces a Tone and desaturates the color. Adding white produces a Tint. All hues are not created equal when it comes to value! Hues in the center of the visible spectrum ( Yellow fro example ) are High Key, those on the fringes of the spectrum are Low Key ( Red and Violet ) . This happens because ability to see wavelengths tails off as we move towards Ultraviolet ( lower wavelength ) and Infrared ( higher wavelength ).
Temperature; Colors can be grouped as warm ( red, orange, yellow ) and cool ( colors containing blue ) .
Relationships
Visual elements relate to the picture plane, the outside world and each other by position, size, direction, space, value and color.
Position, size and direction
Jacque Bertin’s retinal variables
Positioning on a vending machine
Relational elements on highway exit sign
Position and size as small multiple
: Actual space in a two dimensional composition is defined by height and width. When discussing space we will often refer to Depth ( The text uses the term Intuitive Space ) This can be produced by overlap, transparency, size relationships, perspective, texture, color and value relationships.
Space: Actual space in a two dimensional composition is defined by height and width. When discussing space we will often refer to Depth ( The text uses the term Intuitive Space ) This can be produced by overlap, transparency, size relationships, perspective, texture, color and value relationships.
Example one:Paul Rand
Example two; Overlap perception
Example three:Chris Ware
Example four: Bridge Collapse
Example five: Bad use of perspective and metaphor!
Example five: Tufte, layering in medical journals
Scale: Not to be confused with size! This term refers to size as related to us, the viewer
My favorite example: Simmons Hall
Color Relationships
Some Subway maps:
Oliver Byrne’s 1847 edition of Euclid’s Geometry
Reading list: week one
Welcome to the blog for Interactive Design One, DM3212 with Gina Kamentsky. Here’s links for this weeks on-line reads;
Nathan Shedroff, Information Interaction Design
Dan Saffer, A Definition of Interaction Design
This weeks book reads:
Donald Norman, The Design of Everday Things, chapters 1-3
Just for fun:
Other resources:
Information on design disciplines can be found on the Design Council website
A very good IxD Blog to bookmark is Boxes and Arrows, we will be reading various articles
