Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

022419 Leveling Up Your Design Skills with Fundamentals #TRGConf

80 views

Published on

We are often challenged to wear multiple hats and do everything from project management to delivering a final course. With tight timeframes, lack of resources and reducing budgets we struggle for time to grow our skills. In this session, we will explore how to level up our design skills and learn how using five fundamentals: grids, typography, imagery, media, and color to significantly improve our learners experiences: Learn how to:

Fundamentals of Design
Balance
Color
Lines
Shapes
Space
Harmony
Use fonts for visual treatments.
Improve the user experience
Best & Worse Case Examples

Published in: Education
  • Be the first to comment

022419 Leveling Up Your Design Skills with Fundamentals #TRGConf

  1. 1. DESIGN Leveling Up Your Nick Floro Ski l l s wit h th e F u n d a mentals
  2. 2. creating experiences engage observation mistakes create think involve participate
  3. 3. appsactivity scenarios games platform virtual course video search audio classroom learning plan creating experiences content
  4. 4. you can enhance with design
  5. 5. building blocks of design
  6. 6. this can look a little scary
  7. 7. understanding = better design
  8. 8. lines
  9. 9. lines connects 2 or more points
  10. 10. lines connects 2 or more points
  11. 11. lines connects 2 or more points
  12. 12. lines text can add emphasis
  13. 13. lines can divide or organize content
  14. 14. lines guides the viewers eye
  15. 15. lines color size texture
  16. 16. lines color size texture
  17. 17. lines color size texture
  18. 18. lines color size texture
  19. 19. lines color size texture
  20. 20. lines color size texture
  21. 21. lines color size texture
  22. 22. lines color size texture
  23. 23. lines create a pattern
  24. 24. lines create a pattern
  25. 25. lines create a pattern
  26. 26. shape height + width =
  27. 27. shape geometric
  28. 28. shape geometric
  29. 29. shape geometric
  30. 30. shape geometric
  31. 31. shapenatural
  32. 32. shapenatural
  33. 33. shapenatural
  34. 34. shape abstract
  35. 35. shape abstract
  36. 36. shape abstract
  37. 37. shape abstract
  38. 38. shape abstract
  39. 39. shape simple illustrations add interest to your work organize content
  40. 40. light, shadow & perspective creates the illusion form
  41. 41. form
  42. 42. form
  43. 43. form
  44. 44. bouncing ball becomes a circle
  45. 45. balance equal distribution of weight
  46. 46. equal distribution of weight balance
  47. 47. equal distribution of weightbalance
  48. 48. typography
  49. 49. typography
  50. 50. typography
  51. 51. typography
  52. 52. typography
  53. 53. typography
  54. 54. typography
  55. 55. typography
  56. 56. serif
  57. 57. sans serif
  58. 58. typography kerning is the space between letters
  59. 59. Line spacing is the space between each line in a paragraph. Apps allow you too customize the line spacing to be single spaced (one line high), double spaced (two lines high), or any other amount you want.
  60. 60. What the Font
  61. 61. fonts.google.com
  62. 62. fonts.adobe.com
  63. 63. texture the feel, appearance, or consistency of a surface or a substance.
  64. 64. texture
  65. 65. texture
  66. 66. texture
  67. 67. texture
  68. 68. texture
  69. 69. Used to generate emotions, define importance, create visual interest… color
  70. 70. color
  71. 71. color
  72. 72. sizeHow small or large you define an object. Use to define importance, create visual interest in a design, attract attention and more.
  73. 73. sizeHow small or large you define an object. Use to define importance, create visual interest in a design, attract attention and more.
  74. 74. sizeHow small or large you define an object. Use to define importance, create visual interest in a design, attract attention and more. stop
  75. 75. space The area around or between elements in a design. Can be used to separate or group information.
  76. 76. space The area around or between elements in a design. Can be used to separate or group information.
  77. 77. space The area around or between elements in a design. Can be used to separate or group information.
  78. 78. harmonywhen we get all the pieces to work together
  79. 79. it’s your goal.
  80. 80. Jazz Introduction to
  81. 81. Activity Content Nav Banner Secondary Nav
  82. 82. Rule of thirds
  83. 83. Rule of thirds
  84. 84. Rule of thirds
  85. 85. Rule of thirds
  86. 86. Rule of thirds
  87. 87. Rule of thirds
  88. 88. Rule of thirds
  89. 89. Rule of thirds
  90. 90. keep it simple
  91. 91. use in moderation
  92. 92. just enough and never to much
  93. 93. what is a bad experience
  94. 94. what is a good experience
  95. 95. how can you help the learner?
  96. 96. find explore share update refresh how can you help the learner?
  97. 97. How to kickstart amazing experiences. DEFINE DESIGN DEVELOP DELIVER FEEDBACK
  98. 98. de•fine to determine or identify the essential qualities or meaning
  99. 99. design for the user
  100. 100. What is the challenge?
  101. 101. understand your audience
  102. 102. What are the options?
  103. 103. ecosystem personalization feedback analytics predictive next steps integrations informal performance support assessment content sensors simulation
  104. 104. test ideas
  105. 105. analyze
  106. 106. feedback
  107. 107. listen
  108. 108. stakeholders users management
  109. 109. ask questions
  110. 110. document
  111. 111. paper.dropbox.com
  112. 112. paper.dropbox.com
  113. 113. advocate for the user
  114. 114. present
  115. 115. analyze patterns wufoo.com google.com/forms survey monkey typeform
  116. 116. “You keep using that word. I do not think it means what you think it means.” ~ -Inigo Montoya The Princess Bride (1987)
  117. 117. de•sign makes everything better
  118. 118. Is About People
  119. 119. It Solves Problems
  120. 120. simplify content sketch feedback loop design feedback loop changes feedback loop launch feedback loop evolve
  121. 121. design for kids
  122. 122. take cues from everywhere
  123. 123. FLIPBOARD.COM
  124. 124. FLIPBOARD.COM
  125. 125. usability > intuitive navigation and information design > user experience
  126. 126. bottle tour
  127. 127. start background studentsteacher resultsfeedback assignments
  128. 128. de•vel•op work out the ideas
  129. 129. design more
  130. 130. 8-10 documents per author 29 Authors 700+ pages of content
  131. 131. Wireframes
  132. 132. Wireframes Dove Glossary Anthology MadLibs Montages Metrics Flash Learning Tools Study Questions Biblio Maker Poetry Machine Timeline Flashcards Lit Discussions WebIntro Help Home Glaspell Wilde Kafka Twain Gilman Melville Hughes Hurston Whitman Brooks Atwood Bradstreet Hawthorne O’Conner Wilson Williams Dickinson Frost Joyce Plath Douglass Poe Chopin Isben Sophocles Shakespeare Donne Wordsworth Sort Genre PoetryFiction Drama Non-FictionAll
  133. 133. collaborate
  134. 134. office lens
  135. 135. office lens
  136. 136. This
  137. 137. This
  138. 138. Collaborate on the Cloud with Note Apps
  139. 139. make a difference
  140. 140. Experiment experiment
  141. 141. Resources
  142. 142. abookapart.com
  143. 143. muz.li
  144. 144. invisionapp.com
  145. 145. sidebar.io
  146. 146. Capture & Analyze
  147. 147. Creative Inspiration where find it? twist.elearningguild.net sidebar.io fastcodesign.com demofest muz.li abookapart.com shutterstock.com themeforest.net UIjar.com refind.comflipboard.comfeedly.com https://uijar.com
  148. 148. lrnchat.org
  149. 149. MobileAppsforLearning.com
  150. 150. PrototypingforLearning.com
  151. 151. Nick Floro sealworks interactive studios nick@sealworks.com www.sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro thank you

×