Graphic Design 101

Graphic design should be aesthetically pleasing but it is not art. Graphic design is art with a purpose — carefully planned to elicit a calculated response. In advertisement and on packaging it is manipulative and sneaky. As illustration for book covers and magazines it communicates textual content without saying a word. In websites it describes business identity and pulls the eye along a strategic path.

These are the basic principles of graphic design. The rules and theories are foundations upon which you will, through practice and experience, build your own unique style. Each of these principles may be applied to a single image or to a website as a whole. No matter how large or small a project is, these rules and theories apply.

Use combinations of colors, shapes, lines, scale, positioning and overall composition to communicate your intended message.

Color Theory

Shapes

Circles and Curves: Connection, community, wholeness, endurance, movement, safety. Refers to the feminine — warmth, comfort, sensuality, and love.

Squares and Rectangles: Order, logic, containment, security. Contains four points, which is the mathematical foundation for 3D objects, suggesting mass, volume, and solids.

Triangles: Energy, power, balance, law, science, religion. Refers to the masculine:strength, aggression, and dynamic movement.

Horizontal Lines: Restful, peaceful.

Vertical Lines: Alert, at attention, excitement.

Diagonal Lines: Motion, unrest, chaos.

Composition

"Composition" refers to the arrangement of elements in your piece. Elements can include shapes, lines and text. Composition guides the viewer's eye and unifies your work. You artists out there already know a good composition by instinct. If it feels right and looks right it probably is right. There infinite ways to arrange things. I'll show you a couple of basics:

• The Golden Mean (AKA the Golden Section)
• Proportion and Position

I'll show you how to find the golden mean first. The golden mean method is a good way to position a single element on your canvas. When you have more than one element to arrange, I'll show you some basic positioning.

As I mentioned before, graphic design is not art, however, graphic design is based on artistic principles. Graphic design should communicate a commercial message but it must be delivered aesthetically, so to learn graphic design we have to learn art first.

The Golden Mean

Great to use when you have a single object that is the focus of the piece, and other elements are incidental. Your subject will be placed in a mathematically calculated position. The position will be about 2/3's of the way down your canvas and a bit to the right of 1/2-way across.

You can use the golden mean to find the best placement for any given length or height. I'll use length in this example, to find the golden mean for the width of the canvas.

Step 1: The top left corner of your canvas will be point A, and the top right corner of your canvas will be point B. Measure AB, then mark the midpoint, C. Write the number down, you'll use it a couple of times. You'll be working outside of your canvas now but don't panic, we'll get down there soon. Now, from point B draw a line straight up above the top of your canvas, the same distance as CB and mark point D. BD, CB and AC should be equal lengths (that number you wrote down).

Step 2: Draw a diagonal line to join A and D. From point D, measure the same distance along the diagonal as BD (that number you wrote down), and mark point E.

Step 3: Measure the distance AE. Write it down, you'll use it again in step 4. From point A, mark that length on AB which will give you point F. The distances AE and AF should be equal.

Step 4: Now you'll be dropping lines straight down from points A and B, then F. From points A and B, mark points G and H the same distance as AF (the number you wrote down in step 3). In other words, lines AE, AF, AG and BH are all equal. Points G and H are the bottom of your canvas. Next, measure FB. Drop that length down from points A and B to make points K and J. Join points K and J. The point where that line intersects FI is the golden section point L.

Point L is where you should place the focal point of your subject. This will work for any length or height canvas you need to use. You can arrange other incidental elements in the composition but they should not compete with or overpower the subject.

Proportion and Position

I'll be working with 3 primitive shapes in this example.

Notice that I've selected 3 shapes. Why not 2 or 4? Odd numbers, such as 3, 5 and 7 are the most pleasing to the eye.

The shapes are proportianally about the same. That will create a problem. If you can, use elements that vary in proportion. If you're working with products that are about the same size you can trick the eye by pushing one shape backward (thus making it smaller), and pulling one shape closer (making it larger). Depth and perspective is another can of worms so I won't go there. I'll assume we have the freedom to use any size element we choose and morph our shapes into varying sizes.

A bit more interesting but we can do better. Let's move them around to find a pleasing arrangement.

By overlapping the shapes and placing their bottom on an assumed plane we have created a 3-dimensional sense of depth. We are also leading the eye along a curve — a classic ploy to lead the eye to the real focal point of a piece. The shapes form a curve at their top left sides, leading the eye from the bottom center of the canvas to the tip of the triangle at the top right of the canvas. You could place a focal point, such as the name of a company, at the top of the triangle. The composition below the text will make the text feel elevated, as if it was a pinnacle, or high point, rising above the crowd.

Let's try something else.

This feels much more interesting. This is a classic arrangement that uses "negative space" to add visual interest. The negative space occurs in the blank space between the circle and the 2 other shapes. The negative space is considered an element that you can work with, along with the other 3 shapes. Negative space creates a calm area where the eye can rest.

I'll try one more on you for size.

Don't let your canvas limit you. Experiment with pushing your elements to the edge and beyond for a larger than life feeling.

The above example uses the same classic arrangement of one shape set apart from the others. When using 5 elements, group them into 2 sets: A group of 2 set apart from a group of 3.

We've only scratched the surface. Study and practice some more and you'll find that you can play with a combination of:

• Color
• Shapes
• Lines
• Mood
• Positive and negative space
• Proportion
• Repetition
• Contrast
• Balance and rhythm
• Creating energy and movement
• Overlapping planes for "push & pull"
• Leading the eye with lines and curves

Now, back to the difference between graphic design and art. Art becomes graphic design when the subject of the piece is a commercial message. Remember how I showed you how to find the golden mean? In graphic design you could place a logo, business name or slogan on the golden mean and it would be the focal point of the composition. If you need to use all three elements — Logo, name and slogan — try that arrangement trick of placing the logo and name in a group together, then set the slogan apart from the other two. Use that in a website masthead, where the logo and name are in the top left corner and the slogan is at the top right. Try overlapping to create depth. Use color and lines to enhance the mood your are trying to create. That mood goal should come from the site
Mission Statement.

Study and practice but most of all, have fun! If you're not having fun and getting emotionally involved in your work you'll make pieces that look the way you feel — dull and boring. If you get tired take a break so your fatigue won't show up on the canvas. Take a walk and come back refreshed and ready for recess in your playground.

Create a Composion with Carl Rungius
Root2Art: Geometric Composition
Artist's Web Composition Glossary

Back to Articles List

SKILL LEVEL / INTEREST

OUTLINE

RELATED INFORMATION

Create a Composion with Carl Rungius
Root2Art: Geometric Composition
Artist's Web Composition Glossary