Design 4 Future Developers


Published on

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.

Published in: Business, Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Design 4 Future Developers

  1. 1. Web Design for Future Developers February 4 th , 2009  Jason Beaird
  2. 3. Identification Designer Coder Me 
  3. 4. Designer Coder
  4. 5. Me? Design? Really? NoWai! <ul><li>Good Design IS Problem Solving: </li></ul><ul><li>Designer mentality vs. coder methodology. </li></ul><ul><ul><li>Designers tend to approach problems from an emotional, romantic, artistic perspective. We rely on instinct and experience. </li></ul></ul><ul><ul><li>Coders tend to approach problems systematically based on fundamental theories and efficiency.  </li></ul></ul> FTW
  5. 6. Find a Balance <ul><li>Website Development requires artistic talent and theoretical foundations in order to: </li></ul><ul><ul><li>Avoid becoming a “one trick pony” </li></ul></ul><ul><ul><li>Get unstuck when a design goes south </li></ul></ul><ul><ul><li>Understand the rules and when to break them: “Rule Followers rarely make history” </li></ul></ul>Nielson and Zeldman
  6. 7. Pre-Lesson Case Studies <ul><li>Tour Reservation System </li></ul>
  7. 8. Pre-Lesson Case Studies <ul><li>Book Promo Site </li></ul>
  8. 9. Pre-Lesson Case Studies <ul><li>Greenville Symphony </li></ul>
  9. 10. My Design Process <ul><li>Layout </li></ul><ul><li>Color </li></ul><ul><li>Texture </li></ul><ul><li>Type </li></ul><ul><li>Imagery </li></ul>As Outlined in The Principles of Beautiful Web Design…
  10. 11. 1. Layout: Balance <ul><li>Finding it and shifting it. </li></ul><ul><ul><li>Symmetrical & Asymmetrical </li></ul></ul>
  11. 12. Bad Balance
  12. 13. Good Balance
  13. 14. 1. Layout: Unity <ul><li>Via Proximity and Repetition </li></ul>
  14. 15. Bad Unity
  15. 16. Good Unity
  16. 17. 1. Layout: Emphasis <ul><li>Many ways to achieve it, whether you want to or not: </li></ul><ul><ul><li>Placement </li></ul></ul><ul><ul><li>Continuance </li></ul></ul><ul><ul><li>Isolation </li></ul></ul><ul><ul><li>Contrast </li></ul></ul><ul><ul><li>Proportion </li></ul></ul>
  17. 18. Bad Emphasis
  18. 19. Good Emphasis
  19. 20. 1. Layout: Grids (are good!) <ul><li> </li></ul>
  20. 21. 2. Color: The Wheel Primary Colors Red, Yellow, Blue Secondary Colors Orange, Green, Violet Tertiary Colors Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Violet, Red-Violet
  21. 22. 2. Color: Schemes <ul><li>Monochromatic </li></ul><ul><ul><li>One Color + Black/White </li></ul></ul><ul><li>Analogous </li></ul><ul><ul><li>Adjacent, 1/3 of the wheel. </li></ul></ul><ul><li>Complementary </li></ul><ul><ul><li>Opposite Colors on the wheel. </li></ul></ul><ul><li>Others:Split-Complimentary, Triadic, Tetradic, Etc… </li></ul>
  22. 26. 3. Texture The web shouldn’t always feel like the web.
  23. 27. 4. Typography As with design principles, there are a lot of vocabulary terms to digest when first learning about the nuances of typography. Getting to know the 5 basic categories of fonts is a good foundation. <ul><li>Baseline </li></ul><ul><li>Cap height </li></ul><ul><li>Crossbar </li></ul><ul><li>Serif </li></ul><ul><li>Meanline </li></ul><ul><li>Bowl </li></ul><ul><li>Descended </li></ul><ul><li>Counter </li></ul><ul><li>Stem </li></ul><ul><li>Tittle </li></ul><ul><li>Terminal </li></ul><ul><li>Ascender </li></ul><ul><li>Leg </li></ul><ul><li>Ligature </li></ul><ul><li>X-height </li></ul>
  24. 28. 4. Typography: Serif Fonts
  25. 29. 4. Typography: Sans-Serif Fonts
  26. 30. 4. Typography: Fixed-Width Fonts
  27. 31. 4. Typography: Handwritten Fonts
  28. 32. 4. Typography: Novelty Fonts
  29. 33. 4. Typography: The “OK, Fine” 9 These nine fonts are installed by default on most Mac and PC computers. Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana
  30. 34. 4. Typography: The “OK, Fine” 9 <ul><li>Specify preferred fonts first: </li></ul><ul><ul><li>font-family: Avenir, Helvetica, Arial, sans-serif; </li></ul></ul><ul><ul><li>font-family: Minion, &quot;Times New Roman&quot;, times, serif; </li></ul></ul><ul><li>Use Background Images </li></ul><ul><li>Use sIFR (Scalable Inman Flash Replacement) </li></ul>
  31. 35. 5. Imagery Images & illustrations can make or break a website.
  32. 36. 5. Imagery: Selection <ul><li>What is the most relevant image for the subject? </li></ul><ul><li>What is the most artistic and interesting image I can imagine using? </li></ul><ul><li>What would be the most appealing image for the site’s target audience? </li></ul>
  33. 37. <ul><li>&quot;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, &quot;Fresh Styles for Web Designers”, 2001 </li></ul>