Principles of Design

Try walking a long distance with a 2 Kg bag of rocks in one hand and a 10 Kg bag of marbles in the other. After awhile you'll be wanting to shift your load around, putting a few marbles in the rock bag to balance your load, make it easier to walk. This is how balance works in design. Visual balance comes from arranging elements on the page so that no one section is heavier than the other.

Designs in balance have the parts of the design arranged in a planned, coherent visual pattern. "Balance" is a concept based on human perception and the complex nature of the human senses of weight and proportion. Humans can evaluate these visual elements in several situations to find a sense of balance. A design composition does not have to be symmetrical or linear to be considered balanced. It is also true that perfectly symmetrical and linear compositions are not necessarily balanced. Asymmetrical or radial distributions of text and graphic elements can achieve balance in a composition.

The Principle of Balance

Primarily there are three types of balance in a visual composition:

Symmetrical balance:

Watch this short video on symmetrical balance:

Symmetrical balance is easiest to see in perfectly centered compositions or those with mirror images. In a design with only two elements they would be almost identical or have nearly the same visual mass. If one element was replaced by a smaller one, it could throw the page out of symmetry. To reclaim perfect symmetrical balance you might need to add or subtract or rearrange the elements so that they evenly divide the page such as a centered alignment or one that divides the page in even segments (halves, quarters, etc.).

When a design can be centered or evenly divided both vertically and horizontally it has the most complete symmetry possible. Symmetrical balance generally lends itself to more formal, orderly layouts. They often convey a sense of tranquility or familiarity or elegance or serious contemplation.

Above - If the photograph of the side of a building above divides was into four equal sections each section although not mirror images the overall look is very symmetrical and balanced. The CD and screenshot of Apple's website demonstrate symmetry. the right and left side of each composition appears very balanced. This symmetrically balanced layout is very formal in appearance.

Asymmetrical Balance

Check out this short video which discusses asymmertrical balance:

Asymmetry means “without symmetry.” Nothing is mirrored or centered. You could have an odd or mismatched number of differing elements. Designing with an absence of symmetry, does not mean there is not balance. However, you can still have an interesting design without perfect symmetry. Since there is no formula for asymmetrical balance, you must achieve it by sensing whether it looks balanced or not.

While asymmetrical balance is more difficult to achieve than symmetrical balance, it is also more interesting. It requires more active involvement by your viewer and thus has more energy.

With asymmetrical balance you are evenly distributing the elements within the format which may mean balancing a large photo with several small graphics. Or, you can create tension by intentionally avoiding balance.

Uneven elements present us with more possibilities for arranging the page and creating interesting designs than perfectly symmetrical objects. Asymmetrical layouts are generally more dynamic and by intentionally ignoring balance the designer can create tension, express movement, or convey a mood such as anger, excitement, joy, or casual amusement.

Above - (Left) This photograph illustrates asymmetrically (informal) balance because the subject building has some very free-flowing architecture. Balance is achieved because the colour, texture and repeating elements create a neatly organized asymmetrical layout. (Right) The large column of the illustration is balanced by the simple white space to its right, notice the contrasting colours used to help achieve informal balance.

When using asymmetrical balance consider the following:

Things you may want to avoid:

Radial Balance

On square and rectangular pages we generally place elements in orderly rows and columns. With radial designs the elements radiate from or swirl around in a circular or spiral path. Parts of the design must still be arranged so that they are balanced across the width and length of the page unless you're intentionally aiming for a lack of balance.

Above — Here we have a couple examples of radial balance in a rectangular space.  (Left) In this illustration the running shoe is at the center of the design with the glow and burst of light and geometric shapes radiating from the center. (Right) The ornate window itself is perfectly symmetrical but it is off centre and the outlines edging off the page to the top and right throws it all slightly off-balance.

Try This:

While no one but you may see this hands on exercise, take the time to do it just as if you were turning it in for a grade. It will help reinforce what you have learned.

1. Look for examples of symmetrical balance, and then do the following:

2. Look for examples of asymmetrical balance, and then do the following:

3. Look for examples of radial balance, and then do the following:

Emphasis is the art of making a specific element stand out or draw attention to the eye. Emphasis can be achieved in graphic design by placing elements on the page in positions where the eye is naturally drawn, and by using other principles such as contrast, repetition, or movement. Bold and italic type provides emphasis for text. Graphic elements gain emphasis through size, visual weight, colour, complexity, uniqueness, placement on the page, and other features. Below a repeated element has emphasis by changing the colour of one of the elements thereby creating emphasis through isolation.

Emphasis shows that you have a point to your piece. You have something to say, literally or figuratively. You know what you want to communicate and you have the skills to direct the viewer through the work in a way that provides visual interest, multiple levels of information, and ultimately leaves the viewer fulfilled. A feeling that they have spent their time wisely. Emphasis does not make a work appealing to everyone, but without a focal point or emphasis you may be looking at a big mess that does little to accomplish the ultimate goal of communication.

Emphasis by Focal Point

One method used to attract attention in the design is the use of a focal point. A focal point draws your attention to the most important element on the page. There are several techniques used to emphasize the most important object on a page.   Check out this short video which looks at emphasis by focal point in photography:

Emphasis by Contrast

In photography the focal point is usually quite easy to spot. Larger figures, usually found in the foreground, provide a focal point. Even in graphic art, it is usually easy to spot the focal point. It is the element that will stand out as the most visible. Make an effort to consider what you want people to see first when arranging your composition.

Value brings out the differences among a foreground that is in your face like the wolf in this black and white photograph, a mid-ground that may serve as the focal area or simply support, and a background that may be miles away. Value creates the illusion of form - depth, height, and width. Value brings objects off the surface and makes them appear real.

Emphasis by Placement

The placement of elements within a piece can help to emphasize the focal point. The emphasis can be created by all elements pointing to one item within the piece, drawing the viewer’s eye to the attention of that item. In this picture, the frame helps to emphasize the woman’s head. This points the viewer’s eye to that one item, creating the focal point.

Emphasis by Colour

The overall use of a colour or colour family is used to set a tone or mood. Colour is usually the first thing we see. Don't confuse colour domination with strong composition. The composition should work in grey scale or black and white and come to life when you add colour. In these movie posters for classic movies, strong orange colour and dark value contrasts highlight the focal point. In this case, black draws the viewer into the bold geometric shapes and gradual changes in the bold orange surface revealing hidden meaning.

Emphasis by Movement

Elements of different colour, value, or shape direct the viewer's eyes to a focal point. The smallest butterfly moving across an otherwise still background grabs our attention. Elements, almost regardless of size, that are irregular, that create the illusion of movement, stand out. Go to a grocery store and look at all of the packages lined up shelf after shelf. Your eye goes to the brightest colours, but also to designs on an angle. It's called a mnemonic device. You could also call it visual movement. The Frosted Flakes package shown below is a great example of this. In photography and video, emphasis can imply movement by focusing of a subject that is moving.

Emphasis by Difference

You can create emphasis by inserting an element that is different. You can use colour, shape, line, texture, value, space, and or form in a way that distinguishes one element or area from the whole in order to focus the viewer attention on the piece. Think about how we notice things that do not "fit in" to their environment. Remember the game on Sesame Street, "one of these things is not like the others"? Same principle. See if you can pick out what doesn't belong in this photograph.

Things to consider:

Things to avoid:

Try This:

While no one but you may see this hands on exercise, take the time to do it just as if you were turning it in for a grade. It will help reinforce what you have learned.

1. Emphasis seems to be necessary for most good compositions. Find two examples where emphasis is demonstrated and two where it is not.

2. Even though it is not talked about specifically above, emphasis works in combination with balance. Using examples show how these 2 concepts are closely connected (find one symmetrical and asymmetrical example).

3. Create your own example of emphasis by using difference.

This indicates the relative visual size and weight of particular graphical elements in a design composition.

Proportion in art is the comparative harmonious relationship between two or more elements in a composition with respect to size, colour, quantity, degree, setting, etc.; i.e. ratio. A relationship is created when two or more elements are put together in a composition. This relationship is said to be harmonious when a correct or desirable relationship exists between the elements. This refers to the correct sizing and distribution of an element or object, which creates good proportion. Good proportion adds harmony and symmetry, or balance, among the parts of a design as a whole.

Check out this short video which looks at scale and proportion:

When the principle of proportion is applied to a composition it is usually to the relationship of size. That is, the size of one element of the composition as compared to the size of another related element. In the instance of a relationship of size a comparison is made between the:

Proportion is usually not even noticed until something is out of proportion. When the relative size of two elements being compared seems wrong, or out of balance, it is said to be "out of proportion". For example if a person has a head larger than their entire body, then we would say that they were out of proportion.

In the "Bad Proportion" examples on the right of the illustration above, the top row, which uses equal division of the shapes, creates monotony, and in the bottom row the very unequal division creates a lack of harmony.

There are times when proportion is exaggerated to convey a message. (see the examples below.) It is impossible to hold the world in your hand yet this composition does exactly that. White out can be used to cover all sorts of things but it is unlikely you would paint cross-walks with it.

Good Proportion

There are several ways for achieving good proportion:

Try This:

While no one but you may see this hands on exercise, take the time to do it just as if you were turning it in for a grade. It will help reinforce what you have learned.

1. Look for poor examples of proportion from a media of your choosing. Explain why they are poor examples in your own words. Then suggest ways in which you would improve them.

2. Find 3 examples of exaggerated proportion and explain how it helps to visually communicate what the designer wanted. In your opinion, were they successful and why? Would you have changed anything?

Contrast in composition occurs when two related elements are different. The greater the difference the greater the contrast. Contrast adds variety to the total design and creates unity. It is what draws the viewer's eye into the composition and helps to guide the viewer around the art piece. Some ways of creating contrast among elements in the design include using contrasting colours, sizes, shapes, locations, or relationships. For text, contrast is achieved by mixing serif fonts with sans-serif fonts on the page, by using very different font styles, or by using fonts in surprising or unusual ways. Another way to describe contrast is to say "a small object next to a large object will look smaller". As contrast in size diminishes, monotony is approached.

Contrasting Colours

Now that you have a basic understanding of colour, it is important to examine the concept of contrast. Contrast creates emphasis in printed and graphic objects, in web pages or in videos. It can be developed through the use of contrasting colours. Contrast is the perceived difference between two adjacent colours. Because white and black are not really colours, they are said to represent achromatic contrast. Black and white also represent the highest level of contrast. Complementary colours from the colour wheel represent high chromatic contrast.

Also known as contrasting colours, complementary colours are directly opposite each other on the colour wheel. Selecting contrasting colours is useful when you want to make the colours stand out more vibrantly. If you are composing a graphic using lemon yellow, using a blue background will make the yellow stand out more. The same sort of effect happens with warm and cool colours. The warm colours are perceived as advancing out of the screen slightly, and the cool colours recede.

Contrasting Text and Backgrounds

Developing contrast with text can be as simple as making one word bold or italic so that it will stand out from the rest of the sentence. Using larger text or a different font for a title helps to produce contrast that organizes information. When it comes to readability on a computer screen, black text on a white background is highly recommended. It produces the greatest amount of contrast and is best for most readers. Other text colours may be used as long as they contrast well with the background colour.

Be aware that eyesight issues may cause the viewer to have difficulty differentiating between colours that are similar. Lettering that doesn't have enough contrast may be difficult to read when used together on screen or in print (see the black and blue or white and yellow "contrast" example above). Coloured backgrounds that include patterns and textures can be especially problematic. Keeping things simple, like Apple's famous iPod advertisements, were great examples of contrast. They were also very effective as they are instantly recognizable. The ads expertly used contrast to focus the viewer's attention on the music player. The ads featured a silhouetted character on a brightly coloured background. The iPod and earphones appear in white and stand out clearly against the silhouettes and coloured backgrounds.

Contrast with Size

Big and small elements of the same type, such as big and small images and big and small type are the most obvious uses of size to create contrast. Contrasting white space, or the physical size of the piece, with another element of the design is another method to achieve contrast.

Things you may want to ask yourself:

Try This:

While no one but you may see this hands on exercise, take the time to do it just as if you were turning it in for a grade. It will help reinforce what you have learned.

1. Find an example of achromatic contrast, complementary contrast, and tertiary contrast in a visual composition.

2. Demonstrate an example of contrast using type.

The illusion of movement is achieved by creating instability in the image, for instance, adding a blurred background to the image. Movement can be achieved by using graphic elements that direct the eye in a certain direction, such as arrows that point the way, or a series of lines or dots that get progressively larger or smaller, creating a more subtle sense of movement. Movement can be accomplished simply by using a photograph or clip art of something moving - like a runner - as opposed to something stationary - like a person standing.

Anticipated & Blurry Movement

Live figures portrayed in unstable body positions cause us to feel that motion is imminent. We know from past experience with these positions that some kind of movement will occur soon. This heightens the feeling of motion.

When figures move past us at very high speeds, we perceive that figure as somewhat blurry. This can be achieved while capturing an image with a camera or digitally using an image editing program like Adobe Photoshop. This experience leads us to interpret blurry or indistinct outlines as conveying motion. Automobile manufacturers use movement in still photos to imply the speed of their car.

Multiple Image

Similarly, showing multiple overlapping images gives us the impression of motion. We can see that the person or figure has moved through a series of poses.

Optical Movement

In optical movement, the eye is forced to move around the picture in order to see all the different elements. Optical movement can be enhanced by curved forms that keep your eyes moving in a circular pattern throughout the picture, like in the circular flow chart above on the left. The example above on the right uses the progression of colour (rainbow) to create optical movement from yellow to green, as well as counting from one to nine. The Audi website below uses arrows to move the viewers attention from left to right.

Optical Illusions

Certain optical illusions based on the repetition of geometric forms will cause your eye to produce motion where none is present. This picture really seems to move, doesn't it? For some fun optical illusions and the explanation for why you interpret them the way you do visit LottoLab.

Rhythm and Movement

Rhythm refers to the way your eye moves throughout a picture. Some pictures move you throughout in a connected, flowing way, much like a slow, stately rhythm in music. Other pictures move you from one place to another in an abrupt, dynamic way, much like a fast, staccato rhythm in music. This is intended to give you the impression of movement. Rhythm in art is created by the repetition of elements. Similarity of elements, or flowing, circular elements will give a more connected flowing rhythm to a picture. Jagged or unrelated elements will create a more unsettling, dynamic picture.

Try This:

While no one but you may see this hands on exercise, take the time to do it just as if you were turning it in for a grade. It will help reinforce what you have learned.

1. On a piece of paper using only vertical lines and dots, create a steady rhythm.

2. On a piece of paper using only vertical lines and dots, establish a rhythm with variation.

3. Using magazines, photographs or WebPages, select 5 compositions (page layouts, advertisements, photographs, etc) and determine the focal point. See if the composition leads your eye from the first thing you noticed to the other elements without you consciously thinking about it. In your opinion did it have the effect that the designer had intended, and why?

Unity in a composition is achieved when all of the design principles (balance, emphasis, proportion, contrast and movement) have been correctly applied and there is harmony between them. Everything selected for use in a composition must complement the key theme and must also serve some functional purpose within the design. Achieving unity in your compositions will only result from practicing, knowing and selecting the right visual elements and using the best principles of design to relate them.

Unity, sometimes referred to as harmony, is the hallmark of a good design. It's the final result in a composition when all the design elements work harmoniously together giving the viewer a satisfying sense of belonging; You know unity has been achieved when all aspects of the design complement one another rather than compete for attention. It serves to reinforce the relationship between the design elements and relates them to the key theme being expressed.

Unity creates a sense of order. When a design possesses unity there will be a consistency of sizes and shapes, as well as a harmony of colour and pattern. One way this is accomplished is by repeating the key elements, balancing them throughout the composition, and then adding a little variety so that the design has its own sense of personality. Learning to juggle the elements and principles in such a way as to achieve the right mix is a key to good design.

When unity is achieved:

Vincent van Gogh - "Starry Night", 1889

Van Gogh was concerned with the unity of his paintings. In this one, the swirling brush strokes and dominance of cool colors tends to unify the surface and create the feeling that everything belongs together.

To create unity you must have a clear objective in mind that you want to communicate to the viewer. You must stay focused on achieving the objective and not deviate from it. If there is an element you are considering adding to a composition and it does not contribute to the overall objective, then it should not be added to the design.  You also need to be analytical about your work, maintaining objectivity at all times. You need to be willing to accept critiques from peers, friends, and family members. When the purpose and message you intend to portray is consistently understood the same way by several people then you have succeeded in using the principle of unity.

When you feel your composition is complete, take a step back and observe it with an objective eye. The final test of unity is one in which nothing can be added to or taken away without having to rework the entire composition. The relationship of all the elements should be so strong it would actually hurt the design to add or remove any one thing. When nothing can distract from the whole then you have unity. However, in your efforts to achieve unity you need to keep in mind that too much unity without variety is boring, and too much variation without unity is chaotic.

Target Ad Campaign
Gaby Brink
Templin Brink Design

Nowhere is unity more important than in an an campaign. Creating unity is a form of branding: you must establish a look and attitude that are recognizable even before the content of the ad is read. This particular campaign for Target works quite well in this way. The design is fresh and attention-getting.

This study on the design principles would not be complete without giving some practical guidelines on the use of the principles of design.

Putting the principles into practice

Once the designer has an objective in mind, the effective use of the design principles of balance, emphasis, proportion, contrast and movement will aid in the achievement of unity in your work of art. Whether an artist uses the principles consciously or subconsciously, unity should always be the goal of every artist.

Try This:

While no one but you may see this hands on exercise, take the time to do it just as if you were turning it in for a grade. It will help reinforce what you have learned.

1. Choose a group of objects, like tools or chess pieces, and photocopy or draw them. Then cut them out. Arrange them on the page with type (either type you found from a magazine ad, or hand lettering). To achieve unity, use principles of movement and proportion. For example, repeat colours in the design to create visual relationships among the elements.

2. Select 5 visual compositions of your choosing (movie posters, page layouts, advertisements etc.) and make a note on each of the five principles for each and explain how it assists to create good or poor unity.

Session 2: Self Check and Project

In this section of the lesson, students will check their understanding of what they have already learned by completing the movie poster critique assignment.

In this section, students were introduced to the basic principles of design. 

These principles of design included:

Students examined how each of these principles of design can be used when creating compisitions and had the opportunity to critique a professional movie poster's use of these basic principles of design. In the next lesson, students will start to explore the principles of typography.

Before continuing on, please review the lesson objectives that were presented to you at the beginning of the lesson. If you have any questions, please contact your teacher before moving on.

By the end of Session 2: "Principles of Design", students should be able to:

• define the principles of design

• identify the principles of design using examples

• describe the impact of each principle on the visual message; e.g., balance, emphasis, proportion (scale), repetition (rhythm/pattern), unity, contrast, harmony, proximity, variety

• participate in a critique or an assessment of compositions created by others; e.g., classmates, professionals by:

• identify elements and principles used in the images
• comment on the impact of the elements and principles in the construction of the message