Improving Design to ENGAGE Your Audience Nick Floro [email protected]Twitter.com/NickFloro Are you on Twitter? Why not? Join today and participate in the conference backchannel #lscon Design Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 1 of 166
Engaging learners is one of the main goals of instructional design. However, it’s becoming increasingly challenging to design and build engaging learning programs that work in all of the different places where learning takes place. In this session you will focus on strategies and techniques to improve your design. You will explore how sketching to prototyping can greatly enhance the effectiveness of learning design and development. You will also discover the latest techniques for mobile and desktop delivery and how to utilize animation and motion in communicating with your audience.
In this session, you will learn: • Basic concepts to good design • Resources and recommendations on how to further enhance your design skills • Three rapid prototyping techniques to test your designs with your audience • Using responsive design for mobile and desktop learning
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Learning Solutions 2014 | eLearning Guild 03/21/14 52 of 166
Wireframes
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 53 of 166
Design• Focus on audience
• Content is key
• Transparent interface
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 54 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 55 of 166
Text
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 56 of 166
Text1. Create Text2. Make a selection3. Invert select4. Save alpha channel5. Deselect6. Load Alpha Channel7. Load Color8. Offset9. Apply Blur10. Reposition11. Save12. If the copy changed,
start over
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 57 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 58 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 59 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 60 of 166
How should we
Design?
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 61 of 166
Focus on the
Audience1
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 62 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 63 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 64 of 166
is the keyContent
2
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 65 of 166
Transparent
Interface3
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 66 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 67 of 166
Typography• Inherently interesting content
• Multilevel readership that encourages scanning
• Headlines that make me want to know more
• Subheads that complete the story
• Intriguing captions
• Well-built text
– Alex White, Thinking in Type
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 68 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 69 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 70 of 166
Layout & Grid
“Information presented with clear and logically set out titles, subtitles, texts, illustrations, and captions will not only be read more quickly and easily but the information will also be better understood and retained in memory. This is a scientifically proved fact and the designer should bear it in mind constantly.”
Josef Müller-Brockman, Grid systems in graphic design
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 71 of 166
Navigation
Banner
Content
Interactive Activity
Secondary Nav if needed
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 72 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 73 of 166
Navigation
Banner
Content
Interactive Activity
Secondary Nav if needed
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 74 of 166
960.gs
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 75 of 166
Technology
• HTML5
• CSS
• Javascript
• Python
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 76 of 166
Just for Me
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 77 of 166
Just for Me • Younique - Mini Campaign
• 95% buyers customized the vehicle
• 50% name the car
• Starbucks - Customize your cup• 19,000 ways to order your coffee
• Car Industry• 1995 - 910 cars
• 2003 - 1314 cars
Younique - Mini Campaign
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 78 of 166
Just for Me • Younique - Mini Campaign
• 95% buyers customized the vehicle
• 50% name the car
• Starbucks - Customize your cup• 19,000 ways to order your coffee
• Car Industry• 1995 - 910 cars
• 2003 - 1314 cars
Customize Your Cup
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 79 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 80 of 166
Design: Keep it Simple
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 81 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 82 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 83 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 84 of 166
Keep it Simple
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 85 of 166
Every click/touch should meet a user’s expectations and lead them
toward a goal.
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 86 of 166
Remember User Goals Users typically come to a site
with a goal in mind
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 87 of 166
Remember User Goals Users typically come to a site
with a goal in mind
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 88 of 166
Emulating common GUI elements increase usability
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 89 of 166