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

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

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

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?

Gestalt Theory

Precedence Guiding the eye Logo (top left) Tools Position Color Contrast Size Design elements

Consistency

Typography sixrevisions.com

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.

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

Color: syntax

COLOR KEYWORDS W3C Color How do you define color?

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

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

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) }

My Process Web Design Process