DESIGNPATTERNCRAFTSMANSHIPJason Beaird - February 29th, 2012

Hobbyist

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

ApprenticeIllustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74

1. LAYOUT Asymmetrical Balance

Symmetrical Balance

1. LAYOUTUnity viaProximity

Unity viaRepetition

EmphasisPlacement

ContinuanceIsolationContrast

Proportion

1. LAYOUT

Primary Navigation BlockLogo

Copyright

Homepage Content

Widget 1

Widget 2

Widget 3

Footer Navigation Block

1. LAYOUT

Primary Navigation BlockLogo

Copyright

Homepage Content

Widget 1 Widget 2 Widget 3

Footer Navigation Block

1. LAYOUT

MONCHROMATIC

ANALOGOUS

COMPLIMENTARY

One color + Black/W hite

2. COLOR

Adjacent 1/3 of the “Pie”

Opposite Sides of the W heelOthers: Split-Complimentary, Triadic, Tetradic, etc...

3. TEXTURE

1. BASELINE2. CAP HEIGHT3. CROSSBAR4. SERIF5. MEANLINE

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.

11. TERMINAL12. ASCENDER13. LEG14. LIGATURE15. X-HEIGHT

6. BOWL7. DESCENDED8. COUNTER9. STEM10. TITTLE

4. TYPOGRAPHY

5. IMAGERY

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

JourneymanIllustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74

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

http://patterntap.com

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

http://pea.rs

http://twitter.github.com/bootstrap

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

Master Craftsman

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