Improving Design to Engage Your Audience

166
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
  • date post

    18-Oct-2014
  • Category

    Technology

  • view

    895
  • download

    1

description

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

Transcript of Improving Design to Engage Your Audience

Page 1: Improving Design to Engage Your Audience

Improving Designto ENGAGE Your Audience

Nick [email protected]/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

Page 2: Improving Design to Engage Your Audience

Goals

goals

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 2 of 166

Page 3: Improving Design to Engage Your Audience

share

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 3 of 166

Page 4: Improving Design to Engage Your Audience

Experiment

experiment

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 4 of 166

Page 5: Improving Design to Engage Your Audience

Process

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 5 of 166

Page 6: Improving Design to Engage Your Audience

Resources

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 6 of 166

Page 7: Improving Design to Engage Your Audience

Understand Design.

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 7 of 166

Page 8: Improving Design to Engage Your Audience

It’s about communication and problem solving.

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 8 of 166

Page 9: Improving Design to Engage Your Audience

What is Design?Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 9 of 166

Page 10: Improving Design to Engage Your Audience

How it works.

www.apple.com/designed-by-apple/

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 10 of 166

Page 11: Improving Design to Engage Your Audience

Design + Technology

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 11 of 166

Page 12: Improving Design to Engage Your Audience

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

Page 13: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 13 of 166

Page 14: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 14 of 166

Page 15: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 15 of 166

Page 16: Improving Design to Engage Your Audience

How do you fix it?

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 16 of 166

Page 17: Improving Design to Engage Your Audience

3 Key Factors

1. Audience

2. Technology

3. Use

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 17 of 166

Page 18: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 18 of 166

Page 19: Improving Design to Engage Your Audience

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

Page 20: Improving Design to Engage Your Audience

Create a Road Map

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 20 of 166

Page 21: Improving Design to Engage Your Audience

User Interface | UI

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 21 of 166

Page 22: Improving Design to Engage Your Audience

User Interface | UI

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 22 of 166

Page 23: Improving Design to Engage Your Audience

User Experience | UX

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 23 of 166

Page 24: Improving Design to Engage Your Audience

What do they feel?

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 24 of 166

Page 25: Improving Design to Engage Your Audience

Content StrategyDesign Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 25 of 166

Page 26: Improving Design to Engage Your Audience

Content Strategy

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 26 of 166

Page 27: Improving Design to Engage Your Audience

Content Strategy

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 27 of 166

Page 28: Improving Design to Engage Your Audience

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

Page 29: Improving Design to Engage Your Audience

Sketching where ideas begin

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 29 of 166

Page 30: Improving Design to Engage Your Audience

Visual Thinking

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 30 of 166

Page 31: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 31 of 166

Page 32: Improving Design to Engage Your Audience

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

Page 33: Improving Design to Engage Your Audience

Prototyping test driving your idea

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 33 of 166

Page 34: Improving Design to Engage Your Audience

Paper by FiftyThree

Adobe IdeasEvernote Skitch

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 34 of 166

Page 35: Improving Design to Engage Your Audience

Tools:

• Wireframes– Keynote / PowerPoint

Quick Prototyping Techniques

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 35 of 166

Page 36: Improving Design to Engage Your Audience

keynotekungfu.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 36 of 166

Page 37: Improving Design to Engage Your Audience

Custom Template in Keynote

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 37 of 166

Page 38: Improving Design to Engage Your Audience

Adobe Acrobat

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 38 of 166

Page 39: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 39 of 166

Page 40: Improving Design to Engage Your Audience

POP - Prototyping on Paper

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 40 of 166

Page 41: Improving Design to Engage Your Audience

balsamiq.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 41 of 166

Page 42: Improving Design to Engage Your Audience

Sketchy & iMockUps

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 42 of 166

Page 44: Improving Design to Engage Your Audience

Development: App or Web Delivery

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 44 of 166

Page 45: Improving Design to Engage Your Audience

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

Page 46: Improving Design to Engage Your Audience

Define

Design

Develop

Deliver

ProcessDesign Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 46 of 166

Page 47: Improving Design to Engage Your Audience

Responsive DesignDesign Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 47 of 166

Page 48: Improving Design to Engage Your Audience

getskeleton.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 48 of 166

Page 49: Improving Design to Engage Your Audience

twitter.github.io/bootstrap/

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 49 of 166

Page 50: Improving Design to Engage Your Audience

foundation.zurb.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 50 of 166

Page 51: Improving Design to Engage Your Audience

Pulse for iOS

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 51 of 166

Page 52: Improving Design to Engage Your Audience

WireframesStarting to Design Content

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 52 of 166

Page 53: Improving Design to Engage Your Audience

Wireframes

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 53 of 166

Page 54: Improving Design to Engage Your Audience

Design• Focus on audience

• Content is key

• Transparent interface

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 54 of 166

Page 55: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 55 of 166

Page 56: Improving Design to Engage Your Audience

Text

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 56 of 166

Page 57: Improving Design to Engage Your Audience

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

Page 58: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 58 of 166

Page 59: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 59 of 166

Page 60: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 60 of 166

Page 61: Improving Design to Engage Your Audience

How should we

Design?

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 61 of 166

Page 62: Improving Design to Engage Your Audience

Focus on the

Audience1

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 62 of 166

Page 63: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 63 of 166

Page 64: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 64 of 166

Page 65: Improving Design to Engage Your Audience

is the keyContent

2

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 65 of 166

Page 66: Improving Design to Engage Your Audience

Transparent

Interface3

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 66 of 166

Page 67: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 67 of 166

Page 68: Improving Design to Engage Your Audience

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

Page 69: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 69 of 166

Page 70: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 70 of 166

Page 71: Improving Design to Engage Your Audience

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

Page 72: Improving Design to Engage Your Audience

Navigation

Banner

Content

Interactive Activity

Secondary Nav if needed

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 72 of 166

Page 73: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 73 of 166

Page 74: Improving Design to Engage Your Audience

Navigation

Banner

Content

Interactive Activity

Secondary Nav if needed

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 74 of 166

Page 75: Improving Design to Engage Your Audience

960.gs

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 75 of 166

Page 76: Improving Design to Engage Your Audience

Technology

• HTML5

• CSS

• Javascript

• Python

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 76 of 166

Page 77: Improving Design to Engage Your Audience

Just for Me

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 77 of 166

Page 78: Improving Design to Engage Your Audience

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

Page 79: Improving Design to Engage Your Audience

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

Page 80: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 80 of 166

Page 81: Improving Design to Engage Your Audience

Design: Keep it Simple

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 81 of 166

Page 82: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 82 of 166

Page 83: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 83 of 166

Page 84: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 84 of 166

Page 85: Improving Design to Engage Your Audience

Keep it Simple

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 85 of 166

Page 86: Improving Design to Engage Your Audience

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

Page 87: Improving Design to Engage Your Audience

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

Page 88: Improving Design to Engage Your Audience

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

Page 89: Improving Design to Engage Your Audience

Emulating common GUI elements increase usability

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 89 of 166

Page 90: Improving Design to Engage Your Audience

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

Page 92: Improving Design to Engage Your Audience

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

Page 93: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 93 of 166

Page 94: Improving Design to Engage Your Audience

How do we find something on the web today?

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 94 of 166

Page 95: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 95 of 166

Page 96: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 96 of 166

Page 97: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 97 of 166

Page 98: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 98 of 166

Page 99: Improving Design to Engage Your Audience

mashup

web services

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 99 of 166

Page 100: Improving Design to Engage Your Audience

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

Page 101: Improving Design to Engage Your Audience

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

Page 102: Improving Design to Engage Your Audience

Provide Logical Navigation

Keep navigation visible

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 102 of 166

Page 103: Improving Design to Engage Your Audience

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

Page 104: Improving Design to Engage Your Audience

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

Page 105: Improving Design to Engage Your Audience

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

Page 106: Improving Design to Engage Your Audience

Design for Flexibility

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 106 of 166

Page 107: Improving Design to Engage Your Audience

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

Page 108: Improving Design to Engage Your Audience

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

Page 109: Improving Design to Engage Your Audience

Testing

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 109 of 166

Page 110: Improving Design to Engage Your Audience

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

Page 111: Improving Design to Engage Your Audience

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

Page 112: Improving Design to Engage Your Audience

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

Page 113: Improving Design to Engage Your Audience

Quality Assurance:Use Cases

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 113 of 166

Page 115: Improving Design to Engage Your Audience

MoreExamples

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 115 of 166

Page 116: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 116 of 166

Page 117: Improving Design to Engage Your Audience

Scaling

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 117 of 166

Page 118: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 118 of 166

Page 119: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 119 of 166

Page 120: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 120 of 166

Page 121: Improving Design to Engage Your Audience

WireframesDesigning the Possibilities

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 121 of 166

Page 122: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 122 of 166

Page 123: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 123 of 166

Page 124: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 124 of 166

Page 125: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 125 of 166

Page 126: Improving Design to Engage Your Audience

The New Look

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 126 of 166

Page 127: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 127 of 166

Page 128: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 128 of 166

Page 129: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 129 of 166

Page 130: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 130 of 166

Page 131: Improving Design to Engage Your Audience

Collaboration

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 131 of 166

Page 132: Improving Design to Engage Your Audience

Google Hangouts

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 132 of 166

Page 133: Improving Design to Engage Your Audience

GoogleDocs

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 133 of 166

Page 134: Improving Design to Engage Your Audience

Capture & Analyze

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 134 of 166

Page 135: Improving Design to Engage Your Audience

Using CoverFlow view and Preview of Graphics

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 135 of 166

Page 136: Improving Design to Engage Your Audience

Design Scrapbook: iPhoto | LittleSnapper

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 136 of 166

Page 137: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 137 of 166

Page 138: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 138 of 166

Page 139: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 139 of 166

Page 140: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 140 of 166

Page 141: Improving Design to Engage Your Audience

Design Engineering

• Workflow

• Flexibility

• Learning Objects

• Re-expression

• Experiment

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 141 of 166

Page 142: Improving Design to Engage Your Audience

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

Page 143: Improving Design to Engage Your Audience

Resources

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 143 of 166

Page 144: Improving Design to Engage Your Audience

Games

1. Play

2. Watch others play

3. Experiment

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 144 of 166

Page 145: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 145 of 166

Page 146: Improving Design to Engage Your Audience

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 146 of 166

Page 149: Improving Design to Engage Your Audience

howconference.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 149 of 166

Page 150: Improving Design to Engage Your Audience

reflectorapp.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 150 of 166

Page 151: Improving Design to Engage Your Audience

CSS3 for Web DesignersDan Cederholm | A Book Apart

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 151 of 166

Page 153: Improving Design to Engage Your Audience

www.manager-tools.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 153 of 166

Page 154: Improving Design to Engage Your Audience

Podcasts

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 154 of 166

Page 155: Improving Design to Engage Your Audience

www.businessweek.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 155 of 166

Page 156: Improving Design to Engage Your Audience

www.istockphoto.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 156 of 166

Page 157: Improving Design to Engage Your Audience

www.thinkvitamin.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 157 of 166

Page 158: Improving Design to Engage Your Audience

www.smashingmagazine.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 158 of 166

Page 159: Improving Design to Engage Your Audience

Nancy Durate Garr Reynolds

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 159 of 166

Page 160: Improving Design to Engage Your Audience

www.presentationzen.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 160 of 166

Page 161: Improving Design to Engage Your Audience

www.balsamiq.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 161 of 166

Page 162: Improving Design to Engage Your Audience

www.silverback.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 162 of 166

Page 163: Improving Design to Engage Your Audience

Screencasts 101 Mini-Session

www.jingproject.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 163 of 166

Page 164: Improving Design to Engage Your Audience

www.twitter.com

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 164 of 166

Page 165: Improving Design to Engage Your Audience

Download the Presentation at:http://www.slideshare.net/nickfloro

Design Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 165 of 166

Page 166: Improving Design to Engage Your Audience

Thank You

Nick [email protected]/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