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.

Transcript

1. CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission chuck@eightshapes.com @chuckborowicz
2. KERNING MATTERS
3. KERNING MATTERS
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
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
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.
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
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
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
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
104. Elements Line Shape Size Texture Color Typography Principles Balance Proximity Alignment Repetition Contrast Space REPETITION
106. Elements Line Shape Size Texture Color Typography Principles Balance Proximity Alignment Repetition Contrast Space CONTRAST
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
114. Elements Line Shape Size Texture Color Typography Principles Balance Proximity Alignment Repetition Contrast Space SPACE
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
126. Photoshop, Evernote, Skitch. Pretty much whatever you prefer.
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
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
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…