1. Design Principles and Why We Need Them…
Web Design
Design Principles and Why We Need Them…

2. Four Basic Principles
Contrast
Repetition
Alignment
Proximity

3. Contrast Created when two elements are different.
Adds visual interest to your page and helps organize your page.
For contrast to be effective, it must be strong (very different).
Text size, font, rsalignment, headings, space, colou

4. Contrast: Assignment
Find an example of a web page that uses contrast and explain what elements are contrasting and how they add interest to the page.

5. Repetition
Repeating some aspect of the design throughout the entire piece.
“Consistency” – it is a conscious effort to unify all parts of a design.
Can be any element that a viewer will visually recognize
All headlines same size and weight, a ruler in the same place on each page, same bullets, background colour

6. Repetition: Assignment
Find 2 examples of products that use repetition and label where the repetition is.

7. Alignment
Nothing should be placed on the page arbitrarily (without thinking about where it goes)
Every item should have a visual connection with something else on the page.
Creates a stronger cohesive unit; a visual tie between separate elements.
Avoid using more than one text alignment on the page.
Avoid centered alignment unless you are creating a more formal product.

8. Alignment: Assignment
Decide which items to group in closer proximity and where to align them on this business card.

9. Proximity Group related items together (organize).
Items that are not related should not be in close proximity.
Gives the viewer an instant visual clue as to the organization and content of the page.
Avoid too many separate elements on a page.

10. Proximity: Assignment
Find an example of a webpage that makes good use of proximity.
Find an example of a webpage that does not use proximity and needs to be more organized. Suggest 3 ways to use proximity to organize the information.

11. Tips on Designing Web Pages
Two of the most important factors are repetition and clarity.
Repeat certain visual elements on every page.
Use shorter line lengths than on paper.
Verdana is a good choice of font for text (easily read on the web)
Visitors shouldn’t have to figure out how to use your navigation system, where they are in the site, or if they have left your site.