Design for Non-Designers from a Non-Designer

1318668b99b2d5a3900f3f7758763a69?s=47 Jay Harris
November 19, 2019

Design for Non-Designers from a Non-Designer

Elegant design requires talent, but talent is not a prerequisite for avoiding bad design. If you lack artistic touch and prefer rules and logic over the ethereal art form, the fundamental tenets of composition can enable you to apply Design as a programming paradigm. Spend an hour with a coder learning the logic of design—hacking pixels instead of bits—and free yourself of your excuse for horrible designs.

1318668b99b2d5a3900f3f7758763a69?s=128

Jay Harris

November 19, 2019
Tweet

Transcript

  1. #nonDesigners D E S I G N F O R

    A N O N - D E S I G N E R F R O M A N O N - D E S I G N E R @ j a y h a r r i s
  2. ! "

  3. why ?

  4. design recognize the purpose of

  5. fundamentals

  6. unity

  7. cohesion structure through

  8. None
  9. None
  10. cohesion style through

  11. None
  12. TYPEFACE

  13. None
  14. None
  15. contrast

  16. recognition instant of important visual elements

  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. Nunc bibendum, urna quis cursus vestibulum, neque leo vehicula leo,

    id pellentesque nulla dolor in tellus. Morbi facilisis laoreet odio sagittis interdum. Phasellus ut nisi sit amet leo pharetra gravida id eu urna. Nunc bibendum, urna quis cursus vestibulum, neque leo vehicula leo, id pellentesque nulla dolor in tellus. Morbi facilisis laoreet odio sagittis interdum. Phasellus ut nisi sit amet leo pharetra gravida id eu urna.
  25. None
  26. None
  27. alignment

  28. location association based on

  29. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.
  30. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.
  31. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.
  32. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.
  33. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Nulla sed auctor nibh. Nulla nulla dui, porttitor id euismod nec, vestibulum nec elit. Morbi nulla lorem, suscipit id orci at, elementum cursus orci. Etiam bibendum metus elit, eget efficitur sapien dictum ut. Praesent sollicitudin nec turpis nec semper. Donec imperdiet convallis pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis laoreet purus, ac lobortis neque ullamcorper id. Etiam et diam varius, pretium justo euismod, placerat massa. Curabitur porta nulla id nisi sollicitudin consectetur. Praesent semper sapien odio, vel mattis justo posuere a. Donec erat lorem, egestas id diam nec, volutpat interdum purus. Phasellus pulvinar nisi vitae sodales rhoncus. In hac habitasse platea dictumst. Vestibulum fermentum, purus et gravida bibendum.
  34. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.
  35. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.
  36. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.
  37. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.
  38. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.
  39. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc,

    eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis Nunc mattis
  40. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc,

    eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis Nunc mattis
  41. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc,

    eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis Nunc mattis
  42. proximity

  43. meaning location based on

  44. interpretation influences of data

  45.  € €  € €  interpretation influences of

    relationships
  46. € € € € € € € € € €

    € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € € interpretation influences of flow
  47. predictable inconsistant random

  48. grouped isolated consolidated

  49. hierarchy

  50. None
  51. primary idea secondary idea secondary idea primary idea secondary idea

    secondary idea page title don’t make it bad take a sad song make it better don’t let me down you have found her go and get her hey jude
  52. whitespace

  53. congestion

  54. isolation

  55. color

  56. None
  57. vs

  58. vs

  59. None
  60. None
  61. None
  62. MONOCHROME

  63. ANALOGOUS

  64. COMPLEMENTARY

  65. SPLIT COMPLEMENTARY

  66. TRIADIC

  67. TETRADIC

  68. None
  69. psychology OF COLOR

  70. psychology OF COLOR

  71. accessibility OF COLOR

  72. colorblind

  73. protan #FF99CC V. #0099CC

  74. protan #FF99CC V. #0099CC

  75. deutan #FFCC66 V. #FF6666

  76. deutan #FFCC66 V. #FF6666

  77. tritan #FF99FF V. #FF9900

  78. tritan #FF99FF V. #FF9900

  79. typeface

  80. classification

  81. serif

  82. serif SERIF

  83. serif SERIF SERIF SERIF SERIF

  84. serif STRESS THICK / THIN SERIF

  85. sans serif

  86. script

  87. decorative

  88. conflict

  89. contrast

  90. texture

  91. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi cursus turpis vitae tortuur vulputate arcu Phasellus accumsan ipsum primis in faucibus orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi cursus turpis vitae tortuur vulputate arcu. Phasellus accumsan. Curabitur ligula sapien, tincidunt n o n , e u i s m o d v i t a e , p o s u e r e imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi cursus turpis vitae tortuur vulputate arcu. Phasellus accumsan ipsum primis in faucibus orci luctus venenatis condimentum.
  92. color

  93. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

    Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi cursus turpis vitae tortuur vulputate. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere i m p e r d i e t , l e o . M a e c e n a s malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi cursus turpis vitae tortuur vulputate. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi cursus turpis vitae tortuur vulputate.
  94. base font

  95. restraint

  96. composition

  97. focal point

  98. None
  99. None
  100. None
  101. group information

  102. strong alignments

  103. page title MENU | MENU | MENU | MENU heading

    Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
  104. page title MENU | MENU | MENU | MENU heading

    Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
  105. page title MENU | MENU | MENU | MENU heading

    Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
  106. repetition

  107. contrast

  108. THIS IS NOT CONTRAST

  109. THIS IS C O N T R A S T

  110. follow the rules

  111. further reading

  112. slide:ology

  113. non-designers design book

  114. remember N E X T S T E P S

  115. practice the concepts

  116. make awesome

  117. @ j a y h a r r i s

    # n o n D e s i g n e r s jay@aranasoft.com