design principles web design. design principles contrast repetition alignment proximity

Design Principles

Web Design

Design Principles

Contrast Repetition Alignment Proximity

Contrast

Contrast

Contrast draws our eyes Our eyes like contrast Elements must be different

Purpose

Create an interest on the page Catch the attention of the reader

Aid in the Organization of information Instant understanding of the organization Logical flow Never confuse

How to get it

Typefaces

Line thickness

Colors

Shapes

Sizes

Space

What to avoid

Being a wimp (do it with strength) Light text on a Light background Dark text on a Dark background Two or more similar typefaces

*If Items are not exactly the same

Make them different!

Repetition

Repetition

Repetition of visual elements unifies & strengthens a piece

Very useful on one page pieces Critical on multi-page pieces

Purpose

To unify Add visual interest

*If it looks more interesting people will be more willing to read.

How to get it

Headings Maintain size & color throughout

Add additional repetitive elements Lines Logos Numbers Bullets

What to avoid

Repeating to annoyance Overwhelming the piece with extras

Alignment

Alignment

No arbitrary placement Every element has a visual connection

with other elements on the piece Unity

Tie between separate elements

Purpose

Unify and Organize Create a sophisticated, formal, serious,

or fun look

How to get

Be conscious of where you place elements

Always align with something else on the page Even if far apart

Unity

Organize

What to avoid

More than one text alignment Don’t center some text and right align others

Using large amounts of center alignment

Proximity

Proximity

Items related together should be grouped together

Several items close become one visual element

Purpose

Organize More likely to be read More appealing white space

How to get

Squint your eyes slightly Count the number of visual elements by

counting the number of times your eyes stop More than 3 to 5 on a page Try regrouping

What to avoid

Too many separate elements Sticking things in the corners & middle Creating confusion in headings,

subheading, captions, graphs, etc. Creating relationships with elements that

don’t belong together