MONOCHROMATIC
One color + Black/White
2. COLOR
ANALOGOUS
Adjacent 1/3 of the “Pie”
COMPLIMENTARY
Opposite Sides of the Wheel
Others: Split-Complimentary, Triadic, Tetradic, etc...
Slide 20
Slide 20 text
3. TEXTURE
Slide 21
Slide 21 text
1. BASELINE
2. CAP HEIGHT
3. CROSSBAR
4. SERIF
5. 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. TERMINAL
12. ASCENDER
13. LEG
14. LIGATURE
15. X-HEIGHT
6. BOWL
7. DESCENDED
8. COUNTER
9. STEM
10. TITTLE
4. TYPOGRAPHY
Slide 22
Slide 22 text
5. IMAGERY
Slide 23
Slide 23 text
http://demo.customtheme.com/?wptheme=Blogwave
Slide 24
Slide 24 text
http://allrecipes.com/Recipe/Worlds-Best-Lasagna
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
“Seabreeze Shower” by Harold Newton, Date Unknown
Slide 27
Slide 27 text
“Untitled” by Mary Ann Carroll, 1968
Slide 28
Slide 28 text
“Afternoon Glow” by A.E. Backus, Date Unknown
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Journeyman
Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74
Slide 31
Slide 31 text
BUT OF COURSE YOU ALREADY...
•Love Web Standards
•Write Semantic Code
•Separate Style/Content/Behavior
•Experiment with New Technologies
•Constantly Hunting for Design Inspiration
https://github.com/adactio/Pattern-Primer (more info: adactio.com/journal/5028)
“Start designing from the content
out rather than the canvas in.”
- Jeremy Keith
Slide 40
Slide 40 text
Master Craftsman
Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74
Slide 41
Slide 41 text
http://pea.rs
Slide 42
Slide 42 text
http://pea.rs
“A good craftsperson
builds their own tools.”
- Dan Cedarholm
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
What would
MacGyver Do?
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
http://flic.kr/p/bmNhqC
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
A DESIGN PATTERN LIBRARY?
•Specific to a Project or Application
•LEGO-Like Sets of Markup & Style
•For Elements Used 3 or More Times
•Should Be Adaptable & Extendable
•Serves as a Testbed & Style Guide
Slide 55
Slide 55 text
http://sass-lang.com
http://lesscss.org
Slide 56
Slide 56 text
Anna Debenham’s Front end styleguides collection - http://gim.ie/fZyK
Slide 57
Slide 57 text
Illustration Source: Carpentry for Boys by J. S. Zerbe, 3/72007 - gutenberg.org/ebooks/20763
Love
+
Patterns
+
Tools
Jason Beaird
@jasongraphix