1. GESTALT | PRECEDENCE | TYPOGRAPHY CONSISTENCY | COLOR Web I - Design

2. DESIGN is the conscious effort to impose a meaningful order - Victor Papanek

3. Keep it simple. Keep it clean. When in doubt go bold and live outside the box. White space is my best friend. The most important thing to understand is the story behind the design I am asked to do. Be it a logo or a website – getting the story right is gold. My Personal Guidelines

4. Gestalt Theory Here twelve dots have been arranged to form a directional symbol. We can “see” each dot separately but the arrow exists as a sum of the dots and becomes the collective gestalt. What do you see?

5. Gestalt Theory

6. Precedence Guiding the eye Logo (top left) Tools Position Color Contrast Size Design elements www.themecrunch.com www.graphicdesignblender.com

7. Consistency

8. Typography www.w3schools.com sixrevisions.com www.font-face.com www.fontsquirrel.com www.google.com/fonts

9. Color: theory PRIMARY PRIMARY – colors that cannot be created by mixing others (ie. red, yellow, blue) SECONDARY SECONDARY – colors achieved by a mixture of two primaries TERTIARY TERTIARY – colors achieved by a mixture of primary and secondary hues.

10. C C - Cyan (blue) M M - Magenta (red) Y Y - Yellow K K - Black C C - Cyan (blue) M M - Magenta (red) Y Y - Yellow K K - Black R R - Red G G - Green B B – Blue R R - Red G G - Green B B – Blue ADDITIVE (TV, WEB) SUBTRACTIVE (PRINT) Color: theory

13. Color: syntax

14. COLOR KEYWORDS W3C Color How do you define color?

15. Color: syntax HEXADECIMAL NOTATION How do you define color? Adobe Kuler

16. Color: syntax RGB COLOR VALUES How do you define color? HSL MODEL

17. Color: syntax div{opactiy:0.5)} CSS3 gives us more flexibility div{ background: rgba(247,235,185,.5)}; color: #000; border: hsla(0,100%,0%,.5) }

18. My Process Web Design Process