Principles of Beautiful Web Design

Principles of Beautiful Web Design
Photo Credit:
davefishernc (flickr)
Design can be learned. (srsly!)
Good Design IS Problem Solving:
Designer mentality vs. coder methodology.
Visual
Emotional
Random
Intuitive
Subjective
Verbal
Logical
Sequential
Analytical
Objective
Nielson and Zeldman

“Design depends
largely on constraints.”
- Charles Eames
Layout
Color
Texture
Type
Imagery
You gotta
learn the
rules befo
you try to

break them
Layout: Balance
Finding it and shifting it.
 Symmetrical & Asymmetrical
Bad Balance
Good Balance
Layout: Unity
Via Proximity and Repetition
Bad Unity
Good Unity
Layout: Emphasis
Many ways to achieve it,
whether you want to or not:
 Placement
 Continuance


Isolation


Contrast


Proportion
Bad Emphasis
Good Emphasis
Layout: Grids (are good!)

Color: The Wheel



Orange, Green, Violet

Red-Orange, Yellow-Orange,
Yellow-Green, Blue-Green,
Blue-Violet, Red-Violet
Color: Schemes
' 
& *$
' 
&  ($)"
'


&

"
!% 
  #
Color: Resources
1.
Firefox eyedropper plugin.
2.


Flash-based color scheme tool.
3.


Color scheme community site.
Texture
The web shouldn’t always feel like the web.