6 principles of design

What does the 6 stand for in j6 design? Answer: the 6

fundamental principles of design which are: balance,
proximity, alignment, repetition, contrast and space.
Lets look at what each does.

The elements and principles of design are the building blocks.

The elements of design are the things that make up a design. The Principles of design are what we do to
those elements. How we apply the principles of design determines how successful the design is.

The elements of design

 LINE - The linear marks made with a pen or brush or the edge created when two shapes meet.
 SHAPE - A shape is a self contained defined area of geometric (squares and circles), or organic
(free formed shapes or natural shapes). A positive shape automatically creates a negative shape.
 DIRECTION - All lines have direction - Horizontal, Vertical or Oblique. Horizontal suggests
calmness, stability and tranquillity. Vertical gives a feeling of balance, formality and alertness.
Oblique suggests movement and action
 SIZE - Size is simply the relationship of the area occupied by one shape to that of another.
 TEXTURE - Texture is the surface quality of a shape - rough, smooth, soft hard glossy etc.
 COLOUR - Colour is light reflected off objects. Color has three main characteristics: hue or its
name (red, green, blue, etc.), value (how light or dark it is), and intensity (how bright or dull it is).

The principles of design

1. BALANCE - Balance in design is similar to balance in physics. A large shape close to the center
can be balanced by a small shape close to the edge. Balance provides stability and structure to a
design. It’s the weight distributed in the design by the placement of your elements.

2. PROXIMITY - Proximity creates relationship between elements. It provides a focal point.

Proximity doesn’t mean that elements have to be placed together, it means they should be
visually connected in someway.
 3. ALIGNMENT - Allows us to create order and organisation. Aligning elements allows them to
create a visual connection with each other.

4. REPETITION - Repetition strengthens a design by tying together individual elements. It helps to

create association and consistency. Repetition can create rhythm (a feeling of organized
movement).

5. CONTRAST - Contrast is the juxtaposition of opposing elements (opposite colours on the colour
wheel, or value light / dark, or direction - horizontal / vertical). Contrast allows us to emphasize or
highlight key elements in your design.

6. SPACE - Space in art refers to the distance or area between, around, above, below, or within
elements. Bothpositive and negative space are important factors to be considered in every
design.

DESIGN AND COLOUR

The elements and principles of design are the building blocks used to create a work of art. The elements of design can be
thought of as the things that make up a painting, drawing, design etc. Good or bad - all paintings will contain most of if not
all, the seven elements of design.

The Principles of design can be thought of as what we do to the elements of design. How we apply the Principles of design
determines how successful we are in creating a work of art.

note - the hyperlinks within the text of this page will open information in a new browser window. After you have read that
information the window can then be closed leaving this window open.

THE ELEMENTS OF DESIGN

LINE
Line can be considered in two ways. The linear marks made with a pen or brush or the edge created when two shapes
meet.

SHAPE
A shape is a self contained defined area of geometric or organic form. A positive shape in a painting automatically creates
a negative shape.

DIRECTION
All lines have direction - Horizontal, Vertical or Oblique. Horizontal suggests calmness, stability and tranquillity. Vertical
gives a feeling of balance, formality and alertness. Oblique suggests movement and action
see notes on direction

SIZE
Size is simply the relationship of the area occupied by one shape to that of another.
TEXTURE
Texture is the surface quality of a shape - rough, smooth, soft hard glossy etc. Texture can be physical (tactile) or visual.
see notes on texture

COLOUR
Also called Hue
see notes on colour

VALUE
Value is the lightness or darkness of a colour. Value is also called Tone
see notes on tonal contrast

THE PRINCIPLES OF DESIGN

BALANCE
Balance in design is similar to balance in physics

A large shape close to the center can be balanced

by a small shape close to the edge. A large light
toned shape will be balanced by a small dark toned
shape (the darker the shape the heavier it appears to be)

GRADATION
Gradation of size and direction produce linear perspective. Gradation of of colour from warm to cool and tone from dark to
light produce aerial perspective. Gradation can add interest and movement to a shape. A gradation from dark to light will
cause the eye to move along a shape.

REPETITION
Repetition with variation is interesting, without variation repetition can become monotonous.

The five squares above are all the same. They can be taken in and understood with a single glance.
When variation is introduced, the five squares, although similar, are much more interesting to look at. They can no longer
be absorbed properly with a single glance. The individual character of each square needs to be considered.

If you wish to create interest, any repeating element should include a degree of variation.

CONTRAST
Contrast is the juxtaposition of opposing elements eg. opposite colours on the colour wheel - red / green, blue / orange
etc. Contrast in tone or value - light / dark. Contrast in direction - horizontal / vertical.
The major contrast in a painting should be located at the center of interest. Too much contrast scattered throughout a
painting can destroy unity and make a work difficult to look at. Unless a feeling of chaos and confusion are what you are
seeking, it is a good idea to carefully consider where to place your areas of maximum contrast.

HARMONY
Harmony in painting is the visually satisfying effect of combining similar, related elements. eg.adjacent colours on the
colour wheel, similar shapes etc.

DOMINANCE
Dominance gives a painting interest, counteracting confusion and monotony. Dominance can be applied to one or more of
the elements to give emphasis

UNITY
Relating the design elements to the the idea being expressed in a painting reinforces the principal of unity.eg. a painting
with an active aggressive subject would work better with a dominant oblique direction, course, rough texture, angular lines
etc. whereas a quiet passive subject would benefit from horizontal lines, soft texture and less tonal contrast.

Unity in a painting also refers to the visual linking of various elements of the work.
The Big Four: Contrast,
Repetition, Alignment, Proximity
These four principles are not all there is to know about graphic design, but
understanding these simple related concepts and applying them to slide design
can make for far more satisfying and effective designs.
Contrast
Contrast simply means difference. And for whatever reason—perhaps our
brains think they are still back in the savannah scanning for wild predators—we
are all wired to notice differences. We are not conscious of it, but we are
scanning and looking for similarities and differences all the time. Contrast is
what we notice, and it’s what gives a design its energy. So you should make
elements that are not the same clearly different, not just slightly different.
Contrast is one of the most powerful design concepts of them all because
really any design element can be contrasted with another. You can achieve
contrast in many ways—for example, through the manipulation of space (near
and far, empty and filled), through color choices (dark and light, cool and
warm), by text selection (serif and sans serif, bold and narrow), by positioning
of elements (top and bottom, isolated and grouped), and so on.
Making use of contrast can help you create a design in
which one item is clearly dominant. This helps the viewer
“get” the point of your design quickly. Every good design
has a strong and clear focal point and having a clear
contrast among elements (with one being clearly dominant)
helps. If all items in a design are of equal or similar weight
with weak contrast and with nothing being clearly dominant,
it is difficult for the viewer to know where to begin. Designs
with strong contrast attract interest, and help the viewer make sense of the
visual. Weak contrast is not only boring, but it can be confusing.
Every single element of a design such as line, shape, color, texture, size,
space, type, and so on can be manipulated to create contrast. On the next
page are some slides that make good use of contrast compared with slides that
have weaker contra

Repetition
The principle of repetition simply means the reusing of the same or similar
elements throughout your design. Repetition of certain design elements in a
slide or among a deck of slides will bring a clear sense of unity, consistency,
and cohesiveness. Where contrast is about showing differences, repetition is
about subtly using elements to make sure the design is viewed as being part
of a larger whole. If you use a stock template from your software application,
then repetition is already built into your slides. For example, a consistent
background and consistent use of type adds unity across a deck of slides.
However, you must be careful not to have too much repetition among your
slides. Most of the built-in templates have been seen many times before and
may not suit your unique situation. Many of the standard templates also have
background elements that will soon become tiring, rather than generating
interest the tenth time a different slide is shown but with the same repetitive
element. For example, a starfish in the lower right (not my favorite but perhaps
appropriate for a presentation on marine biology) is an element that would
be a stronger repetitive element if its size and location occasionally shifted in
harmony with the content of different slides and in a way that was subtle and
did not interfere with the primary message.
The slides on the next page are a good
example of repetition. In these slides from
a presentation on the process of designing
a book, Swiss designer and photographer
Markuz Wernli Saito used his own full bleed
photos for all his slides. To help give the
entire presentation a unified look, he used a
similar red note and paperclip to “hold” his
text in each slide. The placement of the note
and paperclip image was not always in the
same location in every slide, nor was the size
always the same, but the consistent use of
this one element and the red color served to
ad a subtle repetitive element that gave his
visuals a professional and unified look.

Alignment
The whole point of the alignment principle is that nothing in your slide design
should look as if it were placed there randomly. Every element is connected
visually via an invisible line. Where repetition is more concerned with elements
across a deck of slides, alignment is about obtaining unity among elements
of a single slide. Even elements that are quite far apart on a slide should have
a visual connection, something that is easier to achieve with the use of grids.
When you place elements on a slide, try to align them with another element.
Many people fail to make an effort to apply the alignment principle, which
often results in elements being almost aligned but not quite. This may not
seem like a big deal, but these kinds of slides look less sophisticated and
overall less professional. The audience may not be conscious of it, but slides
that contain elements in alignment look cleaner. And assuming other principles
are applied harmoniously as well, your slides should be easier to understand
quickly.

Proximity
The principle of proximity is about moving things closer or farther apart to
achieve a more organized look. The principle says that related items should be
grouped together so that they will be viewed as a group, rather than as several
unrelated elements. Audiences will assume that items that are not near each
other in a design are not closely related. Audiences will naturally tend to group
similar items that are near to each other into a single unit.
People should never have to “work” at trying to figure out which caption goes
with which graphic or whether or not a line of text is a subtitle or a line of text
unrelated to the title. Do not make audiences think. That is, do not make them
“think” about the wrong stuff, like trying to decipher your slide’s organization
and design priority. A slide is not a page in a book or magazine, so you are not
going to have more than a few elements or groups of elements. Robin Williams,
in her best-selling book The Non-Designer’s Design Book (Peachpit Press) says
that we must be conscious of where our eye goes first when we step back and
look at our design. When you look at your slide, notice where your eye is drawn
first, second, and so on. What path does your eye take?
In Sum
• Design matters. But design is not about decoration or about ornamentation.
Design is about making communication as easy and clear for the viewer as
possible.
• Keep the principle of signal-versus-noise in mind to remove all nonessential
elements. Remove visual clutter. Avoid 3-D effects.
• People remember visuals better than bullet points. Always ask yourself how
you can use a strong visual—including quantitative displays—to enhance
your narrative.
• Empty space is not nothing; it is a powerful something. Learn to see and
manipulate empty space to give your slide designs greater organization,
clarity, and interest.
• Use the principle of contrast to create strong dynamic differences among
elements that are different. If it is different, make it very different.
• Use the principle of repetition to repeat selected elements throughout your
slides. This can help give your slides unity and organization.
• Use the principle of alignment to connect elements visually (through invisible
lines) on a slide. Grids are very useful for achieving good alignment. This will
give your slide a clean, well-organized look.
• Use the principle of proximity to ensure that related items are grouped
together. People will tend to interpret items together or near to each other as
belonging to the same group.
Basic Visual Design Principles
From Robin Williams’ The Non-Designer’s Design Book [ aka…the c.r.a.p. principles ]
Proxiimiity
· Group like items together
· Move related items into close physical proximity in order to form a cohesive group
· Items that are not related to each other should not be in close proximity
Alignment
· Every item on the page should have a visual connection with something else on the page.
· Nothing should be placed arbitrarily
· When items are aligned on the page it creates a stronger cohesive unit
· The principle of alignment is what tells readers that even though items are not close to one another,
they belong to the same piece.
· Gives a sense of order and intent
Repetition
· Repeat some aspect of the design throughout the entire piece
· Gives a sense of consistency to the page
· Repetition unifies all parts of a design
· Gives the mind a pattern to follow
· A unifying element that gives the mind a way to make meaning of the overall piece
Contrast
· If two items are not exactly the same, then make them distinctly different
· This is one of the most effective ways to add visual interest to the page
· Examples of contrasting elements:
Large type with small type (18pt with 10pt)
Graceful oldstyle font with a bold sans serif font
Horizontal element [like a long line of text] with a vertical element [a tall, narrow column]
Widely spaced lines with closely p

The Principles of Design

Starting with the Basics

This column is about Web design—really, it is—though it may at times seem a bit distant and distracted.
In my opinion, any good discussion about design begins with the fundamentals. Almost by definition, the
primary tenets around which any field is based are universal: they can be applied to a variety of
disciplines in a variety of ways. This can cause some confusion as principle is put into practice within the
unique constraints of a particular medium.

We can group all of the basic tenets of design into two categories:
principles and elements. For this article, the principles of design are the
overarching truths of the profession. They represent the basic
assumptions of the world that guide the design practice, and affect the
arrangement of objects within a composition.
Web design is a relatively new profession compared to other forms of design, due to the youth of our
medium. As with any design discipline, there are aspects of the Web design process that are unique to
the medium, such as screen resolution, additive color spaces and image compression. But too often these
more unique details override our sense of the bigger picture. We focus on the fact that it is Web design
and push aside core design concepts—concepts that can that make any project stronger without
interfering in the more technical considerations later on.

How Does Web Design Fit In?

I tend to define Web design as being one of many disciplines within the larger field of design (a peer to
print design, industrial design, interior design, etc.). To step back even further, I see design as a
discipline within the field of art (a peer to painting, illustration, sculpture, etc.) The point is that in order
to start with a discussion about the fundamentals of design as they relate to Web design we need to
understand that there is a good degree of inheritance that design has received over the years from other
art forms. These art forms, such as lithography, typography, painting/illustration and industrial design,
evolved over many centuries, and a number of basic ideas have emerged as providing universal guidance
to any artistic endeavor. When talking about fundamental concepts we inevitably look outside our
discipline and adopt a slightly larger perspective.

The first three articles of this column will be dedicated to unearthing these universal gems of insight so
that we may better understand our profession. In the first two articles, we will adopt a larger perspective
to establish a foundation. In the third article we will tie it all together, using real-world examples to see
how the basics are put into practice through the medium of the Web.

The Principles of Design

There are many basic concepts that underly the field of design. They are often categorized differently
depending on philosophy or teaching methodology. The first thing we need to do is organize them, so
that we have a framework for this discussion.

We can group all of the basic tenets of design into two categories: principles and elements. For this
article, the principles of design are the overarching truths of the profession. They represent the basic
assumptions of the world that guide the design practice, and affect the arrangement of objects within a
composition. By comparison, the elements of design are the components of design themselves, the
objects to be arranged.

Let’s begin by focusing on the principles of design, the axioms of our profession. Specifically, we will be
looking at the following principles:

 Balance
 Rhythm
 Proportion
 Dominance
 Unity

Balance
Balance is an equilibrium that results from looking at images and judging them against our ideas of
physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a
given design as it relates to their visual weight within a composition. Balance usually comes in two forms:
symmetrical and asymmetrical.

Symmetrical
Symmetrical balance occurs when the weight of a composition is evenly distributed around a central
vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the
axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In
addition, it is possible to build a composition equally around a central point resulting in radial symmetry 1.
Symmetrical balance is also known as formal balance.

Asymmetrical
Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central
axis. It involves the arranging of objects of differing size in a composition such that they balance one
another with their respective visual weights. Often there is one dominant form that is offset by many
smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension.
Asymmetrical balance is also known as informal balance.

Horizontal
symmetry

Rhythm
Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm
can create a sense of movement, and can establish pattern and texture. There are many different kinds
of rhythm, often defined by the feeling it evokes when looking at it.

 Regular: A regular rhythm occurs when the intervals between the elements, and often the
elements themselves, are similar in size or length.

 Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.

 Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.

Proportion
Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between
one element and another, or between a whole object and one of its parts. Differing proportions within a
composition can relate to different kinds of balance or symmetry, and can help establish visual weight
and depth. In the below examples, notice how the smaller elements seem to recede into the background
while the larger elements come to the front.

Dominance
Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a
composition, establishes space and perspective, and often resolves where the eye goes first when looking
at a design. There are three stages of dominance, each relating to the weight of a particular object within
a composition.

 Dominant: The object given the most visual weight, the element of primary emphasis that
advances to the foreground in the composition.

 Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the
composition.

 Subordinate: The object given the least visual weight, the element of tertiary emphasis that
recedes to the background of the composition.

In the below example, the trees act as the dominant element, the house and hills as the secondary
element, and the mountains as the tertiary element.
Unity
The concept of unity describes the relationship between the individual parts and the whole of a
composition. It investigates the aspects of a given design that are necessary to tie the composition
together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in
design is a concept that stems from some of the Gestalt theories of visual perception and psychology,
specifically those dealing with how the human brain organizes visual information into categories, or
groups2.

Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and
generalization, but some of the basic ideas that come out of this kind of thinking are more universal.

Closure
Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing
some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of these
parts are missing the brain tends to add information about an object to achieve closure. In the below
examples, we compulsively fill in the missing information to create shape.

Continuance
Continuance is the idea that once you begin looking in one direction, you will continue to do so until
something more significant catches your attention. Perspective, or the use of dominant directional lines,
tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any
subjects in the design itself can cause a similar effect. In the below example, the eye immediately goes
down the direction of the road ending up in the upper right corner of the frame of reference. There is no
other dominant object to catch and redirect the attention.

Similarity, Proximity and Alignment

Items of similar size, shape and color tend to be grouped together by the brain, and a semantic
relationship between the items is formed. In addition, items in close proximity to or aligned with one
another tend to be grouped in a similar way. In the below example, notice how much easier it is to group
and define the shape of the objects in the upper left than the lower right.

Related concepts
There are many additional concepts that are related to the principles of design. These can include specific
terms and/or techniques that are in some way based on one or more of the above tenets. In they end,
they add to the collection of compositional tools available for use by the designer.
Contrast or Opposition
Contrast addresses the notion of dynamic tensionÔthe degree of conflict that exists within a given design
between the visual elements in the composition.

Positive and Negative Space

Positive and negative space refers to the juxtaposition of figure and ground in a composition. The objects
in the environment represent the positive space, and the environment itself is the negative space.

Rule of Thirds
The rule of thirds is a compositional tool that makes use of the notion that the most interesting
compositions are those in which the primary element is off center. Basically, take any frame of reference
and divide it into thirds placing the elements of the composition on the lines in between.

Visual Center
The visual center of any page is just slightly above and to the right of the actual (mathematical) center.
This tends to be the natural placement of visual focus, and is also sometimes referred to as museum
height.

Color and Typography

Many would place color and typography along side the five principals I have outlined above. I personally
believe both to be elements of design, so I’ll give them some attention in my next column. In addition,
both topics are so robust that I plan on writing an entire article about each of them in the future.

Conclusion
In Web design it is too easy to get engrossed in the many unique constraints of the medium and
completely forget some of the underlying concepts that can strengthen any design. To better discuss
such concepts, we need to step back from our specific discipline and look to the history of the field. It is
here we find the axioms of our profession.

In this article we looked at half of those axioms, the principles of design. The principles of design are the
guiding truths of our profession, the basic concepts of balance, rhythm, proportion, dominance and unity.
Successful use of these core ideas insures a solid foundation upon which any design can thrive.

In the next column, I will discuss the elements of design—the basic components used as part of any
composition including point, line, form (shape), texture, color and typography. Comments or suggestions
are welcome and appreciated.