Workshop at Le Wagon, Amsterdam

1. Intro to Visual Design
BY NICOLE SAIDY

2. @nicolesaidyIntro to Visual Design
What is visual design?

3. @nicolesaidyIntro to Visual Design
Visual design focuses on the
aesthetics of a site by strategically
implementing images, colors, fonts,
and other elements

4. @nicolesaidyIntro to Visual Design
The principles of design

5. @nicolesaidyIntro to Visual Design
1. Color
2. Typography
3. Imagery
4. Minimalism
5. Consistency

6. 1. Color

7. @nicolesaidyIntro to Visual Design
Color vocabulary

8. @nicolesaidyIntro to Visual Design

9. @nicolesaidyIntro to Visual Design
rgb(59, 89, 145)
#3B599B

10. @nicolesaidyIntro to Visual Design
Color wheel

11. @nicolesaidyIntro to Visual Design

12. @nicolesaidyIntro to Visual Design
Color schemes

13. Monochrome

14. Complementary

15. Analogous

16. @nicolesaidyIntro to Visual Design
Color psychology

17. @nicolesaidyIntro to Visual Design
Energy, danger,
attractive, passion
s
Red
s
Orange
Warm, less agressive,
fun, energy
Yellow
Warm, summertime,
eye-catching
Green
Growth, health, peace,
nature, environment

18. @nicolesaidyIntro to Visual Design
Blue
Trustworthy, professional,
refreshing, calm
Purple
Romance, luxury,
intimacy, success
Brown
Earthy, dirty, luxury,
fashion
Black
Luxury, prestige,
evil, strength

19. @nicolesaidyIntro to Visual Design
Tools and resources

20. Adobe Color CC

21. Coolors.co

22. colorsupplyyy.com

23. @nicolesaidyIntro to Visual Design
Do’s and don’ts

24. @nicolesaidyIntro to Visual Design
Don’t: use pure black
Pure black Almost black


25. @nicolesaidyIntro to Visual Design
Don’t: pair red and green

26. @nicolesaidyIntro to Visual Design
Don’t: use neon colors
Thisisannoying That’s better


27. Do: use colors for actions

28. Do: use subtle gradients

29. 2. Typography

30. @nicolesaidyIntro to Visual Design
The basics

31. @nicolesaidyIntro to Visual Design
Serif
Fancy, elegant, classy, refined

32. @nicolesaidyIntro to Visual Design
Sans-serif
Minimal, clean, modern, fresh

33. @nicolesaidyIntro to Visual Design
Script
Handwriting, display, handwritten, fancy

34. @nicolesaidyIntro to Visual Design
Shyletter spacing (tracking)
font size
line height
(leading)

35. @nicolesaidyIntro to Visual Design
Font pairing

36. @nicolesaidyIntro to Visual Design

37. @nicolesaidyIntro to Visual Design
fontpair.co

38. @nicolesaidyIntro to Visual Design
Do’s and don’ts

39. @nicolesaidyIntro to Visual Design
Big & Bold Title
Secondary subtitle Secondary subtitle
Big & Bold Title

Do: apply contrast

40. @nicolesaidyIntro to Visual Design
No white space applied
Lorem ipsum donec facilisis tortor ut
augue lacinia, at viverra est semper. Sed
sapien metus, scelerisque nec pharetra
id, tempor a tortor. Pellentesque non
dignissim neque.
White space applied
Lorem ipsum donec facilisis tortor ut
augue lacinia, at viverra est semper.
Sed sapien metus, scelerisque nec
pharetra id, tempor a tortor.
Pellentesque non dignissim neque.

Do: space things out

41. @nicolesaidyIntro to Visual Design

Don’t: use too many fonts

42. @nicolesaidyIntro to Visual Design

Don’t: put text over a busy image

43. 3. Imagery

44. @nicolesaidyIntro to Visual Design
People prefer images over text
37% of the population are visual learners

45. @nicolesaidyIntro to Visual Design
Shows how something is done

46. @nicolesaidyIntro to Visual Design
Conveys emotion

47. @nicolesaidyIntro to Visual Design
Helps better understand the idea

48. Make it come alive with background videos

49. @nicolesaidyIntro to Visual Design
Do’s and don’ts

50. @nicolesaidyIntro to Visual Design
Do: show face expressions

51. @nicolesaidyIntro to Visual Design
Don’t: use blurred backgrounds

52. @nicolesaidyIntro to Visual Design

Don’t: use stock photos
pexels.comistock.com

53. 4. Minimalism

54. @nicolesaidyIntro to Visual Design
LESS is MORE

55. @nicolesaidyIntro to Visual Design
White space

57. Increases focus

58. Organizes elements

59. Helps elements stand out

60. It doesn’t have to be white

61. @nicolesaidyIntro to Visual Design
Contrast

62. Size

63. Typography

64. Animation

65. Color

66. 6. Consistency

67. @nicolesaidyIntro to Visual Design
It only takes 50 milliseconds for
users to judge your website

68. Consistent interaction

69. Consistent language

70. Consistent UI elements

71. @nicolesaidyIntro to Visual Design
• Eliminates confusion
• Reduces learning
• Creates the brand

72. @nicolesaidyIntro to Visual Design

73. Design your own hero image

77. @nicolesaidyIntro to Visual Design
1. Get inspiration from awwwards.com or dribbble.com
2. Shop for fonts on fonts.google.com
3. Choose a color palette from coolors.co
4. Use Sketch or Figma for design
5. Browse pexels.com for images
Intro to Visual Design

78. @nicolesaidyIntro to Visual Design
bit.ly/ams-visual-design

79. Thanks!
nicolesaidy@gmail.com
@nicolesaidy