The document discusses contrast in design and provides examples of how to use contrast effectively. It defines contrast as the difference between elements and explains that contrast is important for emphasis and directing user attention. It then outlines seven methods for applying contrast: size, color, value, shape, position, movement, and texture. For each method, examples are given to illustrate high and low contrast scenarios. The document concludes by recommending combining different contrast methods and also using them for similarity in design.

1. Constrast in design
Vu Phuong Hoang
2015/08

2. Content
1. What is contrast?
2. Why do we need contrast?
3. How to use contrast?
1. Size
2. Color
3. Value
4. Shape
5. Position
6. Movement
7. Texture

3. 1. What is contrast?
What do you see?

4. 1. What is contrast?
2 black circles!

5. 1. What is contrast?
How about this?

6. 1. What is contrast?
BIG RED CIRCLE small green circle

7. 1. What is contrast?
• It’s basically the difference.
• Noticing difference is human's survival mechanism
• to quick differentiate a friend from predators
• That’s why it’s so powerful.
• Contrast attracts attention.

8. 2. Why do we need contrast?
• To emphasize an element among others.
• To help users noticing the optimal choice.
• They just want “good enough” options, remember?
• But there’re good and bad contrasts.

9. Too low contrast doesn’t work!
CAN YOU READ THIS?
how about this?

10. Too low contrast doesn’t work!
CAN YOU READ THIS?
how about this?

11. Too high contrast doesn’t work, either!

12. Too high contrast doesn’t work, either!
My
episode
was
banned :(

13. 3. How to use contrast?
1. Size
2. Color
3. Value
4. Shape
5. Position
6. Movement
7. Texture

14. 3.1. Size in contrast

15. 3.1. Size in contrast

17. 3.1. Size in contrast

18. 3.2. Color in contrast

19. 3.2. Color in contrast

20. 3.2. Color in contrast

21. 3.2. Color in contrast

22. 3.2. Color in contrast

23. 3.2. Color in contrast

24. 3.3. Contrast value

25. 3.3. Contrast value

26. 3.3. Contrast value

27. 3.3. Contrast value

28. 3.3. Contrast value
VS

29. 3.3. Contrast value

30. 3.3. Contrast value

31. 3.3. Contrast value

32. 3.4. Shape in contrast

33. 3.4. Shape in contrast

34. 3.4. Shape in contrast

35. 3.4. Shape in contrast

36. 3.5. Position in contrast

37. 3.5. Position in contrast

38. 3.5. Position in contrast

39. 3.6. Movement in contrast

40. 3.6. Movement in contrast

41. 3.6. Movement in contrast

42. 3.6. Movement in contrast

43. Texture in contrast

44. Texture in contrast

45. 1 property for contrast is not enough

46. Combine them for good contrast!

47. Combine them for good contrast!

48. Combine them for good contrast!

49. Use them not just for contrast!
For similarity, too!

50. Any questions?