Design Principles

By Wesley Rolston

Five Design PrinciplesProximity

alignment

Repetition

Balance

Contrast

The design principle of proximity calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart, to emphasize their lack of relationship.

This picture is a good example of proximity because the hexagonal shapes help to define and contain the information.

Other examples of proximity are:

Proximity

Ex. 1 Ex. 2 Ex. 3

Back to Main Menu

The design principle of balance is the consideration of visual weight and importance. It is a way to compare the right and left side of a composition.

This picture is a good example of balance because if a line was drawn down the middle, the image is essentially the same on the right as the left.

Other examples of balance are:

Balance

Ex. 1 Ex. 2 Ex. 3

Back to Main Menu

The design principle of contrast is the occurrence of differing elements, such as color, value, size, etc. It creates interest and pulls the attention toward the focal point. Contrast adds visual interest to your page.

This picture is a good example of contrast because the dark tire/fist image pops with the lighter orange background.

Other examples of contrast are:

Contrast

Ex. 1 Ex. 2 Ex. 3

Back to Main Menu

The design principle of repetition is the idea of repeating design elements throughout the entire piece. The element repeated can be a font style, graphic, line, icons, colors, etc.

This picture is a good example of repetition because the soda bottles are repeated in straight lines.

Other examples of repetition are:

Repetition

Ex. 1 Ex. 2 Ex. 3

Back to Main Menu

The design principle of alignment says that everything on a page should be visually connected to something else on the page. Nothing should be placed arbitrarily. When elements are aligned they are connected to each other, even if they are separated on the page.

This picture is a good example of alignment because the candies are in straight lines centered on the page. The text at the bottom is also center aligned.

Other examples of alignment are:

Alignment

Ex. 1 Ex. 2 Ex. 3

Back to Main Menu

This is a good example of contrast because the viewers’ attention is focused on the music player.

The ad features a silhouetted character on a brightly colored background with the iPod and

earphones in white which makes them stand out clearly against the silhouettes and colored

backgrounds.

Contrast

Ex. 2

This is a good example of contrast because the white text and doodles pop against the dark red color of the wine.

Contrast

Ex. 3

This is a good example of contrast because the multi-colored bubbles

pop compared to the silhouette on the right side of the image.

Contrast

Back to Main Menu

This is a good example of alignment because the lines in the image repeat the

right justified text at the bottom of the page.

Alignment

Ex. 2

This is a good example of alignment because all the text runs the same width from left to right as the

ballerina’s outstretched legs. There is a strong margin on

each side of the flier.

Alignment

Ex. 3

This is a good example of alignment because all text is right aligned. This generally works best for small bits of text, such as posters, some

ads, and in this business card layout. Not only are the lines within each of the two blocks of text aligned to the right, both blocks of text are

right-aligned to the same invisible line.

Alignment

Back to Main Menu

This is a good example of repetition because

the pattern from the flip-flop is repeated in the background design.

Repetition

Ex. 2

This is a good example of repetition because the curve in the pitchfork is repeated in the man’s overalls and

the neckline of his shirt and the woman’s. The lines of

the pitchfork are repeated in the lines of the house.

Repetition

Ex. 3

This is a good example of repetition because the curve

of the vase is repeated in the curves of the man and

woman’s legs.

Repetition

Back to Main Menu

This is a good example of balance because the image could almost be cut in half down the center. There is a

very strong sense of symmetrical balance as the

two animals on her shoulders are the same size

and color.

Balance

Ex. 2

This is a good example of balance because even though the sides of the image don’t reflect each

other symmetrically, they do balance each other out in

terms of color, texture, and content.

Balance

Ex. 3

This is a good example of balance because the two

sides of the image are essentially the same.

Balance

Back to Main Menu

This is a good example of proximity because although there

is much information being displayed, the generous room in

the header and appropriately spaced items in the content and sidebar areas help contribute to

this clean and organized look and make it easy to navigate.

Proximity

Ex. 2

This is a good example of proximity because the

different elements of the image (drawings, clipart,

letters) are grouped together for maximum

impact.

Proximity

Ex. 3

This is a good example of proximity because the words

are grouped together with ideal placement of the

hands for maximum impact. The background image is

important but not distracting.

Proximity

Back to Main Menu