Visual Design Principles 2018
1 like118 views
The document discusses visual design principles that leverage our innate pattern recognition abilities to enhance comprehension. Key factors include color, size, proximity, and similarity, which shape how we perceive and interpret visual data. It emphasizes the importance of using appropriate foundation and charting colors to effectively convey information without distraction.
Visual Design Principles 2018
- 1. Visual Design Principles Understanding Our Visual Brain and Designing for Ultimate Impact
- 3. We’re wired to recognize patterns.
- 4. What’s the pattern here? Is there more than one?
- 5. We recognized this pattern of three repeating colors in three column sets as one.
- 6. And when we create row sets by changing spacing, we change the meaning of the visual pattern.
- 7. And when we create row sets by changing spacing, we change the meaning of the visual pattern.
- 8. We rely on several different factors to give us ideas about what we see.
- 10. SHAPE
- 11. SIZE
- 18. This data set breaks a fairly consistent pattern.
- 20. Proximity: a simple grouping principle that gives us clues about the set.
- 21. Proximity + Color: now our set begins to take on more complex meaning. The groups are subdivided.
- 22. Proximity + Color + Size: Size now tells us even more about our data sets. Size equates to volume or importance.
- 23. Similarity all squares all same size
- 24. Similarity - ?
- 25. Complex Similarity Make your statement.
- 29. At the core, you don’t want your foundation to detract from the data story.
- 30. Charting colors can be bolder
- 31. Charting colors can be bolder
- 32. But try to keep your palette tight. 6-10 colors.
- 35. NO! NO! NO!
- 36. In the interaction of colors - tricks are played.
- 37. The inner blocks are exactly the same hue and depth. Go back and look again.
- 38. Gradients play multiple tricks on our eyes.
- 39. The grey bar is the same color left to right. The gradient made it look darker on the left.
- 42. Color Meaning
- 43. STOP! GO! “Yes, I understand this reference” says most every user in the history of visual communication.
- 44. GO! STOP! “WAIT! WHAT???” says most every user in the history of visual communication.
- 45. Key Point: What is our CONTEXT?
- 47. $35,736 27% $35,736 8% Context is Sales We’re using a shape metaphor - the triangle… And color - red to denote bad, green to denote good, to provide our user with instant recognition of a condition.
- 50. WRAP UP We are visual thinkers and learners •Color •Size •Proximity •Similarity These are the visual cues that allow us to understand what we’re seeing.