This document provides an overview of basic design principles for creating visual content that humans will interact with. It discusses principles like contrast, repetition, alignment, proximity, simplicity, white space, consistency and visual hierarchy. It also covers topics like layout, color, typography, images, icons and getting inspiration from other designers. The document is intended as a quick reference guide for basic design concepts.

2. 2
• Designer of things 20+ years
• Obsessed with typography
• Love teaching about design

3. “If you have ever participated
in the creation of something
that humans would use,
read, or otherwise interact
with, then you have done
design work.”
Jason Shen

4. “Design may be
described as
creativity deployed
to a specific end.”
Sir George Cox

5. First, some questions

6. Four Basic Principles
• Contrast
• Repetition
• Alignment
• Proximity
Source: The Non-Designer’s Design Book by Robin Williams

7. http://paper-leaf.com/blog/2012/10/principles-of-design-quick-reference-poster/

8. http://paper-leaf.com/blog/2012/10/principles-of-design-quick-reference-poster/

9. http://paper-leaf.com/blog/2012/10/principles-of-design-quick-reference-poster/

10. http://paper-leaf.com/blog/2012/10/principles-of-design-quick-reference-poster/

11. Additional Principles
• Simplicity
• White Space
• Consistency
• Scale
• Visual Hierarchy

12. Simplicity
giphy.com

13. Ausman101 on DeviantArt

15. Consistency
uxpassion.com

16. canva.com/templates/

17. 17
designschool.canva.com

18. 18
Never underestimate the
importance of visual hierarchy
coetail.com

19. Putting The Pieces Together
• Layout
• Color
• Typography
• Photos & Images
• Icons

20. graphicdesign.com/article/working-with-grid-systems/
Layout

21. sixrevisions.com

22. imamuseum.org

23. w3.org

24. serif.com

25. Color
giphy.com

26. 26

28. Hex Colors
• Annotation for the combination of Red,
Green, and Blue color values (RGB)
• HEX values are specified as 3 pairs of two-
digit numbers, starting with a # sign

29. 29
chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka

30. colourlovers.com

31. design-seeds.com

32. coolors.co

33. color.adobe.com/create/color-wheel/

34. palettab.com

35. palettab.com

36. Typography
giphy.com

37. 37
webdesignerdepot.com

38. 38
tomgabor.com

39. Type Tips
• Limit the number of typefaces
• Match the typeface to your focus
• Stay consistent
spyrestudios.com

40. 40
fontpair.co

41. 41
typeconnection.com

42. 42
typ.io

43. fontsquirrel.com/fonts/list/hot_web

44. dafont.com

45. https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en

46. google.com/fonts

47. typekit.com

48. Photos & Images
giphy.com

49. 49
The human brain processes visuals
60,000
times faster than text
dierk schaefer on Flickr

50. The Rule of Thirds
Wikimedia Commons

51. Images Size & Quality
• Physical Size*
• File Size
• Resolution
• File Type
* IMPORTANT

52. 52
pixlr.com
picmonkey.com
canva.com

53. photoshop.com/tools

54. 54
croppola.com

55. creativecommons.org

59. compfight.com

60. Beyond Stock Photography

61. stocksy.com

62. gratisography.com

63. deathtothestockphoto.com

64. creativemarket.com

65. Icons
thenounproject.com

66. Choosing Icons
Be creative
Don’t mix styles
Format/size is important
Give credit

67. thenounproject.com

68. iconfinder.com

69. “A designer knows he has
achieved perfection not
when there is nothing left
to add, but when there is
nothing left to take away.”
Antoine de Saint-Exupéry

70. Look Around. Get Inspired.
• Pay attention to what you
like about other sites
• Find & follow creative
curators on the web and
via social channels
• Listen to
recommendations
• Apply what you learn
emiliokuffer on Flickr

71. ed_needs_a_bicycle on Flickr

72. Nate Grigg on Flickr