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

1. DESIGN
Leveling Up Your
Nick Floro
Ski l l s wit h th e F u n d a mentals

2. creating experiences
engage
observation
mistakes create
think
involve
participate

3. appsactivity
scenarios
games
platform
virtual
course
video
search
audio
classroom
learning plan
creating experiences
content

4. you can enhance with design

5. building blocks of design

6. this can look a little scary

7. understanding = better design

8. lines

9. lines
connects 2 or
more points

10. lines
connects 2 or more points

11. lines
connects 2 or more points

12. lines
text can add emphasis

13. lines
can divide or organize content

14. lines guides the viewers eye

15. lines
color
size
texture

16. lines
color
size
texture

17. lines
color
size
texture

18. lines
color
size
texture

19. lines
color
size
texture

20. lines
color
size
texture

21. lines
color
size
texture

22. lines
color
size
texture

23. lines
create a pattern

24. lines
create a pattern

25. lines
create a pattern

30. shape
height + width =

31. shape
geometric

32. shape
geometric

33. shape
geometric

34. shape
geometric

35. shapenatural

36. shapenatural

37. shapenatural

38. shape
abstract

39. shape
abstract

40. shape
abstract

41. shape
abstract

42. shape
abstract

47. shape
simple illustrations
add interest to your work
organize content

48. light, shadow & perspective
creates the illusion
form

49. form

50. form

51. form

52. bouncing ball becomes a circle

53. balance
equal distribution of weight

54. equal distribution of weight
balance

55. equal distribution of weightbalance

56. typography

57. typography

58. typography

59. typography

60. typography

61. typography

62. typography

63. typography

64. serif

65. sans serif

66. typography
kerning is the space between letters

67. 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.

68. What the Font

69. fonts.google.com

70. fonts.adobe.com

71. texture
the feel, appearance, or consistency
of a surface or a substance.

72. texture

73. texture

74. texture

75. texture

76. texture

77. Used to generate emotions,
define importance, create
visual interest…
color

78. color

79. color

80. sizeHow small or large you
define an object. Use to
define importance, create
visual interest in a design,
attract attention and more.

81. sizeHow small or large you
define an object. Use to
define importance, create
visual interest in a design,
attract attention and more.

82. sizeHow small or large you
define an object. Use to
define importance, create
visual interest in a design,
attract attention and more.
stop

83. space
The area around or between
elements in a design. Can
be used to separate or
group information.

84. space
The area around or between
elements in a design. Can
be used to separate or
group information.

85. space
The area around or between
elements in a design. Can
be used to separate or
group information.

86. harmonywhen we get all the pieces to work together

87. it’s your goal.

88. Jazz
Introduction to

90. Activity Content
Nav
Banner
Secondary Nav

98. Rule of thirds

99. Rule of thirds

100. Rule of thirds

101. Rule of thirds

102. Rule of thirds

103. Rule of thirds

104. Rule of thirds

105. Rule of thirds

106. keep it simple

107. use in moderation

108. just enough and never to much

109. what is a bad experience

112. what is a good experience

115. how can you help the learner?

116. find explore share update refresh
how can you help the learner?

117. How to kickstart amazing experiences.
DEFINE DESIGN DEVELOP DELIVER
FEEDBACK

118. de•fine
to determine or identify the
essential qualities or meaning

119. design for the user

121. What is the challenge?

122. understand your audience

123. What are the options?

124. ecosystem
personalization
feedback
analytics
predictive next
steps
integrations
informal
performance
support
assessment
content
sensors
simulation

125. test ideas

127. analyze

132. feedback

133. listen

134. stakeholders users management

135. ask questions

136. document

137. paper.dropbox.com

138. paper.dropbox.com

139. advocate for the user

140. present

141. analyze patterns
wufoo.com
google.com/forms
survey monkey typeform

142. “You keep using that word. I do
not think it means what you
think it means.”
~ -Inigo Montoya The Princess Bride (1987)

143. de•sign
makes everything better

144. Is About People

145. It Solves Problems

146. simplify
content
sketch
feedback loop
design
feedback loop
changes
feedback loop
launch
feedback loop
evolve

147. design for kids

148. take cues from everywhere

154. FLIPBOARD.COM

155. FLIPBOARD.COM

156. usability > intuitive navigation and information design > user experience

157. bottle tour

158. start background studentsteacher resultsfeedback assignments

159. de•vel•op
work out the ideas

160. design more

161. 8-10 documents per author
29 Authors
700+ pages of content

162. Wireframes

163. 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

168. collaborate

171. office lens

172. office lens

173. This

174. This

175. Collaborate on the Cloud with Note Apps

178. make a difference

179. Experiment
experiment

180. Resources

181. abookapart.com

182. muz.li

183. invisionapp.com

184. sidebar.io

185. Capture & Analyze

186. 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

187. lrnchat.org

188. MobileAppsforLearning.com

189. PrototypingforLearning.com

190. 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