The Principles of Design

In the last post we discussed the elements of design.  Now we are going to look at how these elements relate to the principles of design.

The elements of design (line, shape, color, texture and value) are the building blocks of all visual art and design.  The Principles of Design are how we arrange and/or organize these elements. 

These principles are:

rhythm-  Often the term rhythm is used to describe visual art and design.  A Visual Rhythm can be created in a variety of ways.  Often this is done through repetition and the type of lines, shapes and colors that are used.  balance-  Balance refers to how the elements within a composition are organized.  Here we often think about Symmetrical Balance and Approximate Symmetry.    harmony/ unity- All of the elements of a design relate and complement one another.  dominance/ emphasis-  Both Dominance and Emphasis show a certain element within a composition having more visual weight.  We can think about this as a sense of Visual Hierarchy.    variety- We can say that variety is often what makes a design interesting.  Variety presents differences between the elements that appear in a composition.  For instance when we look at a composition based on repetition, often there are additional elements that break up the repetition to create visual interest.  scale/proportion- Scale often refers to the sizes of the elements that are found within a composition.  Scale and Proportion refers to how the sizes of the elements within a composition relate to one another.  direction- When we see the principle of direction, we see the elements being used to create a visual direction within a composition. 
repetition- We see repetition quite often in pattern design.  In Repetition an element in a composition is repeated.  

  What principles do you see at work in this photograph?   We see repetition, in the repeating green leaves.  We see direction in the organic green shapes, visually leading our eyes through the composition.  The brown part of this plant presents variety in this composition. 

In the next photograph we see the use of type against a painted brown brick background.  The order of the type presents a sense of balance.  The use of color create a visual sense of harmony and unity.  Maybe we could say that the numbers, 1609 dominate this composition, creating emphasis.  

In this piece we clearly see repetition.  Variety of shape is found in this composition to create a sense of visual interest.  We see the shape of metal heater being the dominate shape at work. 

What elements do you see at work in the next image?  Quite often we see all of the principles working in one way or another. 

The Elements of Design

The Elements and Principles of Design are the foundation of the study of Art and Design.  They are the building blocks of all Art and Design.  The Elements and Principles of Design provide us with the vocabulary to begin to discuss, explore and create strong Visual Art.

Let's begin with the Elements of Design.

In 2-Dimensional Design the elements of design are:

LINE, SHAPE, COLOR, TEXTURE AND VALUE

Line:  A form that connects dots.  A line becomes visible due to the contrast between the form and its surrounding area.  In Visual Art a line is often the most basic element.  Many pieces of art begin with one line.  A line can be drawn, brushed, erased, carved...  The possiblities of line are endless!

A line is a dot that went for a walk. - Paul Klee

Shape:  A shape is an enclosed defined space.  Quite often when we think of shape we think of geometric shapes such as circles, squares, rectangles and/or squares.  Shapes are not limited to these definable forms though and have infinite possibilities.
 
The object of art is to give life a shape. - Shakespeare

Color:  is the part of light that is reflected by the object that we see.  We can not address Color in Art and Design without looking to Color Theory.  Color Theory is a vast topic with a great deal of information.  The basic pieces of Color Theory are the Color Wheel, Color Context and Color Harmony.  

Texture:  is the tactile surface quality of an object.  Some examples would be soft, fluffy, rough, and wet.  Texture can be actual or visual. 

Value:  refers to the range from lightness to darkness. 
    
As we view Visual Art and Design we find these elements being used in a variety of ways.  Below are three examples of the Elements of Design/ The Visual Elements at work.

Sol LeWitt, Wall Drawing

In this example by Sol LeWitt the dominant element at work is line. We see organic line moving through the composition.  The contrast between black and white create a strong figure/ground relationship.  We can say that this example shows us line simplified.  A thick black line curves around, filling the space.

Alice Neel, Marisol. Oil on Canvas, 1981

In the next painting by Alice Neel, Marisol, we see all the visual elements at work, pointing out how beautifully the Visual Elements work together.  When we compare this piece by Alice Neel with the Wall Drawing by Sol LeWitt we can surmise that the portrait uses the elements in a more complicated way.  Maybe we need to look a little closer to see these elements at work.  We see the lines of the chair.  The lines of the sweater tell us a great deal about the anatomy of the woman.  We see the lines that define her facial structure, hair, hands and pants.  We see the color that defines her skintones, hair, clothes and surroundings.  When we look closely we see warm and cool colors as highlights and shadows.  We see the juxtaposition of her blue pants against a brown-orange chair.  Throughout this painting we see value at work in the highlights, shadows and midtones.  Underlying this painting are the shapes.  We see the shape of the negative spaces around Marisol.  We see the shape of her pants, the shapes of the shadows on her pants, the shapes of her fingers, hands, sweater, hair, eyes, nose and more!  In this piece we see the visual texture of her hair, skin, clothes and the chair that she sits upon.  

Milton Glaser, Bob Dylan Poster. 1967

In the Bob Dylan Poster by Milton Glaser we see the elements of design at work again.  

The use of color, line and shape work beautifully throughout this composition.  Dylan's hair is treated in a stylized manner, showing the hair as a simplified visual form with exaggerated color and shape.  We see this portrait of Dylan with flat shape and color, the black silhouette, colorful shapes with contour line, the white empty space and use of type.  The dominant elements at work in this piece would be shape and color.  Yet we do see the use of line and in the type as well as the contour lines surrounding the shape of Dylan's hair.  Value is at work in the contrast between black and white as well as the contrast and inherent value that the colors present.        



To understand and create Visual Art and Design we see and use the elements of design.  Line, Shape, Color, Texture and Value are the building blocks of Visual Art.  As we look around we see these elements at work in complicated and simple ways.   

So, What exactly is a vector?

So, What exactly is a vector?????
It is one thing to read about the differences between Vector and Raster Art but true clarity comes when we see these differences.

To re-cap from my earlier post a vector drawing can be described as a clean, visual composition that can be scaled without losing resolution.  Vector art is great for creating wireframes, logos, icons, complex shapes, setting type and so much more.

Illustrator is Adobe's Vector Drawing software that integrates beautifully with Adobe's other Programs (Photoshop, InDesign, Flash, AfterEffects, etc). 

Whereas Illustrator is a Vector based program, Adobe Photoshop is raster imaging software.  When working with raster images we are limited by pixels and resolution.  We constantly have to watch the DPI (dots per inch) or the PPI (Pixels Per Inch) settings .  There are places where raster imaging is exactly what we want.  Pixels are perfect for photos.  A concentration of colored pixels is what creates a digital photograph. 

(One thing to keep in mind is that sometimes you will have to take a vector image and turn it into a raster if you are taking that image to the web, a mobile device or an e-tablet.)  

Now let's look at some examples!

Example 1: Vector Logo on Left, Raster Logo on Right

In the above example, Example 1, we see a Vector Graphic on the Left and a Raster Graphic on the right.  Upon first glance the two images don't look much different.  Now let's zoom in to see the differences!

Example 2:  Zoomed in Raster Image

In Example 2 the differences become clear.  Our raster image is based on pixels.  When we zoom in we see these pixels.

So, when we work with our raster images we have to continually watch the resolution.  The more pixels an image has the higher the resolution.  The higher the resolution the larger the file.

When working with raster images if we are going to print the image we usually work at a higher resolution.  This resolution is often set to 300 ppi (pixels per inch).   When we are preparing an image to be used on the web we often work at a lower resolution such as 72 ppi (pixels per inch).  One of the reasons why we work at a lower resolution when we are preparing an image for the web is so the file size is smaller and will not slow down the person's internet connection as he or she waits for it to download.

Example 3: Zoomed in Vector Image

In Example 3 we see what happens when we zoom in on our Vector Image.  This graphic is not based on pixels.  Instead, underlying the shapes, colors, and type are mathematical equations, making this graphic resolution independent.

We could describe the edges of this image as being crisp and clear. 

The Basics of Illustrator

About Adobe Illustrator

Illustrator is a vector drawing program used to create such things as logos, illustrations, maps, infographics, charts, comics, diagrams and more!  Underlying the shapes and lines of the illustration (the vector image) that we see are mathematical equations.  Since this image is based on mathematical equations we can scale it to whatever size we wish without loosing resolution.

The opposite of a vector image would be a bitmap image, also known as a raster image.  These images are formed through grids of dots (pixels).  The image is created through pixels of color.  The more pixels the image has the higher the resolution.  Images with fewer pixels are low resolution.    

 So, now that we have clarified the differences when do we know what type of image we should use?  What are the advantages of creating a vector image over a raster image?  

A few of the main advantages of Vector images are as follows:

• can make larger without loosing resolution
• smaller file size
• great for logos, infographics, charts, "cartoony" images

Some of the disadvantages of Vector images are as follows:

• images do not look photorealistic
• images tend to look flat and "cartoony

Re-Think Design

Design has the power to solve problems, inspire thinking and create discussion. Yet the Environmental Protection Agency estimated this year that products produced by the Graphic Design Industry comprise 50% of the solid waste stream today. 

Re-Think Design!