DESIGNPATTERNCRAFTSMANSHIPJason Beaird - February 29th, 2012
Hobbyist      Illustration Source: Punch, or the London Charivari, Volume 93, October 15th 1887
Apprentice       Illustration Source: André Jacob Roubo, LArt du Menuisier Paris, 1769-74
1. LAYOUT             Asymmetrical BalanceSymmetrical Balance
1. LAYOUT             Unity via             ProximityUnity viaRepetition
1. LAYOUT             Emphasis        Placement         Contrast          Isolation       Continuance       Proportion
1. LAYOUT                     Lo go           Primary Navigatio                                                       n Bl...
1. LAYOUT         Logo               Primary Navigation Block  Homepage Content  Widget 1                  Widget 2       ...
2. COLOR    MONCHROMATIC     One color + Black/W hite    ANALOGOUS      Adjacent 1/3 of the “Pie”    COMPLIMENTARY    Oppo...
3. TEXTURE
4. TYPOGRAPHY                                 As with design principles,                                              ther...
5. IMAGERY
http://demo.customtheme.com/?wptheme=Blogwave
Journeyman      Illustration Source: André Jacob Roubo, LArt 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, LArt du Menuisier Paris, 1769-74
Design Pattern Craftsmanship - 2012
Design Pattern Craftsmanship - 2012
Design Pattern Craftsmanship - 2012
Design Pattern Craftsmanship - 2012
Design Pattern Craftsmanship - 2012
Design Pattern Craftsmanship - 2012
Design Pattern Craftsmanship - 2012
Design Pattern Craftsmanship - 2012
Design Pattern Craftsmanship - 2012
Design Pattern Craftsmanship - 2012
Design Pattern Craftsmanship - 2012
Upcoming SlideShare
Loading in …5
×

Design Pattern Craftsmanship - 2012

378
-1

Published on

A talk I gave at Etsy for their Code as Craft series. Video: http://www.livestream.com/etsy/video?clipId=pla_b91e2e0b-4c67-4f42-ba49-7b62a9e2c3bb

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
378
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design Pattern Craftsmanship - 2012

  1. 1. DESIGNPATTERNCRAFTSMANSHIPJason Beaird - February 29th, 2012
  2. 2. Hobbyist Illustration Source: Punch, or the London Charivari, Volume 93, October 15th 1887
  3. 3. Apprentice Illustration Source: André Jacob Roubo, LArt du Menuisier Paris, 1769-74
  4. 4. 1. LAYOUT Asymmetrical BalanceSymmetrical Balance
  5. 5. 1. LAYOUT Unity via ProximityUnity viaRepetition
  6. 6. 1. LAYOUT Emphasis Placement Contrast Isolation Continuance Proportion
  7. 7. 1. LAYOUT Lo go Primary Navigatio n Block Footer Navigation Block Hom epa ge C ont ent Copyrigh t Widget 2 Widge t3Widget 1
  8. 8. 1. LAYOUT Logo Primary Navigation Block Homepage Content Widget 1 Widget 2 Widget 3 Footer Navigation Block Copyright
  9. 9. 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...
  10. 10. 3. TEXTURE
  11. 11. 4. TYPOGRAPHY As with design principles, there are a lot of vocabulary terms to digest when first1. BASELINE 6. BOWL 11. TERMINAL learning about the nuances2. CAP HEIGHT 7. DESCENDED 12. ASCENDER of typography. Getting to3. CROSSBAR 8. COUNTER 13. LEG4. SERIF 9. STEM 14. LIGATURE know the 5 basic categories5. MEANLINE 10. TITTLE 15. X-HEIGHT of fonts is a good foundation.
  12. 12. 5. IMAGERY
  13. 13. http://demo.customtheme.com/?wptheme=Blogwave
  14. 14. Journeyman Illustration Source: André Jacob Roubo, LArt du Menuisier Paris, 1769-74
  15. 15. convergese.com, warchild.org, jenierteas.com, electricpulp.com
  16. 16. http://patterntap.com
  17. 17. http://https://github.com/adactio/Pattern-Primer
  18. 18. http://pea.rs
  19. 19. http://twitter.github.com/bootstrap
  20. 20. http://github.com/stubbornella/oocss/wiki
  21. 21. Master Craftsman Illustration Source: André Jacob Roubo, LArt du Menuisier Paris, 1769-74

×