====== Elements & Principles of Design ======

Author: Michelle McCausland

====== TLDR; ======
**Elements of Design**
  * Color (Hue)
  * Value (Tone)
  * Texture
  * Shape
  * Form
  * Space (whitespace)
  * Line
  * Type

**Principles of Design**
  * Contrast
  * Emphasis
  * Balance
  * Unity
  * Pattern
  * Movement
  * Rhythm / Repetition
  * Proportion
  * Simplicity
  * Gradation

====== Elements of Design ======

- **1. Color (Hue)**
    - sets the mood or feel of design
        - conveys emotion
    - Color Wheel
        - Types of Colors
            - Primary
                - Red, Blue, Yellow
            - Secondary
                - Primary + Primary
            - Tertiary
                - Primary + Secondary
        - Harmonies
            - Monocrome
            - Complimentary
                - Opposite colors on color wheel
            - Split Complimentary
            - Analogous
                - Adjacent colors on color wheel
            - Triad
                - 3 Adjacent colors
        - Tint
            - Add White
        - Tone
            - Add Grey
        - Shade
            - Add Black
- **2. Value (Tone)**
    - Degree of lightness or darkness
    - Adds Contrast
        - Creates area of interest
        - Focal point
        - e.g. Light shape on a dark background
    - Use color to add depth
- **3. Texture**
    - Surface quality of a defined shape or line
    - Adds sense of depth
        - e.g. reflective surface effect
    - "Flat Design" avoids texture
    - More visually tactile
        - rough, smooth, hard, soft
    - Emphasize focal point
    - Subtle decorations
    - Texture Resources
        - smashingmagazine.com/tag/textures
        - Texture King
        - Zen Textures
        - Texturemate.com
        - Grunge textures
- **4. Shape**
    - Any flat area bound by line, value, color
    - Organize and define areas
    - Positive
        - area a space contains
        - buttons
        - nav bars
    - Negative
        - Area around a shape
    - Repetition of shapes creates harmony and unity
        - Set of buttons
        - Set of widgets
    - Geometric
    - Organic
- **5. Form**
    - Overall mass of shapes & relationship between them
        - The sum of all the parts
    - Create black and white mockups first
        - Then add color
    - Clean and balanced design & layout
- **6. Space (Whitespace)**
    - Areas, distances between all elements of a design
    - resist temptation to fill all space
        - give a sense of breathing room
        - So eyes have a place to rest
    - Use space deliberately
    - Make use of negative space
- **7. Line**
    - can imply movement
        - left to right
        - diagonal
    - can create areas of emphasis
    - create dividers
        - Separate groups of content
    - Mark, path, mass that defines position/direction
    - can be formed by edge where 2 shapes meet
    - Don't need to just be straight
    - Create order / organization
- **8. Type**
    - typography
        - Serif
            - Print
        - Sans-Serif
            - Digital
    - Font/text
        - Fonts chosen to display text
    - Typeface
        - Set of fonts in a font family
            - Arial
                - Arial Bold
                - Arial Regular
                - Arial Italic

====== Principles of Design ======

**Rules of Design**

- **1. Contrast**
    - shows users exactly where to look
        - juxtaposition of elements to show emphasis
    - Should be located at center of interest
        - e.g. Hero section
    - Opposite colors
    - Space/whitespace
    - Play with direction
    - Hard / soft edge shapes

- **2. Emphasis**
    - Attention on single area to show visual importance
        - Size & placement of elements
    - Typographic Hierarchy
        - Use of fonts to create a sense of flow / emphasis
            - Varying the size, weight, color & spacing
                - B, I, All Caps
                - H1, H2, H3
                - Serif / Sans-Serif for paragraphs and headers
- **3. Balance**
    - Alignment and distribution of content
        - Squint and look at the whole composition
    - making use of the grid system
        - seesaw analogy
    - not same as symmetry
        - Can be asymmetrical
            - Creates interesting tension that draws attention
- **4. Unity**
    - Pleasing arrangement of parts in a design
        - harmony
        - presents info in a logical structure
    - Consider user's experience
        - link styles
            - edit color to match layout
            - active
            - hover
            - visited
            - link
    - extreme complexity leads to over stimulation
- **5. Pattern**
    - Way to keep design organized
        - sense of harmony through use of repeating elements
    - Can be decorative
    - less is more
    - background patterns
- **6. Movement**
    - the suggestion of action or direction
    - scrolling
        - fixed
        - scrolling
        - parallax
        - easing
    - Animation
    - Sense of interactivity
- **7. Rhythm / Repitition**
    - repetition of element that creates visual rhythm
        - establish visual interest
    - grid layout
        - alter number of columns in each row
- **8. Proprtion**
    - visual relationship between 2 or more things
        - size
            - most important = largest
            - large background image with small text
        - number
    - Tiered dominance
        - creates hierarchy
            - text size
    - Works with emphasis and unity
- **9. Simplicity**
    - Removal of non essential elements
        - only show what's essential
    - difficult to determine
- **10. Gradation**
    - gradual change that occurs in steps/stages
    - think of contrast
        - draws the eye in
        - creates a sense of movement
        - size
            - large to small
        - color
            - gradients
                - light to dark
                - 1 hue to another
        - line
            - thick to thin
            - curved to straight
            - long to short