Post on 18-Oct-2014
description
Improving Designto ENGAGE Your Audience
Nick FloroNick@sealworks.comTwitter.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
Goals
goals
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 2 of 166
share
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 3 of 166
Experiment
experiment
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 4 of 166
Process
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 5 of 166
Resources
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 6 of 166
Understand Design.
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 7 of 166
It’s about communication and problem solving.
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 8 of 166
What is Design?Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 9 of 166
How it works.
www.apple.com/designed-by-apple/
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 10 of 166
Design + Technology
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 11 of 166
WARNINGThe following screens are not pretty and may cause adverse reactions.
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 12 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 13 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 14 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 15 of 166
How do you fix it?
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 16 of 166
3 Key Factors
1. Audience
2. Technology
3. Use
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 17 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 18 of 166
7 Questions to Define the Project
What is the goal?
What are the learning objectives?
Who is the audience and how will they use it?
What is the timetable?
Current technology or solution in place?
What is the budget?
Does the content exist?
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 19 of 166
Create a Road Map
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 20 of 166
User Interface | UI
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 21 of 166
User Interface | UI
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 22 of 166
User Experience | UX
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 23 of 166
What do they feel?
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 24 of 166
Content StrategyDesign Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 25 of 166
Content Strategy
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 26 of 166
Content Strategy
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 27 of 166
simplify.
write it down
cut in halfcut it again
breakcut & refine
then done
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 28 of 166
Sketching where ideas begin
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 29 of 166
Visual Thinking
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 30 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 31 of 166
Quick Prototyping Techniques
Tools:
• Fujitsu SCANSNAP – Scan direct to pdf– includes full Acrobat Pro
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 32 of 166
Prototyping test driving your idea
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 33 of 166
Paper by FiftyThree
Adobe IdeasEvernote Skitch
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 34 of 166
Tools:
• Wireframes– Keynote / PowerPoint
Quick Prototyping Techniques
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 35 of 166
keynotekungfu.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 36 of 166
Custom Template in Keynote
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 37 of 166
Adobe Acrobat
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 38 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 39 of 166
POP - Prototyping on Paper
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 40 of 166
balsamiq.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 41 of 166
Sketchy & iMockUps
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 42 of 166
teehanlax.com/tools/
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 43 of 166
Development: App or Web Delivery
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 44 of 166
Native App
• Faster performance
• Unique platform features
• Requires programming
• iOS / Android / Amazon
• Increased Costs per OS
AppWeb App
• Use web standards
• Easy to deploy & update
• Support all devices
• Faster development cycle
• Works everywhere
• Requires web connection
Web
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 45 of 166
Define
Design
Develop
Deliver
ProcessDesign Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 46 of 166
Responsive DesignDesign Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 47 of 166
getskeleton.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 48 of 166
twitter.github.io/bootstrap/
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 49 of 166
foundation.zurb.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 50 of 166
Pulse for iOS
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 51 of 166
WireframesStarting to Design Content
Design Nick Floro
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
Avoid Unnecessary Intro • Always offer users easy access
to content
• Bookmark location for quick return to content
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 90 of 166
Avoid Unnecessary Intro • Always offer users easy access
to content
• Bookmark location for quick return to content
Improve Usability
Remove Older Technology
Links to Materials
Adding Quiz Module
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 91 of 166
Avoid Unnecessary Intro • Always offer users easy access
to content
• Bookmark location for quick return to content
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 92 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 93 of 166
How do we find something on the web today?
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 94 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 95 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 96 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 97 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 98 of 166
mashup
web services
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 99 of 166
Everyone Creates/Publishes Content
Pictures
Video
Blog
Audio
3D Models
Multiplayer Environment
ePortfolios
Course Management System
Micro-blogging
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 100 of 166
Provide Logical Navigation • Always offer users easy access
to content
• Bookmark location for quick return to content
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 101 of 166
Provide Logical Navigation
Keep navigation visible
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 102 of 166
Design for Consistency
Consistency in user interface is the best way to improve your site's performance
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 103 of 166
Target Low-Bandwidth Users • Smaller the download, the
better
• Initial screen download should be no more than 100k, including all macromedia flash files, html and images
• Reducing download time - compression of graphics, audio and video
• Content Delivery Networks
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 104 of 166
Design for Accessibility • make your content available to
all users, including those with disabilities (508)
• highly descriptive Alternate Tags allow your content to be interpreted
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 105 of 166
Design for Flexibility
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 106 of 166
Design for Accessibility • make your content available to
all users, including those with disabilities
• highly descriptive Alternate Tags allow your content to be interpreted
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 107 of 166
Design for Accessibility • make your content available to
all users, including those with disabilities
• highly descriptive Alternate Tags allow your content to be interpreted
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 108 of 166
Testing
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 109 of 166
Test for Usability
• Have someone with fresh
eyes test drive your site to
make sure it accomplishes
both user goals and site
goals
• Survey
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 110 of 166
Test on Windows 8, 7, Vista, XP• Internet Explorer 6, 7, 8, 9, 10, 11
• Firefox 4.0, 10-13 +
• Chrome 15 - 19 +
Test on OS X− Safari 5 - 7+
− Firefox 20 - 23 +
− Chrome 25 - 33 +
Test on Mobile− iOS 4.x - 7.x
− Android 2.x - 4.x
− Windows 8
− Tablet vs Phone
− Portrait vs Landscape
Testing CodeDesign Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 111 of 166
Test for Usability
• Re-test the site each time
you make even small
changes
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 112 of 166
Quality Assurance:Use Cases
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 113 of 166
BrowserStack.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 114 of 166
MoreExamples
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 115 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 116 of 166
Scaling
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 117 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 118 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 119 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 120 of 166
WireframesDesigning the Possibilities
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 121 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 122 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 123 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 124 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 125 of 166
The New Look
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 126 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 127 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 128 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 129 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 130 of 166
Collaboration
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 131 of 166
Google Hangouts
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 132 of 166
GoogleDocs
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 133 of 166
Capture & Analyze
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 134 of 166
Using CoverFlow view and Preview of Graphics
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 135 of 166
Design Scrapbook: iPhoto | LittleSnapper
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 136 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 137 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 138 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 139 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 140 of 166
Design Engineering
• Workflow
• Flexibility
• Learning Objects
• Re-expression
• Experiment
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 141 of 166
Managing Expectations • Communication
• Review goals prior
• What works
• What doesn’t work
• Final Goal
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 142 of 166
Resources
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 143 of 166
Games
1. Play
2. Watch others play
3. Experiment
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 144 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 145 of 166
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 146 of 166
Resources
• Designing Interactions
• Bill Moggridge
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 147 of 166
Resources• Designing the Obvious:
A Common Sense Approach to Web Application Design
• Robert Hoekman Jr.
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 148 of 166
howconference.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 149 of 166
reflectorapp.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 150 of 166
CSS3 for Web DesignersDan Cederholm | A Book Apart
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 151 of 166
Resources • A Whole New Mind: Moving from the Information Age to the Conceptual Age
• Daniel Pink
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 152 of 166
www.manager-tools.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 153 of 166
Podcasts
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 154 of 166
www.businessweek.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 155 of 166
www.istockphoto.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 156 of 166
www.thinkvitamin.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 157 of 166
www.smashingmagazine.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 158 of 166
Nancy Durate Garr Reynolds
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 159 of 166
www.presentationzen.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 160 of 166
www.balsamiq.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 161 of 166
www.silverback.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 162 of 166
Screencasts 101 Mini-Session
www.jingproject.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 163 of 166
www.twitter.com
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 164 of 166
Download the Presentation at:http://www.slideshare.net/nickfloro
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 165 of 166
Thank You
Nick Floronick@sealworks.comtwitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
# LSCon@nickfloro
Design Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 166 of 166