Why Design?

1. Your biggest asset - “Learn whatever you want to achieve your vision”.
2. Good designs are timeless. They can awe people of any era.
3. Fundamental soul of a human creation that expresses itself in successive outer layers of the product.
4. Designing of a system comes before building it not after.
5. Affect emotion, build credibility, earn trust.
6. Don’t draw ponies.
7. First visual interaction thus heuristic shortcut to judge credibility.
8. Purpose | Medium and Technology | Aesthetics
9. Good design choices are a set of ideas that must mature in the mind.
10. Use user persona to wireframe and prototype.
11. Memorable and usability.

Typography

1. Where does that typeface come from? What medium and technology influenced it?
2. Typeface is what you use. Font is the file which contains the typeface (Am I being pedantic?).
3. Understand the forces that brought the style into existence.
4. SEO is design.

Proportions

1. How size and magnitude relate to each other.
2. Important and unimportant elements.
3. Common ones:
   • √2 : 1
   • 3 : 4
   • 2 : 3
   • φ : 1

Composition

1. Arrangement of elements.
2. Reading direction, guiding the eye.

Principles

1. Dominance - pulls you in
2. Similarity
3. Rhythm
4. Texture
5. Direction
6. Contrast
7. Application to MailChimp logo

Visual Hierarchy

1. White space
2. Type weight
3. Type size - 3:4 relationship - 5, 7, 9, 12, 16, 21, 28, 37, 50, 67
4. Color
5. Ornamentation
6. Different blog designs and explanation
7. Application to website
8. Cluttering design in HTML tables

Color Science

1. Color in physics
   • EMR
2. Human visual limitations
   • Color constancy
   • metamerism
   • afterimages
3. Human visual system (biology)
   • Rod, cones (3 types), ganglion etc
   • Trichromatic theory, color opponent theory
   • Color blindness
4. Color models
   • Munsell
   • HSB
   • LAB
5. Data driven graphics
   • Converging palettes
   • Diverging palletes
6. RGB model
   • Color mixing, additive model
   • Hexadecimal mental model
   • navigating color without using a picker
7. Cross media color representation
   • RGB (computers), CMYK (print)
   • CMYK a subtractive model
   • Gamuts
   • ICC profile
   • Approximate screen color on print (previewing color shifts, proofing etc)
   • Spot colors

Color Theory

1. Color association with events for our ancestors
2. Effect of red on prefrontal cortex
   • prefrontal cortex and rational thought
   • eg of Target (retailer chain)
   • use cases for red
3. Color and culture
   • questions to ask when designing for a foreign culture
   • do research
4. Color Wheel
5. Expected usage of few colors in culture
   • White - backgrounds, trustworthy etc
   • Off white - natural feel, not for high traffic site
   • Dark - sophistication, exclusivity
   • Bright - less content
   • Green - success, mark of progress
   • Yellow - info
   • Red - error, warning, urgent
   • Blue - links (generally)
   • Accent colors
6. Interaction between colors
   • warm colors pop, cool colors recede
   • tint pops, shade recedes
   • why monet never used black (explanation of his poplar painting)
   • application to typography color, element design
7. Color schemes
   • monochromatic
   • analogous
   • complementary
   • split complementary
   • triadic
   • tetradic
   • variations
8. Creating mood with colors
   • mysterious (exclusive)
   • active (youths, zeal etc)
   • muted (solemn etc)
   • natural
9. Tools for creating color schemes
   • Color Schemer
   • Color Scheme Designer
   • Kuler

appendix A

1. Consult for table of pairable typefaces to use for different purposes.

appendix B - typographical etiquette

1. Don’t

• Fake bold/italic/small caps
• Stretch types
• Outline types
• Impose background images or textures

2. Avoid Widows and orphans
3. Use drop caps
4. Avoid indenting and leaving a line. Redundant.
5. Use smart quotes (” “ ” “ ′ ″ )
6. ‐ (‐), – (–) and — (—)
7. Ligatures but not widely supported.