An Introduction to Web Graphics
Lesson 1 – Design Principles and
Logos

WHAT IS A LOGO?
WHERE MIGHT YOU SEE LOGOS?
WHY ARE LOGOS IMPORTANT?

TIME FOR A QUIZ

HOW DID YOU DO?
WHAT CHARACTERISTICS DO THESE
LOGO DESIGNS SHARE?

Objectives and Outcomes
Objectives
• Understand basic design principles of
white space, contrast, proximity,
alignment, repetition and
complimentary colours
• Learn how to create a logo using
graphics software
Outcomes
• All: Will be able to say what these
words mean
• Most: Will use some of these ideas in
their work
• Some: Will use most of these ideas
and explain how they’ve been used
• All: Will have created a simple logo
• Most: Will have created a simple logo
with a coherent design
• Some: Will think about audience and
produce an appropriate design

PROXIMITY

Proximity
• The distance between things in a design has
an impact on how they relate to one another
• Elements close together appear to have a
stronger relationship than those further apart

CONTRAST

Contrast
• Contrast works in several different ways
• Most obvious example of contrast is the
colour of text against a background
– Easier to read text that contrasts highly with the
background
• Can also include all sorts of differences
between elements
– Make something different so that it stands out
– Helps indicate what’s important

Contrast
• This is an example of poor contrast. The
colour of this text is not different enough
from the background colour. Higher contrast
is far easier to read.
 This text is much easier to read than the text
above. Tests indicate that white wording on a
black background is harder to read than the
black text on a white background.

COMPLIMENTARY COLOURS

This is a complex
area but, put
simply, ‘opposite’
colours work often
well together!
Is the opposite true?

REPETITION

Repetition
• Saying the same thing or using the same
design component several times to get a
point across
• Use of a consistent theme
• Common in nature – the brain accepts it
quickly!

ALIGNMENT

Text Alignment
• Can enhance or detract from appearance of page.
• Can significantly affect readability
Aligned left is most common.
This provides a consistent
starting point for each new
line. The eye of the reader
becomes used to easily finding
the beginning of a new line
Centre alignment makes finding the
beginning of a new line of text
much more difficult.
Each line tends to be a different
length. As a result it is much more
tiring to read text with centre
alignment.
The eye is constantly guessing and
searching for the start point.
In addition, centre alignment causes
odd line lengths.
These odd lengths cause a sort of
"choppiness" in how the text reads.
It lacks the smooth flow that tends
to occur with left alignment.
Right alignment seldom serves a
useful purpose if readability is a
concern. While it may be used in
an artistic way, the use of right
alignment for significant amounts
of text should be avoided.
The odd starting points of the text
cause the eye to search and the
appearance in bulk of such text
can be off-putting to some
viewers. Always remember that
people tend not to read anything
that is too difficult or annoying!

WHITE SPACE

White Space
White space isn't always white – it’s a graphics design term and refers to the space
between objects in a design. So the area between text and a photograph is "white space"
even it’s another colour.

Create Your Own Logo
• You’re going to create a logo for an
imaginary company called Pad Blazer
who make games for mobile phones
• Use Fireworks
• Try to incorporate some or all of the
principles we discussed:-
– White space
– Proximity
– Repetition
– Alignment
– Contrast
– Complimentary colours
• Keep it simple
• Think about audience
600 x 600
Text
Shapes

Objectives and Outcomes
Objectives
• Understand basic design principles of
white space, contrast, proximity,
alignment, repetition and
complimentary colours
• Learn how to create a logo using
graphics software
Outcomes
• All: Will be able to say what these
words mean
• Most: Will use some of these ideas in
their work
• Some: Will use most of these ideas
and explain how they’ve been used
• All: Will have created a simple logo
• Most: Will have created a simple logo
with a coherent design
• Some: Will think about audience and
produce an appropriate design

Homework
• Find a picture or graphic that demonstrates
one or more of the design principles we
discussed today
• white space, contrast, proximity, alignment,
repetition and complimentary colours
Bring it to the next lesson