Post on 01-Apr-2015
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