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! 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. *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