My presentation for the ConvergeSC conference on June 27th, 2009 in Columbia, SC.

2. Principles of Beautiful Web Design

3. Photo Credit:
davefishernc (flickr)

4. 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/

5. “Design depends
largely on constraints.”
- Charles Eames

6. Layout You gotta
Color learn the
Texture rules befo
Type you try to
Imagery break them

7. Layout: Balance
Finding it and shifting it.
Symmetrical & Asymmetrical

8. Bad Balance

9. Good Balance

10. Layout: Unity
Via Proximity and Repetition

11. Bad Unity

12. Good Unity

13. Layout: Emphasis
Many ways to achieve it,
whether you want to or not:
Placement
Continuance
Isolation
Contrast
Proportion

14. Bad Emphasis

15. Good Emphasis

16. Layout: Grids (are good!)
http://designbygrid.com/

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

20. Color: Schemes

24. 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.

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

26. Typography 1. Baseline
2. Cap height
3. Crossbar
4. Serif
5. Meanline
6. Bowl
7. Descended
8. Counter
9. Stem
10. Tittle
As with design principles, there are a lot of vocabulary 11. Terminal
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

27. Typography: Serif Fonts

28. Typography: Sans-Serif Fonts

29. Typography: Fixed-Width Fonts

30. Typography: Handwritten Fonts

31. Typography: Novelty Fonts

33. 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

34. 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)

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

36. 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

37. 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