Post on 01-Jan-2016
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