principles & building blocks

DESIGN PRINCIPLES
-Contrast -Variety
-Repetition -Balance
-Alignment-Emphasis
-Proximity -Proportion
-Unity -Rhythm
BUILDING BLOCKS
-Line -Value
-Form -Texture
-Color
 CONTRAST
(design principles)

In Form In Size In Value

In Texture In Color

Creating contrast is about visual interest. You can utilize this

concept in many ways, but the key is an obvious visual difference.
 REPETITION
(design principles)

Repeating the same form to create a larger visual structure. This

is the quickest/easiest way to create Unity.
 ALIGNMENT
(design principles)

Visual elements can be intentionally aligned to help create a

solid visual structure.
 PROXIMITY
(design principles)

The distance between items suggests their relationship to one another.

Items are grouped and separated to help create visual structure.
 UNITY
(design principles)

(no variety) (variety)

When all elements are in agreement, a design is considered unified.

No individual part is viewed as more important than the whole design. The key
is to add variety to maintain visual interest.
 VARIETY
(design principles)

Variety is about adding contrast throughout a design.

Utilizing differences in scale, texture, form, color & value.
 BALANCE
(design principles)

Symmetrical Asymmetrical

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.
 EMPHASIS
(design principles)

Emphasis determines the visual weight of a composition,

establishes space and perspective, and often resolves where the eye
goes first when looking at a design.
PROPORTION
(design principles)

The size of the green box is defined by its relation

to the trees around it. We tell the viewer the proportion
of something by what we surround it with.
 RHYTHM
(design principles)

We commonly speak of rhythm to refer to the pulsing, repetitive beats of music. In a similar way
rhythm can be applied to the visual arts. Rhythm as a design principles is based on
repetition and flow. Here the lines move the viewers eye in a flowing &
repetitive manner.
 LINE
(building blocks)

A line is a point set in motion. Lines suggest movement and our eyes follow
along the path. Lines can be straight, curved, dashed & vary in weight.
Line is the building block of shape.
 FORM
(building blocks)

Lines create form. Form (shape) is how we recognize objects,

either from the physical world or forms representing ideas & concepts.
 VALUE
(building blocks)

Value is simply the artistic term for light and dark. In digital terms we
could also use the term luminance or brightness. How light
or dark something is, represents its value.
 TEXTURE
(building blocks)

Texture refers to the surface quality of objects. Texture appeals to our sense of touch.
Texture is illustrated in art when an artist purposely exploits contrast in surface
to provide visual interest.
 COLOR
(building blocks)

primary

secondary secondary

primary primary

secondary

Color is a product of light. In art we mimic the real world processes

by choosing colors to represent and add visual interest. The primary
colors are red, blue & yellow. The secondary colors are
orange, purple & green.
Analysis of design principles in real world examples

Michael-Jon.es
(Image credit: Lucas Brooking (LucasBrooking.co.nz))

Forms: Circles,
Lines,Gears,
Stroked lines

Size: Simple contrast

by placing different
sizes next to each other

Color: Orange, Yellow,

Blue, Purple, Pink, Grey

Texture: Using a texture

on the table to draw contrast
from the flat objects

Value: Using darker

values against a BG w/
lighter value

Contrast
Great use of variation (contrast) in forms, size, color, value & texture. This diverse use of
contrast creates Variety.
(Image credit: Giant Ant (GiantAnt.ca))

Texture: Simple patterns

used to create variety across
the composition. Circle, dot
line, & X patterns used as
varied textures.

Variety
Using a number of different forms, colors and textures, this composition creates strong
visual interest. The combination of simple elements achieves a complex variety that is
unique and visually interesting.
(Image credit: Lucas Brooking (LucasBrooking.co.nz))

Balance
Although the frame is not symmetrical, it still maintains a strong sense of visual balance. Elements counter
each other to establish a visual balance.
(Image credit: Nejc Polovsak(twistedpoly.com))

Rhythm: Elements
create a sense of movement
or flow in the composition.

Flowing Rhythm
Here a flowing rhythm is established by the direction and flow of the varied forms. A sense
of movement is established even in this still image.
(Image credit: Stephen Keller (StephenKeller.com))

Forms - We see circles

repeated throughout.

Repetition
Here we see use of repetition to build out the composition and add visual interest.
Certain visual elements are repeated throughout the frame.
(Image credit: Stephen Keller (StephenKeller.com))

Contrast - Stroked lines

have a contrast in size
and length.

Contrast
Although this composition is relatively simple, only employing a few visual forms. Visual interest
is created by using contrast is size. The width & length of the stroked lines is varied.
(Image credit: VeracityColab (VeracityColab.com))

Emphasis - The visual

emphasis is clear. The viewer
is being told exactly where
to look.

Emphasis
Here the visual dominance of the composition is clear. The red dot, has a strong
emphasis due to the monochromatic elements around it. Contrast in color creates
a clear emphasis.
 Rhythm: Using elements in a pattern creates a sense of rhythm in the compositions.

(Image credit: Royale (WeAreRoyale.com))

Regular Rhythm
Here a regular rhythm is established by the repeated elements, being spaced evenly to create a pattern.
(Image credit: Lucas Brooking (LucasBrooking.co.nz))

Balance: Although not

symmetrical, objects
balance each other out
to achieve a firm balance
in the composition.

Balance (Asymmetrical)
Although the frame is not symmetrical, it still maintains a strong sense of visual balance.
(Image credit: Giant Ant (GiantAnt.ca))

Proportion: Here
the relationship between
the elements establishes
a sense of proportion
but also depth.

Proportion
In this example we perceive a sense of depth in the composition, which is created the specific
proportions of the elements. The human figures stand in the foreground while the plane exists
at a distance.
(Image credit: Giant Ant (GiantAnt.ca))

Proportion: Here
the relationship between
the elements establishes
a sense of proportion
but also depth.

Proportion
The relationship between the size of the elements within this composition tells about the depth
of the scene.
 Rhythm: Using the same element, but displaying it through a progression creates a sense of rhythm and movement.

(Image credit: Already Been Chewed (alreadybeenchewed.tv))

Progressive Rhythm
Here a progressive rhythm is established by viewing a sequence of the same forms moving through
a progression. A simple technique that can create striking visual interest.
 Texture: Patterns carried throughout each Color: The established color scheme is
composition build a Unity (continuity) across carried throughout both compositions.
time within the same video.

(Image credit: Giant Ant (GiantAnt.ca)) (Image credit: Giant Ant (GiantAnt.ca))

Unity
Unity is achieved a cross different compositions within the same video through the repetitive use of forms, colors
& textures. Each frame, although a starkly different style (2d vs 3d), maintains a sense of unity.
(Image credit: Giant Ant (GiantAnt.ca))

Proportion: We see
that the spheres are in
a vast world of large
pie charts & bar graphs.
The relationship between
the protagonist and the
surrounding elements
sets the proportions
for the composition.

Proportion
In this example, our center of action (protagonist) are the white & red spheres. We get a sense
or their size based on their relationship to surrounding elements.
 (Image credit: Lucas Brooking (LucasBrooking.co.nz))

Emphasis: Clear
point for the viewer.

Emphasis
Through the simple placement of the key visual element (illustrated stump) a clear emphasis is
present in the composition.
 Texture: The shaders on these objects Color: The established color scheme is Form: The organic & flowing forms are
maintain a consistent style across forms. carried throughout both compositions. repeated to create a larger visual unit.

(Image credit: Nejc Polovsak(twistedpoly.com)) (Image credit: Nejc Polovsak(twistedpoly.com))

Unity
All the elements exist in agreement and create a strong sense of visual unity. The repetitive use of color, texture
& form (organic in this case) creates a visual unity & variety.
(Image credit: Lucas Brooking (LucasBrooking.co.nz))

Form, Color & Texture

Repeated

Repetition
Here we see use of repetition to build out the composition and add visual interest. The repetitive use of
objects also builds unity within the frame.
(Image credit: Lucas Brooking (LucasBrooking.co.nz))

Balance: Although not

symmetrical, objects
balance each other out
to achieve a firm balance
in the composition.

Balance (Asymmetrical)
Although the frame is not symmetrical, it still maintains a strong sense of visual balance.
 RHYTHM
(design principles)

There are many different kinds of rhythm, often defined by the feeling that it evokes when looking at it.

Regular - A regular rhythm occurs when the intervals between

elements, and often the elements themselves, are similar in
size and 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.
(Image credit: Lucas Brooking (LucasBrooking.co.nz))

Alignment: Elements are

not placed randomly. A strong
visual structure is achieved
through the alignment
of elements.

Notice the alignment of

the wrenches, bike seat
& bike wheel.

Both horizontal and

vertical alignment are
utilized.

Alignment
A solid visual structure is achieved in this composition through an intentional use of
alignment.
(Image credit: Royale (WeAreRoyale.com))

Emphasis - The visual

emphasis is clear. Using
a strong contrast they lead
the viewer to the beginning
of the type layout.

Emphasis
They are using a strong contrast in color & value to create a clear visual emphasis for the viewer.
(Image credit: Royale (WeAreRoyale.com))

Alignment - A basic
alignment is the easiest
way to create a clear
visual structure using
a large number of elements.

Alignment
The use of vertical and horizontal alignment creates a clear visual structure in the composition.
(Image credit: Stephen Keller (StephenKeller.com))

Forms - Forms with rounded

edges, forms with right angles,
forms moving perfectly
vertical and forms titled
at an angle.

Color - Light blue, dark

blue, purple, yellow, pink
& red.

Variety
The variety of forms and colors create a strong visual interest for the viewer.
(Image credit: Plenty (Plenty.tv))

Proximity - If all the text

was stacked together it would
make it harder to quickly
separate and absorb the
different information.

Proximity
The grouping (proximity) of elements suggests a clear relationship and hierarchy. The
show title and show times are separated and grouped to create a clear relationship
and make it easier for the viewer to read.
(Image credit: Plenty (Plenty.tv))
Proximity - Clear separation
of elements. The relationship
is instantly obvious because
of their proximity.

Proximity
The grouping (proximity) of elements suggests a clear relationship and hierarchy. Date & time
are grouped as is the show title.
 Rhythm: A progression creates a sense of rhythm and movement.

(Image credit: Plenty (plenty.tv))

Progressive Rhythm
Here a progressive rhythm is used in the final logo build of this broadcast ident. We see a progression
of the forms that make up the final logo. This simple technique creates a sense of movement and rhythm.
(Image credit: Lucas Brooking (LucasBrooking.co.nz))

Forms: Circles, rectangles,

straight lines & wavy lines.
Color: Yellow, red, green,
grey & green.
Texture: Dotted & flat

Variety
The varied forms, colors, textures & values create a dynamic visual composition.
 (Image credit: Lucas Brooking (LucasBrooking.co.nz))

Contrast: Hard to go
wrong with a strong use
of value contrast.

Contrast
A very simple use of contrast in value (white & grey on black) creates visual interest.
(Image credit: Stephen Keller (StephenKeller.com))

Repetition - Lines are

repeated. As are colors.

Repetition
Forms & colors repeated in a simple composition, yet a dynamic visual interest exists.