Principles of Design

The principles of design suggest effective and pleasing ways to arrange text
and graphics on the page as well as the arrangement of individual elements
within illustrations, logos, and the overall graphic design of a document.
Generally, all the principles of design apply to any piece you may create.
How you apply those principles of design determines how effective your
design is in conveying the desired message and how attractive it appears.

The Six Principles of Design

1. Balance
2. White Space
3. Alignment
4. Contrast
5. Proximity and Unity
6. Repetition and Consistency

Balance
Balance is an equal distribution of weight in the design by the
placement of your elements. The elements don’t necessarily need to be
of the same size. Balance can be achieved by placing a large element
on one side of your design and several small elements on the other side.
Balance provides stability and structure to a design.

Balance is an equal distribution of weight. In terms of graphics, this

applies to visual weight. Each element on a layout has visual weight
that is determined by its size, darkness or lightness, and thickness of
lines. Color, value, mass, shape, and texture can be used as balancing
elements.

Symmetrical balance is achieved when the weight of the elements on both halves of the design is
even, given a center line. Symmetrical balance can communicate strength and stability and is
appropriate for traditional and conservative publications, presentations, and web sites.
 Vertical Symmetry – each vertical half (excluding text) of the
brochure is a near mirror image of the other, emphasized with the
reverse in colors. Even the perfectly centered text picks up the color
reversal here. This symmetrically balanced layout is very formal in
appearance

Vertical & Horizontal Symmetry – this poster design divides the

page into four equal sections. Although not mirror images the overall
look is very symmetrical and balanced. Each of the line drawings are
more or less centered within their section. The graphic (text and
image) in the upper center of the page is the focal point tying all the
parts together.

White Space
White space is nothing. White space is the absence of text and graphics. It breaks up text and
graphics. It provides visible breathing room for the eye. Add white space to make a page less
cramped, confusing, or overwhelming. White space is an important principle of design missing
from the page layouts of many novices.

Here's how:
 Increase paragraph spacing – use a line of space or a deep indent,
but not both, to put white space between paragraphs.
 Increase space between columns of text – alleys or gutters that
are too narrow cause the eye to skip over to the next column. Put
white space between columns with adequate alleys.
 Put space at the end of lines of text – use ragged-right alignment to add white space between
columns and at the end of lines of text.
 Put more space around outer edges of page – if space is
necessarily cramped within the body of the publication, add white
space with generous margins or gutters.
 Leave more room around graphics – when wrapping text around
text and graphics, provide plenty of standoff white space. Don't
run text right up next to the edge of the graphics.
 Increase space around headlines – add white space between
headlines or subheads and the preceding copy and a bit below as
well.
 Increase space between lines of type and individual characters – add typographic white space
by increasing the leading of body text, using lighter type, avoiding letter spacing that is too
tight, and avoiding unending condensed or heavy type.

Tips:
 Keep the design balanced – achieve a balance of print and white space using a mix of
techniques described above, as appropriate to the design.
 Don't go overboard – avoid bad white space caused by trapping space within text, rivers of
white (often found with unadjusted, justified type), overuse of expanded type, too wide
gutters, excessive leading, and poorly kerned headlines.
 White space is any color – white space isn't always white, unless the paper is white. If the
paper is yellow, the white space is yellow. White space is simply empty space – an area
devoid of text and graphics.
 Preprinted designs need white space – when printing on preprinted paper that has its own
obvious design elements; such as lines, circles, etc. that aren't simply an overall pattern
blending into the background; treat those elements as if they were part of the text and
graphics you are printing and allow for adequate white space around those parts of the
design.

White space doesn't have to be white. The large block of black created by the graphic of the
people adds a large block of black white space. Multiplying the number of people and reducing
the size of the car in the second example above provides additional contrast and reinforces the
theme of the copy. Adding leading, larger margins, deeper paragraph indents all add white space
or breathing room to the design.
Alignment
Alignment creates a sharper, more ordered design. Aligning elements allows them to create a
visual connection with each other. It tightens the design and eliminates the haphazard, messy
effect which comes when items are placed randomly. Aligning elements which are not in close
proximity with each other, helps to provide an invisible connection between them. Alignment is
one of the most basic and important principles of design. It allows us to create order and
organization among elements.

Alignment is the placement of text and graphics so they line up on the page. Use alignment to:
 create order
 organize page elements
 group items
 create visual connections

Good alignment is invisible. Most readers won't consciously notice that everything is lined up
neatly but they feel it when things are out of alignment.

There are several types of alignment:

 Horizontal alignment – left and right margins are exactly or visually equal. Horizontal
alignment can be across the page or within columns. It doesn't mean center alignment. A
block of flush left/ragged-right text can be aligned horizontally. Even though individual
lines of text are not perfectly aligned on each side, careful attention to the amount of rag
(white space at the end of the line) can result in a visually balanced amount of margin on
each side of the block of text.
 Vertical alignment – top and bottom margins are exactly or visually equal. Vertical
alignment can be the full page or within portions of the page.
 Edge alignment – lines up text or objects along their top, bottom, left, or right edges.

 Center alignment – may be done horizontally or vertically, or both.

  Visual or Optical alignment – fixes some of the problems that can occur with other
types of alignment due to the varying shapes of letters and graphics. In visual alignment
the objects may not be precisely aligned but to the eye they appear to line up.

Contrast
Contrast occurs when two elements are different. The greater the difference, the greater the
contrast. The key to working with contrast is to make sure the differences are obvious.

Contrast allows you to emphasize or highlight key elements within your design. Contrast is
created when two elements are total opposites. This doesn’t necessarily have to be colors either.
It can be achieved with fonts (classic/contemporary), lines (thick/thin) and shapes (big/small),
just to name a few.

Contrast plays a crucial part in the organization of information on a page. It will guide the reader
to where they should look first or to the most important element. On a page without contrast, the
reader doesn't know where to look first or what is important. Contrast aids in readability.
Contrast makes a page more interesting so the reader is more apt to pay attention to what's on the
page. For it to work successfully though, it must be strong and obvious. It needs to make an
impact.

The four common methods of creating contrast are:

 size
 value
 color
 type

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 contrast. Contrasting white space or the physical size of the
piece with another element of the design is another method.
Contrast with Value
The relative lightness or darkness of two elements to each other can create a contrast in value.
Whether with shades of gray or tints and shades of a single color, the further apart the values, the
greater the contrast.

Contrast with Color

Using harmonizing, complementary, and opposite colors to create contrast. Be careful with the
value of the colors as well. For example, harmonizing colors (adjacent to each other on the color
wheel) can appear washed out if there is not enough difference in the values of each color.
Contrast with Type
 Type contrast can utilize size, value, and color to create contrasting type treatments.
 Add bold or italics to create contrast.
 Mix large type with small type.
 Combine serif with sans serif type to create type contrast.
 Set portions of text in contrasting colors or varying values.
 Changes in type alignment create contrast as does type spacing such as extreme kerning
for headlines.

Proximity and Unity

In design, proximity, or closeness, creates a bond between people and between elements on a
page. How close together or far apart elements are placed suggests a relationship (or lack of)
between otherwise disparate parts. Unity is also achieved by using a third element to connect
distant parts.

Proximity
The principle of proximity states: Elements that are related should be visually connected.
Likewise, elements that are not related should be visually separated. The guiding thought with
this principle is to group related items together. When items are together, they appear as a unit.
If items are scattered over the page, they will not have as much impact. Related items in close
proximity will generally add visual power and interest to your pages. They can also draw
attention to specific areas of a layout that you want to highlight. It also provides a focal point
and can give the reader an idea of where they should start and finish reading.

Proximity doesn’t mean that elements have to be placed together, it means they should be
visually connected in some way. This can be by use of point size, font, color etc.

To create proximity:
 Place related elements close together on a page so the reader can easily move his/her eyes
to the important items.
 Use white space and groupings to create a balanced layout.
Unity
Unity helps all the elements look like they belong together. Readers need visual cues to let them
know the piece is one unit – the text, headline, photographs, graphic images, and captions all go
together.

Unify elements by grouping elements that are close together so that they look like they belong
together. Repeat color, shape, and texture. Use a grid (the underlying structure of a page) to
establish a framework for margins, columns, spacing, and proportions.

To create unity:
 Use only one or two type styles and vary size or weight for contrast, subheads, captions,
headers, footers, etc. throughout the publication.
 Use the same color palette throughout.
 Repeat a color, shape, or texture in different areas throughout.
 Choose visuals that share a similar color, theme, or shape.
 Line up photographs and text with the same grid lines.

The graphic anchors the bottom of the page, but the four text elements all float on the page with
no apparent connection to each other – proximity/unity. The change in the headline (font
change, reversed out of the blue box) along with the subheading pulled in closer provides
balance with the graphic on the bottom. The spacing between the two paragraphs of text is
reduced slightly as well.

Repetition and Consistency

Repetition strengthens a design by tying together individual elements. It helps to create
association and consistency.

Readers gain comfort from having certain elements repeat themselves at consistent intervals or in
the same position. It is much easier to flip to the desired page of a magazine if the reader knows
that the page number will be in the same location on every page. Specific columns or special
sections of a newspaper are more readily recognized, even when they change location, if they
look the same from issue to issue.

Here are a few examples of how to use repetition:

 Use the same font for all your headlines.
 Use the same graphic rule at the top of all pages in a multipage document.
 Put repeating elements (like page numbers) in the same location on each page of a
multipage document.

The consistent repetition of an element is widely used in multi-page documents and websites.
Elements can be as simple as color, shapes, typefaces or even texture.

Within the second repetition illustration example above, the headline is repeated three times
using graphics that tie in the copy with the text blocks. The repetition of the colors in the shapes
and headline text that are in the copy help to reinforce the theme. Overlapping the graphic and
text elements unifies the elements of the design.