The Elements And Principles Of Visual Design

The Elements And Principles Of Visual Design

Visual design feedback can be challenging. How do you elaborate on, “This looks bad?” Regardless of your discipline, critiques can always be improved. By utilizing a language construct built on the elements and principles of visual design, everyone has the ability to focus on problem-solving while staving off subjective remarks.

I'll walk you through the elements and principles used by visual designers to frame reviews, explore design system directions with Style Tiles, and create visual inventories to study current design systems with.

Af7f298fde5f7411d5913278194e5b09?s=128

Chuck Borowicz

June 23, 2014
Tweet

Transcript

  1. CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission chuck@eightshapes.com

    @chuckborowicz
  2. KERNING MATTERS

  3. KERNING MATTERS

  4. None
  5. One morning at EightShapes…

  6. You there?

  7. You there? Yo!

  8. Yo! Hey, something for you to think about regarding design

    feedback…
  9. Hey, something for you to think about regarding design feedback…

  10. … I know when I don’t like something, but I

    should give more specific feedback than that.
  11. I know when I don’t like something, but I should

    give more specific feedback than that. Yes, yes you should.
  12. Yes, yes you should. How can I give you a

    better visual design critique?
  13. How can I give you a better visual design critique?

    Hmm, let me get back to you…
  14. feedback is given

  15. feedback is given is it an approval?

  16. feedback is given is it an approval? subjective feedback? Y

  17. feedback is given you’re done! is it an approval? subjective

    feedback? Y Y N
  18. feedback is given you’re done! is it an approval? subjective

    feedback? Y Y N N subjective feedback?
  19. feedback is given you’re done! is it an approval? subjective

    feedback? Y Y N N subjective feedback? N tasks clear?
  20. feedback is given you’re done! is it an approval? subjective

    feedback? Y Y N N subjective feedback? N tasks clear? Y back to work/ schedule review
  21. feedback is given you’re done! is it an approval? subjective

    feedback? Y Y N N subjective feedback? N tasks clear? Y back to work/ schedule review
  22. feedback is given you’re done! is it an approval? subjective

    feedback? Y Y N N subjective feedback? N tasks clear? clarify, seek tasks Y N back to work/ schedule review
  23. feedback is given you’re done! is it an approval? subjective

    feedback? Y Y N N subjective feedback? N tasks clear? clarify, seek tasks Y N back to work/ schedule review
  24. feedback is given you’re done! is it an approval? subjective

    feedback? Y Y N N subjective feedback? N tasks clear? clarify, seek tasks Y N back to work/ schedule review Y push back, get clarification based on what’s happening in the design
  25. feedback is given you’re done! is it an approval? subjective

    feedback? Y Y N N subjective feedback? N tasks clear? clarify, seek tasks Y N back to work/ schedule review Y push back, get clarification based on what’s happening in the design
  26. We should always give actionable feedback to one another. —

    Every good designer, ever
  27. “This part of the design makes me feel tension because…”

  28. “This makes me feel uneasy.” That’s some poopy feedback, pal!

  29. I’m not your therapist.

  30. “ The new Netflix logo’s only real crime is that

    it has no excuse to exist. ” — Mark Wilson, Senior Writer at Design Co.
  31. Chris needs a visual design vocabulary

  32. words words words words words words words words words words

    words words
  33. ? What are elements? What are principles? How do they

    work together?
  34. Element

  35. Element Principle Principle Principle Principle Principle Principle

  36. Elements Principles The things that make up a design What

    we do with those elements
  37. Elements Principles The things that make up a design What

    we do with those elements Line Shape Size Texture Color Typography Balance Proximity Alignment Repetition Contrast Space
  38. Elements Principles The things that make up a design What

    we do with those elements Line Shape Size Texture Color Typography Balance Proximity Alignment Repetition Contrast Space
  39. None
  40. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space ELEMENTS
  41. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space LINE
  42. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  43. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Vertical Horizontal Diagonal Contour Actual
  44. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Vertical Horizontal Diagonal Contour Implied
  45. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  46. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  47. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  48. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  49. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space SHAPE
  50. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  51. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  52. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  53. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  54. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  55. None
  56. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  57. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Name! That! Circle!
  58. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space AT&T Pepsi Pac-Man Target Timberland Marriott CBS Radio Shack Texaco
  59. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space SIZE
  60. Size The simple relationship of the area occupied by one

    shape to that of another.
  61. Size The simple relationship of the area occupied by one

    shape to that of another.
  62. None
  63. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space TEXTURE
  64. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  65. None
  66. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  67. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  68. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space COLOR
  69. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  70. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space The color wheel illustrates the chromatic scale
  71. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Analogous
  72. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Monochromatic
  73. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Complementary (Clash)
  74. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Split Complementary
  75. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Triadic
  76. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space TYPOGRAPHY
  77. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space A typeface is a chair — Stephen Coles
  78. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space New Year Greeting Card Herb Lubalin, Tom Carnase Egg Arne Jacobsen, 1958 Slide inspired by Stephen Cole’s 2013 TYPO talk, “A Typeface is a Chair”.
  79. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Slide inspired by Stephen Cole’s 2013 TYPO talk, “A Typeface is a Chair”. A lounge chair doesn’t work at the dining table. Papyrus doesn’t work on a business letter.
  80. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space “Are there too many typefaces here?”
  81. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space “The H4 looks too similar to the H3.”
  82. It’s trial and error Slab Display Thin

  83. We crave uniformity

  84. But we hate being bored

  85. Element

  86. Principle Principle Principle Principle Principle Principle

  87. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space PRINCIPLES
  88. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space BALANCE
  89. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Symmetrical Balance
  90. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Asymmetrical Balance
  91. None
  92. None
  93. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space PROXIMITY
  94. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  95. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  96. None
  97. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Marvel Characters Wolverine Spiderman Venom Captain America Iron Man Thor The Hulk DC Characters Superman Batman Green Arrow Wonder Woman The Flash Green Lantern Image Comics Characters Spawn Warblade The Darkness Savage Dragon SuperPatriot
  98. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Marvel Characters Wolverine Spiderman Venom Captain America Iron Man Thor The Hulk DC Characters Superman Batman Green Arrow Wonder Woman The Flash Green Lantern Image Comics Characters Spawn Warblade The Darkness Savage Dragon SuperPatriot Marvel Characters Wolverine Spiderman Venom Captain America Iron Man Thor The Hulk DC Characters Superman Batman Green Arrow Wonder Woman The Flash Green Lantern Image Comics Characters Spawn Warblade The Darkness Savage Dragon SuperPatriot
  99. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space Marvel Characters Wolverine Spiderman Venom Captain America Iron Man Thor The Hulk DC Characters Superman Batman Green Arrow Wonder Woman The Flash Green Lantern Image Comics Characters Spawn Warblade The Darkness Savage Dragon SuperPatriot Marvel Characters Wolverine Spiderman Venom Captain America Iron Man Thor The Hulk DC Characters Superman Batman Green Arrow Wonder Woman The Flash Green Lantern Image Comics Characters Spawn Warblade The Darkness Savage Dragon SuperPatriot Marvel Characters Wolverine Spiderman Venom Captain America Iron Man Thor The Hulk DC Characters Superman Batman Green Arrow Wonder Woman The Flash Green Lantern Image Comics Characters Spawn Warblade The Darkness Savage Dragon SuperPatriot
  100. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space ALIGNMENT
  101. None
  102. None
  103. None
  104. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space REPETITION
  105. None
  106. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space CONTRAST
  107. None
  108. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space • Pattern: Intricate vs. No pattern • Edge: Hard edges vs. Soft edges • Value: Dark, middle and light values • Intensity: Pure colors vs. muted colors • Temperature: Cool vs. Warm • Texture: Textured vs. Smooth • Shape: Organic shapes vs. Geometrical • Size: Large vs. Small Types of Contrast
  109. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  110. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space
  111. None
  112. None
  113. None
  114. Elements Line Shape Size Texture Color Typography Principles Balance Proximity

    Alignment Repetition Contrast Space SPACE
  115. None
  116. None
  117. None
  118. None
  119. None
  120. VISUAL INVENTORY

  121. VISUAL INVENTORY • Exposes inconsistencies in a current system •

    Provides proof that cohesion is needed • Deconstruction makes me more aware of what components I’m designing for
  122. None
  123. None
  124. None
  125. None
  126. Photoshop, Evernote, Skitch. Pretty much whatever you prefer.

  127. None
  128. None
  129. STYLE TILES

  130. LISTENING

  131. LISTENING • Gather adjectives • Ask questions • Get the

    client to talk about what their product does
  132. STORIES BUILD RELATIONSHIPS

  133. None
  134. “Large blocks of color complicate the palette.” “Dark UI is

    hard to read.”
  135. ORGANIZING TILES

  136. • Color • Typography • Texture • Form and Button

    Styles • Image Treatments (like borders & corner radius) ORGANIZING TILES
  137. THINGS ARE GETTING SKETCHY

  138. •Identify sketches that represent main components •Pick at least 2-3

    that you feel are the strongest examples •Each board uses the same patterns but treats elements individually
  139. Sketches

  140. Patterns

  141. None
  142. None
  143. None
  144. BE ADVENTUROUS

  145. PERSONIFY

  146. Sophisticated and Contemporary Bold & Contrast Driven! LIGHT &2NC[HWN Dark

    & Vivid
  147. Some parting thoughts…

  148. Elements and principles help to frame critiques. Naming an element

    and describing how it’s being treated is a better use of time that creating several mockups that address a feeling.
  149. Visual inventories and Style Tiles immerse us in design systems.

    The ability to see how principles work with elements helps us to recognize inconsistencies.
  150. You’ve got the tools and the talent…

  151. None
  152. None
  153. None
  154. None