Principles of Beautiful Web Design
Photo Credit:
davefishernc (flickr)
Design can be learned. (srsly!)
Good Design IS Problem Solving:
Designer mentality vs. coder methodology.

               ...
“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
    Con...
Bad Emphasis
Good Emphasis
Layout: Grids (are good!)
http://designbygrid.com/
Color: The Wheel



                   Orange, Green, Violet


                   Red-Orange, Yellow-Orange,
             ...
Color: Schemes
Color: Resources
1. http://www.colorzilla.com
   Firefox eyedropper plugin.

2. http://kuler.adobe.com
   Flash-based colo...
Texture
The web shouldn’t always feel like the web.
1. Baseline
Typography                                                 2. Cap 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 ...
4. Typography: The “OK, Fine” 9




   Specify preferred fonts first:
      font-family: Avenir, Helvetica, Arial, sans-se...
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
   interest...
Keep at it!
“   When they're not working on their day jobs,
    most top-notch web designers are pushing
    the web desig...
Design 4 Developers
Design 4 Developers
Design 4 Developers
Design 4 Developers
Design 4 Developers
Design 4 Developers
Design 4 Developers
Upcoming SlideShare
Loading in...5
×

Design 4 Developers

4,945

Published on

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

Published in: Design, Technology, Business
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,945
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
112
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Design 4 Developers"

  1. 1. Principles of Beautiful Web Design
  2. 2. Photo Credit: davefishernc (flickr)
  3. 3. 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/
  4. 4. “Design depends largely on constraints.” - Charles Eames
  5. 5. Layout You gotta Color learn the Texture rules befo Type you try to Imagery break them
  6. 6. Layout: Balance Finding it and shifting it. Symmetrical & Asymmetrical
  7. 7. Bad Balance
  8. 8. Good Balance
  9. 9. Layout: Unity Via Proximity and Repetition
  10. 10. Bad Unity
  11. 11. Good Unity
  12. 12. Layout: Emphasis Many ways to achieve it, whether you want to or not: Placement Continuance Isolation Contrast Proportion
  13. 13. Bad Emphasis
  14. 14. Good Emphasis
  15. 15. Layout: Grids (are good!) http://designbygrid.com/
  16. 16. Color: The Wheel Orange, Green, Violet Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Violet, Red-Violet
  17. 17. Color: Schemes
  18. 18. 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.
  19. 19. Texture The web shouldn’t always feel like the web.
  20. 20. 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
  21. 21. Typography: Serif Fonts
  22. 22. Typography: Sans-Serif Fonts
  23. 23. Typography: Fixed-Width Fonts
  24. 24. Typography: Handwritten Fonts
  25. 25. Typography: Novelty Fonts
  26. 26. 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
  27. 27. 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)
  28. 28. 5. Imagery Images & illustrations can make or break a website.
  29. 29. 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
  30. 30. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×