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

Whose logo is this?

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 SpaceWhite 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

TextShapes

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