Four Design Principles

24
Four Design Principles PowerPoint presentation developed by mw zoetewey Based on content from Robin Williams and John Tollett’s The Non-Designer’s Web Book (Peachpit Press, 1998)

description

Four Design Principles. PowerPoint presentation developed by mw zoetewey Based on content from Robin Williams and John Tollett’s The Non-Designer’s Web Book (Peachpit Press, 1998). What are the four basic design principles?. 4 basic design principles:. Alignment Proximity. Repetition - PowerPoint PPT Presentation

Transcript of Four Design Principles

Page 1: Four Design Principles

Four Design Principles

PowerPoint presentation developed by mw zoetewey

Based on content from Robin Williams and John Tollett’s

The Non-Designer’s Web Book (Peachpit Press, 1998)

Page 2: Four Design Principles

What are the four basic design principles?

Page 3: Four Design Principles

4 basic design principles:

Alignment Proximity

Repetition Contrast

Page 4: Four Design Principles

Why bother? Give you control over your

document Helps reader understand

the purpose of your document

Page 5: Four Design Principles

What is alignment?

Page 6: Four Design Principles

This isn’t alignment.

This isn’t alignment.

This isn’t alignment.

Page 7: Four Design Principles

This is alignment.

This is alignment.

This is alignment.

This is alignment.

This is alignment.

Page 8: Four Design Principles

Alignment Items on the page are lined up

with each other, both horizontally and vertically

Avoid aligning elements arbitrarily – it will confuse people

There are three basic alignments: centered, left justified and right justified

Page 9: Four Design Principles

Don’t mix alignments

Please.

For the love of god.

It looks lousy.

And it’s confusing.

Page 10: Four Design Principles

What is proximity?

Page 11: Four Design Principles

This isn’t proximity.

This isn’t proximity either.

or alignment

Page 12: Four Design Principles

Proximity Refers to the relationships that

items develop when they are close together

When used well, organizes your information

Implies items are related (for example, the bullets on this list appear related because they are in close proximity to each other

Page 13: Four Design Principles

What is repetition?

Page 14: Four Design Principles

This is not

repetition.

Page 15: Four Design Principles

Repetition Refers to the idea that designers

should repeat certain elements to tie the disparate parts of a document together

Makes it seem like the individual nodes (or slides) are all part of the same text

Page 16: Four Design Principles

What design elements has this slide show repeated?

Page 17: Four Design Principles

It has repeated: Fonts Colors Placement And more…

Page 18: Four Design Principles

What is contrast?

Page 19: Four Design Principles

This isn’t contrast.

Nope. Not contrast either.

Page 20: Four Design Principles

Contrast Establishes a hierarchy of

information

Can be obtained by manipulating font (style and size), color, background designs, etc.

Establishes a focal point

Page 21: Four Design Principles

Where is the focal point on this page?

Is it this bullet?

How about this one?

Is it over here?

How about here?

Page 22: Four Design Principles

Which to use? All the principles are

interconnected You will use all four at a

time

Page 23: Four Design Principles

You may have good contrast

But poor alignment,

lack of proximity and repetition

Page 24: Four Design Principles

4 basic design principles:

Alignment Proximity

Repetition Contrast