THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
SIX ELEMENTS OF VISUAL DESIGN
Although visual design on the web can be incredibly complex,
all web designs boil down to 6 basic elements:
1. LINES
2. SHAPES
3. COLOUR PALETTE
4. TEXTURE
5. TYPOGRAPHY
6. FORM
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
LINES
Help define shapes
Divide sections
Create separation
Typically have length,
width & direction
Line
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
SHAPES
Self contained areas
Composed of lines,
values, colour and
texture
All objects are
composed of shapes
Shape
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
Three main colours
used in this scheme
COLOUR
PALETTE
Dierentiate shapes &
items
Add depth & emphasis
Organize information
Evoke emotion & feeling
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
Muted texture to create
focus on main content
TEXTURE
Gives illusion of how a
surface feels
Doesnt have to be a real
texture, like dirt, or
paper
Used to either attract or
divert attention
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
Heading
TYPOGRAPHY
Fonts
Sub heading
Size
Colour
Body
Spacing
Alignment
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
FORM
3D text
3D graphic
Illusion of 3D objects
Add depth & texture to
create 3D object
Used to accentuate a
message, or provide
visual appeal
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
SEVEN PRINCIPLES OF VISUAL DESIGN
While there are no ocial "industry standard" rules for visual
design as the beauty of a design purely depends on the
audience there are a set of widely accepted guidelines, or
"principles", when it comes to visual communication. The
basic principles boil down to the following:
1. BALANCE
2. RHYTHM
3. PROPORTION
4. SPACE
5. DOMINANCE
6. HIERARCHY
7. UNITY
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
Balance
BALANCE
Arrangement &
distribution of objects
to create meaning
Symmetric
Asymmetric
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
Rhythm
RHYTHM
Repetition of elements
Creates movement
Can establish pattern
and texture
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
Proportion
PROPORTION
Also known as scale
Demonstrates how each
item relates in size
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
Space
SPACE
Also known as white
space
Used to reduce noise,
clutter, and increase
readability
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
DOMINANCE
Dominance
The focal point
Achieved through size,
colour, shape, etc.
Used to communicate
the primary message
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
Primary focus
HIERARCHY
Secondary focus
Dierentiates primary
and secondary focus
Achieved through size,
colour, & placement
Tertiary focus
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY
Space
Dominance
UNITY
Secondary info,
all related
The big picture of a
design
How all elements are
related, or unrelated
The grouping of similar
elements
GOT IT? LETS MOVE ON.
THE BASIC ELEMENTS & PRINCIPLES OF VISUAL DESIGN
THE ULTIMATE WEB DESIGNER BRAD HUSSEY