Updated 7/2009: The same presentation as my Design 4 Developers presentation from the ConvergeSC conference, updated with a few more examples for a presentation at South University on 7/14/2009.

2. Principles of Beautiful Web Design

3. Me? Design?
But I’m not
an artist…
Photo Credit: Samhines(flickr)

4. My personal site circa 1998…Jason meets Photoshop.

5. A few years later in 2001…Hooray for art classes.

6. Senior year at UCF in 2003…Experimenting with CSS

7. The 2004 redesign that broke the mold.

8. The 2005 redesign that lingered around too long…

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

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

12. Pre-Lesson Case Studies
1. Tour Reservation System

13. Pre-Lesson Case Studies
2. Book Promo Site

14. Pre-Lesson Case Studies
3. Greenville Symphony

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

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

17. Bad Balance

18. Good Balance

19. Layout: Unity
Via Proximity and Repetition

20. Bad Unity

21. Good Unity

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

23. Bad Emphasis

24. Good Emphasis

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

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

29. Color: Schemes

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

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

38. 1. Baseline
Typography 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

39. Typography: Serif Fonts

40. Typography: Sans-Serif Fonts

41. Typography: Fixed-Width Fonts

42. Typography: Handwritten Fonts

43. Typography: Novelty Fonts

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

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

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

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

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