click for captions and image enlargements

INTRO

Most of us take vision for granted. We seem to do it so effortlessly. Yet preceiving images, objects, color and motion is a very complicated process. The study of optical illuions (see lecture below) will prove beyond a doubt that the human eye is not a camera. We see selectively.

Artists have long been trying to understand how we preceive, and much of our understanding of vision comes from learning how artists manipulate images into meaningful and realistic scenes. Artists have always created illusions. That's their business. This seems especially true of media artists.

So what's the big deal? Everyone knows that artists have special "gifts", that their visual sensibilities are somehow sharper that those of the orginary Joe.

Its easy to pass quickly over the realm of human vision because -- to repeat -- we take it so completely for granted. We take vision for granted because it is paradoxically quite "invisible" to us. To understand the paradox, let me introduce my fish friend. He is a mud-skipper.

The Canadian media theorist, Marshall McLuhan, was quite interested in the fellow above -- or whatever creature it was that first lifted its buggy eyes out of the primoriial ocean. A hero if there ever was one. The mud-skipper was not only the first to use try out his vision in the atmosphere, but he used those front fins to venture onto the Earth's first land forms. An odd progenitor to millions of species that followed.

Marshall McLuhan was the first to spot that the media forms we shape, shape us. In 1961 he worte: "Media effects are new environments as imperceptible as water to a fish." McLuhan loved turning a phrase and finding an irony in the everyday world. I met McLuhan a few times and can imagine him observing that even as it emeged to discover a world dry land, the fish's greater achievement might be that it was also the first creature with awareness of the very sea that had been its environment for millions of years.

I like the term "Visual Thinking" as a catch-all for the distinct branch of human intelligence that lives at the fulcurm of art and design. Visual thinking pervades all human activity. Astronomers, nurses, football coaches, carpenters, surgeons, TV schedulers -- workers of all kinds regularily engage in thinking by visual images. It turns out this is not the realm of artists and their special gifts.

The video talk below attempts to give you a first-hand, real-time plunge into six of the Visual/Spatial Operations that constitute Visual Thinking:

Pattern Seeking
Visual Memory
Rotations
Orthographic Imagination
Dynamic Structures
Visual Rdasoning

Drawing deeply on the work of Robert H. McKim, the video taped lecture makes the argument that visual thinking also operates subconsciously in two additional Operations: Dreaming and Fantasy.

According to Professor McKim, visual thinking is carried on by three broad kinds of visual imagery: images we see (not the things themselves we are seeing); images we imagine (and dream); and images we draw. At the end of this chapter, under Techniques, you can find a virtual studio session in drawing. Click the side bar and you will pop directly to it.

Filmmakers, Web Designers, TV Directors and others who create media utilize seeing, imagining and drawing in a fluid and dynamic way, moving easily from one kind of image to another. This involves what McKim calls "Ambidextrous Thinking" -- a merging of the different thinking modes employed by the left and right hemisphere's of the human brain. McKim observes, "Computers cannot see or dream, nor can they create: computers are language-bound. Similarily, thinkers who cannot escape the structure of language, who are unaware that thinking can occur in ways having little to do with language, are often utilizing only that small portion of their brain that is indeed like a computer."

As a starting point to learn about things digital, this chapter may feel a bit remedial because it hovers over more traditional visualization forms. It carefully defines terms that you’ve known since you were a little kid. It dissects patterns of human perception that are hard wired into your brain. Yet it is precisely because humans are pattern-making creatures that you need to study the “Gestalt” perceptual behaviors which, as a designer, you will be manipulating. Our homosapien minds delight in discovering new patterns in unexpected places.

If you’ve not already done so, take a moment to click on the About Site button in the navigation panel on the left.  This page gives a general introduction to the structure of all ten chapters of Design Chops and introduces the other large sub-sites located at mediachops.com.

This Design Chops web site will fail you if it provides knowledge of tools, of vocaublary, of precepts and procedures, and yet does not provide you with the broadened skills and deepened awareness of Visual Thinking.

So What Exactly is Visual Thinking?

This 32-minute talk provides an experiential welcome to a discussion about the right-side-of-the-brain. It begins with optical illusions and moves on to consider "what is thinking" and "what is visual thinking". The presentation uses puzzles to help viewers try out six different kinds of visual/spatial operations. The talk concludes with a review of the ancient beliefs about the right and left hands. The final observation in the video is that traditional educations emphasize logical and word-based functions and that this bias towards developing the left brain impedes the creativity required of Media Designers, who must be ambidextrous. Click frame to start.t

 

In the 1960's, Robert H. McKim began to develop a course at Stanford University that was eventually called Visual Thinking. His fabulous book, "Experiences in Visual Thinking" summarizes his work and is a valuable reading in the education of a media designer. The slide-show in my talk on Visual Thinking is drawn closely from McKim's pioneering work and also draws on insights into "design thinking" that I have gained from David Kelly, one of today's leaders in the field of design.

   

TERMS

visual field: what the eye sees.

cone of vision : the angle corresponding to what the unaided human eye(s) can see.

          

lines of sight & "frame": sight lines are the pathway of one’s gaze towards a physical location. The visual area that one chooses to concentrate upon means "how it is framed" and usually infers enclosure within horizontal and vertical boundaries.

  

focal point: the subject or location of a viewer’s mental concentration. Designers always try to control where their audience’s interest is focused. Term also applies to a technical spec within a camera lens.

  

point: a position in space. There is a point at the end of each line or where lines intersect.

 

line: the shortest distance between two points. When you create (scribe) an actual line on a specific surface, the resulting mark can have a variety of "attributes" -- see below.

position & direction: various descriptors are used to identify a line's spatial character.

       
Straight                                              Squiggly                                              Horizontal

variation & weight: sometimes a line alters its “thicks” and “thins”. Sometimes called the weight       (relative heaviness).


Variation and weight are relative. The "thicks" in one example may be narrower than the "thins".

quality: a subjective judgment delivered as an adjective.

     
Jagged                                        Decorative                               Busy

type: established genres of lines that are often used in drawings and graphic works.

       
Fuzzy                               Cross-Hatched                   Smudged                         Dotted

function: lines carry out many practical tasks.

           
Such versatility: lines can box, cross-out, make editing carots, write words, underline and a wold more.

plane: the surface defined by at least two lines or by three points.

x axis: one of three axes in a three-dimensional rectangular coordinate system. By convention it is the horizontal one.

y axis: the vertical coordinate direction in a two-dimensional space. X & Y axes often indicate values in a chart.

   

borders all two dimensional images have outside edges that form boundaries. Sometimes these borders are also “frames".

 

depth & volume: as a plane moves into 3-dimensional space, it gains depth and maps out a volume.

z axis: represents depth relative to the x and y axis.

solids: familiar forms having three  dimensions. Aka volumes.

   

shape: a recognizable form. Drawing is about translating 3-dimensional objects into 2-dimensional shapes. Shapes have edges, which can then be drawn as lines.

contours: any edge revealed by an object. All concrete objects have physical limits which are perceived as contours. Contours can be drawn as “lines”.

contour drawing: refers to a specific drawing technique in which the artist’s eye slowly follows  a contour (edge) while his or her hand slowly scribes a corresponding line.

 

types of shapes: shapes can be of many kinds, described by many words. Here are some of the most                   commonly used:

geometric shapes: circle, triangle, square, star, crescent and other familiar forms that are based on mathematical relationships. Often used as “deep structure” within drawing.

organic shapes: recognizable as coming from “natural” world. Generally show complexity and variety similar to living organisms.

freeform shapes: can be structured or abstract. Not representational of a “real” form or object. Can be formed by random, unconscious action.

  

value: the light and darkness of a thing.

light sources: if there is no source of illumination, one can not see or distinguish variations in space. Thus all drawings  have implied lighting sources. There is generally a direct source, like sunlight or  an artificial light bulb, and ambient, indirect, or bounced light

gray values: between pure white and pure black there are an infinite number of gray shades  values. Drawing pencils are available in warm grays (brownish tint) and cool grays (bluish tint).

low/high contrast: images which display a limited range of values are called low contrast while those    that display just the darkest or the lightest tonal possibilities are termed high contrast.

   

color: in pre-computer drawing and printing, color was an expensive luxury. But in the digital world, it becomes a powerful elementthat should be used with care – but used often.

electromagnetic spectrum: The universe is made up of particles that form waves of different frequence.

 

how the eye sees color: At the level of the human Sensorium, color is the light waves perceptible to humans.

 

sources of color: Color usually comes from the direct reflection from an object. But color can also consist of light that has been filtered – by the atmosphere to create the red glow of sunset, or by colored glass or plastic – as in the colorization schemes in a feature film.

hue: refers to a particular wave length of color. The term is independent of saturation. Black, white and gray are allcolors without hue.


value / tone: range of lightness and darkness. Describing a color’s value is a relative judgment often having to do with the contrast between a color and its background or neighboring colors. 


the same set of colors on two different backgrounds

saturation: the relative ratio of the color’s raw hue and white content. Saturation is also termed chroma or intensity or dilution, or amount of pigment (faded or rich) .

 

color usage: In digital design, colors can do special jobs. Here are some of them:

color coding color can represent a code for different action routines, for example, green for approval, red for rejection and yellow for warnings.

  

color palettes: combinations of hues, saturations, and tones that, when grouped together, create a harmonious coherence.

- cool/warm colors

  

- grey scale

Here are three different palettes that might be used in building a PowerPoint presentation. In building such a palette, one is aware of a background color and then a set of “foreground” colors that work pleasingly with each other. It may also be important to choose a hue that brings emphasis. The many flavors of color palettes include high saturated, low saturated, monochrome (restricted), and polychromatic.

By general usage, blue and green shades are “cool” while red and yellow shades are “warm”. This is highly subjective and, frankly, a little suspect.

The grayscale is important when making illustrations for documents that will be printed out in black and white. In 24 bit color there are 256 values (shades) of gray. Note that in grays are often tinted with other values, giving them “cold” or “warm” tones.

color theory: There are two modes by which computers create the spectrum of color from a few pure hues.

additive colors / RGB: transmitted shades of Red, Green and Blue are mixed in extremely precise amounts to create 16 million pixel hues for computer display) and all colors possible in photographic printing.

 

subtractive colors / CMYK: reflected shades of Cyan, Magenta, Yellow and Black are “subtracted” from pure white light.

Subtractive color seems odd, yet it is much like the process our eyes experience as we walk around. An red apple, for example, absorbs green and blue, but its surface reflects red. CMYK are basic printing process colors used in the printing industry.

illusion of depth: there are seven techniques that drawers or painters use to create the illusion of depth of what is, after all, just marks on a flat surface.

overlapping plane: a nearer object overlaps the object behind it.

relative size / familiar size: with two or more similar objects, the larger one is closer. This assumes  a perceptual consistency within groups of similar objects (see gestalt laws, below).

modeling: technique of using smooth transitions between values to create the illusion of light falling on a    rounded surface. A toney name is chiaroscuro, the interplay of light and shadow as if on a surface.

atmospheric blur: colors further away are less saturated.

relative height: higher an object is rendered in a plane, the further away.

texture grades: reocurring patterns become reduced in scale as they extend towards the background.

converging lines: seemingly parallel lines converge as they move into the far distance.

     

linear perspective: at an early age, children learn a set of conventions that make drawings appear to have realistic depth. Linear perspective is used by artists who must see and place objects in relationship to each other and to the plane of the earth.

horizon line: the subject of linear perspective  or aerial perspective begins with the horizon line. Objects    above the horizon are interpreted to be floating “in air” while those below the horizon line are perceived as being    attached to the ground.

vanishing point: all lines that are not parallel to the horizon line will converge at a  vanishing point(s), always located on the horizon line. Note that lines or surfaces that may in fact be parallel within the object, will still recede into one single point when linear perspective in a drawing is used.


one-point perspective a drawing approach that uses a single vanishing point.


two-point perspective an approach that uses two vanishing points on the horizon line.


three-point perspective two vanishing points on the horizon line and one above or below the horizon.  

orthographic projection: an illustration technique yielding parallel projection lines in all directions. Thus there is none when there is no linear perspective.

   

forced perspective: the effect created when an artist renders an object differently than one's normal perception of depth.


gestalt laws: the “rules” that govern the perception of human beings.

proximity: elements which are arranged closely together are perceived as a group or unit.

similarity: elements that are similar are perceived to be more related than elements that appear dissimilar.

uniform connectedness: elements connected by uniform visual properties (specially color) are    perceived as more related.

closure: our perception skills will supplement incomplete elements. This is a unconscious process that can be used to increase focus and involvement.

simplicity: our perception seeks out the greatest degree of simplicity, clarity and regularity and then interprets  this a coherent element. There is a inherent recognition of “good form” when such simplicity isachieved.

symmetry or regularity: our perception tends to search for regular forms. These regular patterns can be created by equal gaps or by mirrored axes.

configure/ground: a striking element will be perceived as the relevant form, and any surrounding space is considered to be background.  If the relationship between the fore- and background is not clear, the user may be left confused and the elements displayed will be regarded as ambiguous.

continuity & persistence of vision: our perception system does not analyze each new component  a fresh, but instead draws conclusions based on what has already been seen or experienced (small screen) This is notably true in time-based media like video or animation, where the gestalt phenomenon its also known as persistence of vision.

drawing toolset: while pencil, paper and eraser are the only required tools any designer must have, a slightly larger selection is strongly recommended.

An artist’s sketch pad (5.5 x 8.5 inches. medium weight (60 lb), lightly textured paper)  • 3 x drawing pencils (choose hard to soft – 3H, HB, 3B, ) • eraser (gummy or pink peal) • hand pencil sharpenercolored pencils (small set) • 3 x graymarkers (medium nib: all in same tonal spectrum: bluish, blackish or brownish, but having different values, light to dark) • fine point black pen• small roll of masking tapescissorsglue stickruler (straight edge) • digital camera

WORKFLOW & TIPS

Drawing Exercises

Its really fun to sit in an official life drawing class. There will be a model who, if you are lucky, has some experience in posing (it's an art unto itself). An instructor will usually warm up the class with a series of short exercises. Then there are longer poses -- 5 to 20 minutes -- which allow one to practice the skills and techniques that go into drawing. As one works, the instructor passes by and will offer comments. Sometimes he or she will actually offer a few "corrections' -- a line or two that repositions elements within your work in progress.

 

      

      

The attached PDF is a surrogate for the kind of session described above. It is based on my recollections of drawing, painting and sculpture classes I have taken at the Art Students League in New York. It is also based on the drawing instruction -- and inspiration -- in a paperback volume by Bert Dodson titled "Keys to Drawing". I am grateful to Mr Dodson for granting permission to cite deeply from his own work. Click here for PDF leading to my paper-based studio session. Click here for a detailed Drawing Studio Session.

          

 

Color Pickers:
a variety of digital interface devices that allow a computer user to choose (or mix) a specific color.

-color wheel & spectrum crayons
-font color picker
-component mixers
-swatches




OUTRO

My graduate students tend to become downright antsy whenin our first class, I start handing out sticks of charcoal and large sheets of newsprint. The activity of drawing seems insultingly stupid, too rinky-dink and an overall waste of time.

I start with drawing -- and stick with it -- for four very sound reasons:

1.   It's an effective jump-start into visual thinking – something quite different than “normal” thinking.

2.   Drawing becomes a splendid tangible metaphor for the level of rediscovery necessary in acquiring all new design skills.

3.   Sustained exercises in drawing demonstrates the meaning of “practice”. Progress is usually rapid. Its extremely satisfying to learn new skills.

4.  This plain truth: drawing is a survival skill. Not drawing finished masterpieces. Rather, quick sketches that solve problems in ways that words can’t.

To be a successful media designer, one needs to have the ability to work out ideas on paper using a symbolic code of images.  Some concepts are simply too dense to be effectively bound by words. They can often become so complex that sketches are required to express the relationships between diverse elements like movement, time, audio, sequence, space and style.

As a digital media maker, you it is very valuable to stay aware of how you learn best. Drawing with a pencil and paper will quickly show re-instruct you about how you "see".

Let me hit a little harder on the idea of “practice”. Students tend to think that if they read something or sit through a lecture about it, then they know that something. For many things, this is true enough. However there are some areas in which knowledge can only come through active doing -- through practice. Media design requires grounded, practical knowledge. For example, you could read endlessly about playing the piano, but would still be unable to play a tune the first time you sit at a keyboard. You get the point. Mastery is achieved through practice.

How come we try to be like the best there ever was? How come we seem compelled to measure our abilities against the most accomplished of artists in every field?

As far as drawing is concerned, there is almost a universal feeling of inadequacy. It starts in grade school. By high school most people are completely shut down. Anxiousness about ability to make a representational image leeches into many other domains.  There are many who feel on thin ice when they express an aesthetic opinion in any domain:  from flatware to cinematography to the layout of a letter.

The adjacent gallery is a reminder that there are many folks who make their livings as illustrators, yet don’t possess a technical prowess in drawing like the Masters. (And the Masters like Michelangelo, it should be remembered, did almost nothing by hand once they had apprenticed themselves around the age of ten).

(pix to come)

You will have your own style of drawing. It need only be effective, not gasp producing.

When sketching with pencil and paper, concentrating on refining your style. Is it readable? Is it expressive? There are useful books on perspective drawing, on cartooning and on figure drawing, per se.  As you move between different production roles, you will find that different modes of drawing are frequently called upon:  drawing a site flow chart, storyboarding a scene, roughing a layout or logo, making a lighting diagram, breaking down the action for a scene, sketching character designs for an animated project.

 

PROJECTS


Still Life Cycle

Calisthenics with a triple-pun title: part a studio-type session offered by Kit, partly a set of six workbook activities in which one draws Kit. Finally, Kit’s own drawings (not overly intimidating, to put it nicely) that demo a still life project with 15 different drawing and photographic techniques.

An expanded version of the instructional part of this project is to be found in the Techniques section above.

Media Design Inventory

Self-diagnostic quiz. Helps one analyze past experiences and consider goals ahead. There will be a matrix and scoring system that helps gauge one’s skillset and suggest their current level: green, blue or black (like ski trail ratings)

Idea Vault

-- to come

Date with a Mirror

-- to come

RESOURCES

Books

DESIGN IN GENERAL

    

Lidwell, Williiam, Kritina Holden & Jill Butler, "Universal Principles of Design", 2003 www.stuffcreators.com/upod
This volume is precepts of design - not just graphic or media design, but design in its broadest range of disciplines. Very smart and beautifully presented. Its subtitle" "100 Ways to Enhance Usability, Influcence Perception, Increase Appeal, Make Better Design Decisions, and Teach Through Design." KL

Dondis, Donis A., “A Primer of Visual Literacy”, 1973
This book carries one of the first calls for a comprehensive study and teaching of the photography, film and TV. Although Dondis’ argument is nuanced well beyond a simple comparison with print literacy, uses the metphore as a foundation to  identify 11 component elements which form the “alphabet” of visual structure. “Words” and “syntax” are found within polar structures such as  contrast and haromony. The book recognizes the “literature” represented by the synthesis of visual style. KL

Krause, Jim, “Design Basics Index” , 2004 www.howdesign.com.
An unusual organization of info about “designing effective compositions, selecting dynamic components & developing creative concepts.” (italics mine). Richly illustrated with commentaries on real projects. Lots of exercises. KL

Lupton, Ellen, editor, D.I.Y. Design it Yourself, 2006. www.papress.com
For more on DIY visit www.designityourself.org. Written by students and faculty at Marland Instityute College of Art (MICA) and edited by Ellen Lupton, author of numerous books and curator of design shows at Cooper Hewitt National Design museum. A nice section on the theory behind the DIY (Design it Yourself) movement. 28 categories ranging from Business cards to T-Shirts to Zines. Interviews with 7 professional designers. KL 6/06

Leborg, Christian, Visual Grammar, 2006 www.papress.com.
Originally published in Norway by Abstrakt Forlag (2004) this book is both a primer on visual language and a visual dictionary of the fundamental aspects of graphic design. The author is a founding partner of K, a know3ledge and communications consultancy in Oslo, Norway.

 

DRAWING & VISUAL THINKING

Bridgman, George B., Bridgman's Complete Guide to Drawing From Life, 1992
One of the classic books about figure drawing. Bridgman's methodology is based in a keen observation of geometric structures (sometimes mechanical structures) that exist beneath the elegant surface of the human form.

Dodson, Bert, “Keys to Drawing, 1990

Edwards, Betty, “New Drawing on the Right Side of the Brain”, 1999

Gardiner, Howard, “Intelligence Reframed: Multiple Intelligences for the 21st Century”, 2000

Hale, Robert Beverly, “Master Class in Figure Drawing”, compiled and edited by Terence Coyle, 1985

Montague, John, Basic Perspective Drawing, fouth Edition, 2005
An extremely detailed guide to the principles and techniques of perspective drawing. The book provides a foundation for understanding the optical world and how it works.

McKim, Robert H., Experiences in Visual Thinking”, 1980
In the intro to his seminal book, Robert McKim writes, "One way to use this book is to view it as a manual of alternative strategies for expanding the power and range of your thinking. Every exercise in every chapter is a strategy that can be applied to any problem." He continues a bit later, "You may also approach this book as a series of experiences with your own thinking -- experiences that will expand your awareness of your ability to think productively. An experiential approach is especially relevant to the study of thinking because you always have the subject of your study, in the form of your own thinking, immediately available." And there is this important perspective, "(The book) is primarily a challenge to learn new thinking skills. (Such) skills can be acquired only by active and informed experience ."

Sites

Organizations

Arts Students' League of New York
Institute of Design, Stanford University

COLLABORATORS

This section draws deeply from two educators: Robert H. McKim and Bert Dodson. Their books are cited above and you can find out more about their work at these sites: (to come).

I am indebted to these students for letting me cite their work: Jon Chernes, Seth Greenwald, Minhyong Kim, Yongsuk Alan Lee, Jenny Maglione, Kathi Watson. Learn more about these folks here.