This document discusses various design patterns and principles including layout, color, texture, typography, and imagery. It covers layout concepts like symmetrical and asymmetrical balance, unity via proximity and repetition, and emphasis techniques. For color, it discusses monochromatic, analogous, and complimentary color schemes. It also lists resources for learning more about design patterns.

1. DESIGN
PATTERN
CRAFTSMANSHIP
Jason Beaird - February 29th, 2012

3. Hobbyist
Illustration Source: Punch, or the London Charivari, Volume 93, October 15th 1887

7. Apprentice
Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74

9. 1. LAYOUT Asymmetrical Balance
Symmetrical Balance

10. 1. LAYOUT
Unity via
Proximity
Unity via
Repetition

11. 1. LAYOUT Emphasis
Placement
Contrast
Isolation
Continuance
Proportion

12. 1. LAYOUT
Lo go Primary Navigatio
n Block
Footer Navigation Block
Hom
epa
ge C
ont
ent Copyrigh
t Widget 2
Widge
t3
Widget 1

13. 1. LAYOUT
Logo Primary Navigation Block
Homepage Content
Widget 1 Widget 2 Widget 3
Footer Navigation Block
Copyright

14. 2. COLOR
MONCHROMATIC
One color + Black/W hite
ANALOGOUS
Adjacent 1/3 of the “Pie”
COMPLIMENTARY
Opposite Sides of the W heel
Others: Split-Complimentary, Triadic, Tetradic, etc...

15. 3. TEXTURE

16. 4. TYPOGRAPHY As with design principles,
there are a lot of vocabulary
terms to digest when first
1. BASELINE 6. BOWL 11. TERMINAL
learning about the nuances
2. CAP HEIGHT 7. DESCENDED 12. ASCENDER of typography. Getting to
3. CROSSBAR 8. COUNTER 13. LEG
4. SERIF 9. STEM 14. LIGATURE
know the 5 basic categories
5. MEANLINE 10. TITTLE 15. X-HEIGHT of fonts is a good foundation.

17. 5. IMAGERY

18. http://demo.customtheme.com/?wptheme=Blogwave

19. Journeyman
Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74

20. convergese.com, warchild.org, jenierteas.com, electricpulp.com

21. http://patterntap.com

22. http://https://github.com/adactio/Pattern-Primer

23. http://pea.rs

24. http://twitter.github.com/bootstrap

25. http://github.com/stubbornella/oocss/wiki

26. Master Craftsman
Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74