Download presentation
Presentation is loading. Please wait.
Published byJonah O’Connor’ Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.