Author: Michelle McCausland

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

- 1. Color (Hue)

1. sets the mood or feel of design
   1. conveys emotion
2. Color Wheel
   1. Types of Colors
      1. Primary
         1. Red, Blue, Yellow
      2. Secondary
         1. Primary + Primary
      3. Tertiary
         1. Primary + Secondary
   2. Harmonies
      1. Monocrome
      2. Complimentary
         1. Opposite colors on color wheel
      3. Split Complimentary
      4. Analogous
         1. Adjacent colors on color wheel
      5. Triad
         1. 3 Adjacent colors
   3. Tint
      1. Add White
   4. Tone
      1. Add Grey
   5. Shade
      1. Add Black

- 2. Value (Tone)

1. Degree of lightness or darkness
2. Adds Contrast
   1. Creates area of interest
   2. Focal point
   3. e.g. Light shape on a dark background
3. Use color to add depth

- 3. Texture

1. Surface quality of a defined shape or line
2. Adds sense of depth
   1. e.g. reflective surface effect
3. “Flat Design” avoids texture
4. More visually tactile
   1. rough, smooth, hard, soft
5. Emphasize focal point
6. Subtle decorations
7. Texture Resources
   1. smashingmagazine.com/tag/textures
   2. Texture King
   3. Zen Textures
   4. Texturemate.com
   5. Grunge textures

- 4. Shape

1. Any flat area bound by line, value, color
2. Organize and define areas
3. Positive
   1. area a space contains
   2. buttons
   3. nav bars
4. Negative
   1. Area around a shape
5. Repetition of shapes creates harmony and unity
   1. Set of buttons
   2. Set of widgets
6. Geometric
7. Organic

- 5. Form

1. Overall mass of shapes & relationship between them
   1. The sum of all the parts
2. Create black and white mockups first
   1. Then add color
3. Clean and balanced design & layout

- 6. Space (Whitespace)

1. Areas, distances between all elements of a design
2. resist temptation to fill all space
   1. give a sense of breathing room
   2. So eyes have a place to rest
3. Use space deliberately
4. Make use of negative space

- 7. Line

1. can imply movement
   1. left to right
   2. diagonal
2. can create areas of emphasis
3. create dividers
   1. Separate groups of content
4. Mark, path, mass that defines position/direction
5. can be formed by edge where 2 shapes meet
6. Don't need to just be straight
7. Create order / organization

- 8. Type

1. typography
   1. Serif
      1. Print
   2. Sans-Serif
      1. Digital
2. Font/text
   1. Fonts chosen to display text
3. Typeface
   1. Set of fonts in a font family
      1. Arial
         1. Arial Bold
         2. Arial Regular
         3. Arial Italic

Rules of Design

- 1. Contrast

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

- 2. Emphasis

1. Attention on single area to show visual importance
   1. Size & placement of elements
2. Typographic Hierarchy
   1. Use of fonts to create a sense of flow / emphasis
      1. Varying the size, weight, color & spacing
         1. B, I, All Caps
         2. H1, H2, H3
         3. Serif / Sans-Serif for paragraphs and headers

- 3. Balance

1. Alignment and distribution of content
   1. Squint and look at the whole composition
2. making use of the grid system
   1. seesaw analogy
3. not same as symmetry
   1. Can be asymmetrical
      1. Creates interesting tension that draws attention

- 4. Unity

1. Pleasing arrangement of parts in a design
   1. harmony
   2. presents info in a logical structure
2. Consider user's experience
   1. link styles
      1. edit color to match layout
      2. active
      3. hover
      4. visited
      5. link
3. extreme complexity leads to over stimulation

- 5. Pattern

1. Way to keep design organized
   1. sense of harmony through use of repeating elements
2. Can be decorative
3. less is more
4. background patterns

- 6. Movement

1. the suggestion of action or direction
2. scrolling
   1. fixed
   2. scrolling
   3. parallax
   4. easing
3. Animation
4. Sense of interactivity

- 7. Rhythm / Repitition

1. repetition of element that creates visual rhythm
   1. establish visual interest
2. grid layout
   1. alter number of columns in each row

- 8. Proprtion

1. visual relationship between 2 or more things
   1. size
      1. most important = largest
      2. large background image with small text
   2. number
2. Tiered dominance
   1. creates hierarchy
      1. text size
3. Works with emphasis and unity

- 9. Simplicity

1. Removal of non essential elements
   1. only show what's essential
2. difficult to determine

- 10. Gradation

1. gradual change that occurs in steps/stages
2. think of contrast
   1. draws the eye in
   2. creates a sense of movement
   3. size
      1. large to small
   4. color
      1. gradients
         1. light to dark
         2. 1 hue to another
   5. line
      1. thick to thin
      2. curved to straight
      3. long to short