Principles of Beautiful Web Design

Photo Credit:
davefishernc (flickr)

Design can be learned. (srsly!)
Good Design IS Problem Solving:
Designer mentality vs. coder methodology.
Verbal
Visual Logical
Emotional Sequential
Random Analytical
Intuitive Objective
Subjective
Nielson and Zeldman
http://www.happywebbies.com/

“Design depends
largely on constraints.”
- Charles Eames

Layout You gotta
Color learn the
Texture rules befo
Type you try to
Imagery 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!)
http://designbygrid.com/

Color: The Wheel
Orange, Green, Violet
Red-Orange, Yellow-Orange,
Yellow-Green, Blue-Green,
Blue-Violet, Red-Violet

Color: Schemes

Color: Resources
1. http://www.colorzilla.com
Firefox eyedropper plugin.
2. http://kuler.adobe.com
Flash-based color scheme tool.
3. http://www.colourlovers.com
Color scheme community site.

Texture
The web shouldn’t always feel like the web.

1. Baseline
Typography 2. Cap height
3. Crossbar
4. Serif
5. Meanline
6. Bowl
7. Descended
8. Counter
9. Stem
10. Tittle
11. Terminal
As with design principles, there are a lot of vocabulary
12. Ascender
terms to digest when first learning about the nuances of 13. Leg
typography. Getting to know the 5 basic categories of 14. Ligature
fonts is a good foundation. 15. X-height

Typography: Serif Fonts

Typography: Sans-Serif Fonts

Typography: Fixed-Width Fonts

Typography: Handwritten Fonts

Typography: Novelty Fonts

4. Typography: The “OK, Fine” 9
Arial These nine fonts are
Arial Black
installed by default on
most Mac and PC
Comic Sans MS computers.
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

4. Typography: The “OK, Fine” 9
Specify preferred fonts first:
font-family: Avenir, Helvetica, Arial, sans-serif;
font-family: Minion, "Times New Roman", times, serif;
Use Background Images
Use sIFR (Scalable Inman Flash Replacement)
Use Cufón (JavaScript text replacement without Flash)

5. Imagery
Images & illustrations can make or break a website.

5. Imagery: Selection
1. What is the most relevant
image for the subject?
2. What is the most artistic and
interesting image I can use?
3. What would be the most appealing
image for the target audience?
Digital Web: Cooking with Stock
http://tinyurl.com/dw-stock

Keep at it!
“ When they're not working on their day jobs,
most top-notch web designers are pushing
the web design envelope after-hours or on
their own personal sites manipulating
current technologies and expanding the
medium's design vocabulary.”
- Curt Cloninger, "Fresh Styles for Web Designers”, 2001