Are you on Twitter? Why not?Join today and participate in the conference backchannel #eldc2011Designing Content           ...
Understand Design
Itʼs aboutcommunication andproblem solving.
Design is how it works.
WARNINGThe following screens are not pretty and may cause adverse reactions.
How do you fix it?
7 Questions to Define the Project                                              What is the budget?What is the goal?        ...
Web
Pixels & Aspect RatioSelecting a Size              Android Xoom                              1280 x 720                   ...
Web   App
Web App
JAVASCRIPT   JQuery     HTML 5 CSS3        AJAX
ProcessDiscover   Define    Design   Develop   Deliver
Sketches
Wireframes
www.balsamiq.com
Sketchy & iMockUps
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Pulse for iOS
Wireframes
Design         • Focus on audience         • Content is key         • Transparent interface
Text
1. Create Text       2. Make a selection       3. Invert select       4. Save alpha channelText       5. Deselect       6....
How should we Design?
Focus on theAudience
Content     is the key
Transparent              3   Interface
• Inherently interesting contentTypography             • Multilevel readership that               encourages scanning     ...
Layout & Grid                “Information presented with                clear and logically set out titles,               ...
Navigation                             BannerSecondaryNav if needed                             ContentFlashImage
Navigation                             BannerSecondaryNav if needed                             ContentFlashImage
Technology             • HTML             • CSS             • Javascript             • AJAX             • Flash
Just for Me
Younique - Mini CampaignJust for Me      • Younique - Mini Campaign                   • 95% buyers customized the vehicle ...
Customize Your CupJust for Me   • Younique - Mini Campaign                • 95% buyers customized the vehicle             ...
Design: Keep it Simple
Keep it Simple
Every click should meet userʼs expectations and lead them        toward a goal.
RememberUser Goals   Users typically come to a site             with a goal in mind
RememberUser Goals   Users typically come to a site             with a goal in mind
Emulating common GUI elements        increase usability
AvoidUnnecessaryIntro         • Always offer users easy                access to content              • Bookmark location ...
Improve UsabilityAvoid                      Remove Older TechnologyUnnecessaryIntro         • Always offer users easy     ...
AvoidUnnecessaryIntro         • Always offer users easy                access to content              • Bookmark location ...
How do we find something   on the web today?
mashup
http://www.marumushi.com/apps/newsmap/              newsmap.cfm
Everyone Creates/Publishes Content                            Pictures    Blog                                            ...
ProvideLogicalNavigation   • Always offer users easy               access to content             • Bookmark location for q...
ProvideLogicalNavigation   • Keep navigation structures               visible
ProvideLogicalNavigation   •   Support back button                 navigation
Design forConsistency   •   Consistency in user interface                  is the best way to improve                  you...
Target Low-BandwidthUsers         •   Smaller the download, the                  better              •   Initial screen do...
Design forAccessibility   •   make your content available                    to all users, including those                ...
Design for Flexibility
Design forAccessibility   •   make your content available                    to all users, including those                ...
Design forAccessibility   •   make your content available                    to all users, including those                ...
Testing for Usability
Test forUsability            •   Have someone with fresh                eyes test drive your site to                make s...
Test forUsability   •   Test on Windows 7,                Vista, XP                  • Internet Explorer 6.x, 7, 8, 9     ...
Test forUsability            •   Re-test the site each time                you make even small                changes
Quality Assurance:   Test Cases
Another example...
Scaling
WireframesDesigning the Possibilities
The New Look
Collaboration
Sneak Peakin development - don’t tell anyone
Capture & Analyze
Using CoverFlow view and Preview of Graphics
Design Scrapbook: iPhoto | LittleSnapper
DesignEngineering              • Workflow              • Flexibility              • Learning Objects              • Re-expr...
ManagingExpectations   • Communication                 • Review goals prior                 • What works                 •...
Resources
Games        1. Play        2. Watch others play        3. Experiment
Resources            • Designing Interactions               • Bill Moggridge
Resources            • Designing the Obvious:              A Common Sense Approach to Web              Application Design ...
howconference.com
CSS3 for Web DesignersDan Cederholm | A Book Apart
Resources   • A Whole New Mind: Moving from the              Information Age to the Conceptual              Age           ...
www.manager-tools.com
Podcasts
www.businessweek.com
www.istockphoto.com
www.thinkvitamin.com
www.smashingmagazine.com
Nancy Durate   Garr Reynolds
www.presentationzen.com
www.balsamiq.com
www.silverback.com
Screencasts 101 Mini-Session              www.jingproject.com
www.twitter.com
http://www.37signals.com/svn/
www.launchcycle.com
Download the Presentation at:http://www.slideshare.net/nickfloro
Thank You            Nick Floro            nick@sealworks.com            twitter.com/NickFloro            Download the Pre...
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Designing Learning #eldc2011
Upcoming SlideShare
Loading in...5
×

Designing Learning #eldc2011

1,317

Published on

Presented at ELDC2011 in Utah 2011.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,317
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
97
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Designing Learning #eldc2011

  1. 1. Are you on Twitter? Why not?Join today and participate in the conference backchannel #eldc2011Designing Content to Improve Learning Nick@sealworks.com Twitter.com/NickFloro
  2. 2. Understand Design
  3. 3. Itʼs aboutcommunication andproblem solving.
  4. 4. Design is how it works.
  5. 5. WARNINGThe following screens are not pretty and may cause adverse reactions.
  6. 6. How do you fix it?
  7. 7. 7 Questions to Define the Project What is the budget?What is the goal? What are the learning objectives? Does the content exist?What is the timetable? Who is the audience and how will they use it? Current technology or solution in place?
  8. 8. Web
  9. 9. Pixels & Aspect RatioSelecting a Size Android Xoom 1280 x 720 HTC Incredible iPad 800 x 480 1024 x 768 iPhone 4 960 x Droid 854 x 480 iPhone 480 x 320
  10. 10. Web App
  11. 11. Web App
  12. 12. JAVASCRIPT JQuery HTML 5 CSS3 AJAX
  13. 13. ProcessDiscover Define Design Develop Deliver
  14. 14. Sketches
  15. 15. Wireframes
  16. 16. www.balsamiq.com
  17. 17. Sketchy & iMockUps
  18. 18. http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
  19. 19. Pulse for iOS
  20. 20. Wireframes
  21. 21. Design • Focus on audience • Content is key • Transparent interface
  22. 22. Text
  23. 23. 1. Create Text 2. Make a selection 3. Invert select 4. Save alpha channelText 5. Deselect 6. Load Alpha Channel 7. Load Color 8. Offset 9. Apply Blur 10. Reposition 11. Save 12. If the copy changed, start over
  24. 24. How should we Design?
  25. 25. Focus on theAudience
  26. 26. Content is the key
  27. 27. Transparent 3 Interface
  28. 28. • Inherently interesting contentTypography • 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
  29. 29. 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
  30. 30. Navigation BannerSecondaryNav if needed ContentFlashImage
  31. 31. Navigation BannerSecondaryNav if needed ContentFlashImage
  32. 32. Technology • HTML • CSS • Javascript • AJAX • Flash
  33. 33. Just for Me
  34. 34. Younique - Mini CampaignJust 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
  35. 35. Customize Your CupJust 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
  36. 36. Design: Keep it Simple
  37. 37. Keep it Simple
  38. 38. Every click should meet userʼs expectations and lead them toward a goal.
  39. 39. RememberUser Goals Users typically come to a site with a goal in mind
  40. 40. RememberUser Goals Users typically come to a site with a goal in mind
  41. 41. Emulating common GUI elements increase usability
  42. 42. AvoidUnnecessaryIntro • Always offer users easy access to content • Bookmark location for quick return to content
  43. 43. Improve UsabilityAvoid Remove Older TechnologyUnnecessaryIntro • Always offer users easy Links to Materials access to content Adding Quiz Module • Bookmark location for quick return to content
  44. 44. AvoidUnnecessaryIntro • Always offer users easy access to content • Bookmark location for quick return to content
  45. 45. How do we find something on the web today?
  46. 46. mashup
  47. 47. http://www.marumushi.com/apps/newsmap/ newsmap.cfm
  48. 48. Everyone Creates/Publishes Content Pictures Blog Video Audio 3D Models ePortfolios Micro-blogging Course Management System Multiplayer Environment
  49. 49. ProvideLogicalNavigation • Always offer users easy access to content • Bookmark location for quick return to content
  50. 50. ProvideLogicalNavigation • Keep navigation structures visible
  51. 51. ProvideLogicalNavigation • Support back button navigation
  52. 52. Design forConsistency • Consistency in user interface is the best way to improve your sites performance
  53. 53. Target Low-BandwidthUsers • 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 • Flash - use the Load Movie action only when the user specifically requests a file
  54. 54. Design forAccessibility • make your content available to all users, including those with disabilities (508) • highly descriptive Alternate Tags allow your content to be interpreted
  55. 55. Design for Flexibility
  56. 56. Design forAccessibility • make your content available to all users, including those with disabilities • highly descriptive Alternate Tags allow your content to be interpreted
  57. 57. Design forAccessibility • make your content available to all users, including those with disabilities • highly descriptive Alternate Tags allow your content to be interpreted
  58. 58. Testing for Usability
  59. 59. Test forUsability • Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals • Survey
  60. 60. Test forUsability • Test on Windows 7, Vista, XP • Internet Explorer 6.x, 7, 8, 9 • Firefox 3+ • Test on OS X − Safari 4+ − Firefox 3+
  61. 61. Test forUsability • Re-test the site each time you make even small changes
  62. 62. Quality Assurance: Test Cases
  63. 63. Another example...
  64. 64. Scaling
  65. 65. WireframesDesigning the Possibilities
  66. 66. The New Look
  67. 67. Collaboration
  68. 68. Sneak Peakin development - don’t tell anyone
  69. 69. Capture & Analyze
  70. 70. Using CoverFlow view and Preview of Graphics
  71. 71. Design Scrapbook: iPhoto | LittleSnapper
  72. 72. DesignEngineering • Workflow • Flexibility • Learning Objects • Re-expression • Experiment
  73. 73. ManagingExpectations • Communication • Review goals prior • What works • What doesn’t work • Final Goal
  74. 74. Resources
  75. 75. Games 1. Play 2. Watch others play 3. Experiment
  76. 76. Resources • Designing Interactions • Bill Moggridge
  77. 77. Resources • Designing the Obvious: A Common Sense Approach to Web Application Design • Robert Hoekman Jr.
  78. 78. howconference.com
  79. 79. CSS3 for Web DesignersDan Cederholm | A Book Apart
  80. 80. Resources • A Whole New Mind: Moving from the Information Age to the Conceptual Age • Daniel Pink
  81. 81. www.manager-tools.com
  82. 82. Podcasts
  83. 83. www.businessweek.com
  84. 84. www.istockphoto.com
  85. 85. www.thinkvitamin.com
  86. 86. www.smashingmagazine.com
  87. 87. Nancy Durate Garr Reynolds
  88. 88. www.presentationzen.com
  89. 89. www.balsamiq.com
  90. 90. www.silverback.com
  91. 91. Screencasts 101 Mini-Session www.jingproject.com
  92. 92. www.twitter.com
  93. 93. http://www.37signals.com/svn/
  94. 94. www.launchcycle.com
  95. 95. Download the Presentation at:http://www.slideshare.net/nickfloro
  96. 96. Thank You Nick Floro nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×