designing for all screens: atd ice 2016
TRANSCRIPT
![Page 1: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/1.jpg)
DESIGNING FOR ALL SCREENSin a world of multiple platforms and viewports
we need to be
Sean Bengry, Senior Principal
Accenture Academy
![Page 2: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/2.jpg)
![Page 3: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/3.jpg)
One thing to rule them all, One Size Fits all
• Can be done, but there are limitations
One link to rule them all?Responsive Adaptive Liquid
![Page 4: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/4.jpg)
One set of criteria
for every screen
size or device
category?
![Page 5: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/5.jpg)
bad teacher
![Page 6: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/6.jpg)
Design the User
To convince people about design, we had to say “This is going to solve userproblems”
![Page 7: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/7.jpg)
Design is how it works.“S T E V E J O B S
![Page 8: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/8.jpg)
Wake up and
smell the UX
![Page 9: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/9.jpg)
C O L L A B O R AT I V E
DESIGN THINKING
H U M A N
C E N T E R E D
C R E AT I V E
A N D
P L AY F U L
P R OTOT Y P E
D R I V E N
I T E R AT I V E
![Page 10: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/10.jpg)
Performance
Support
Talent
Management
Knowledge
Management
Structured
Learning
Access to
Experts
Social
Networking
And
Collaboration
![Page 11: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/11.jpg)
universal language
![Page 12: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/12.jpg)
Traditional instructional design is not enough
![Page 13: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/13.jpg)
is not enough
Responsive Design
![Page 14: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/14.jpg)
A visual language is a start…
Dan Roam, Visual Thinking Blog
![Page 15: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/15.jpg)
we need a
design language
Material
DesignHuman
Interface
Living
Language
![Page 16: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/16.jpg)
![Page 17: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/17.jpg)
Graphic (learning)Instructional
Multimedia (learning)
Interaction/
Interface
(Po lymath ic ) LEARNING EXPERIENCE DESIGN
![Page 18: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/18.jpg)
Graphic (learning)
typography
color shapes
Understand the Elements and Principles
of Each System (process)
Copyright © 2015 Accenture. All rights reserved.
![Page 19: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/19.jpg)
Graphic (learning)
typography
color shapes
Lean on and apply good research and best
practices of each system (people)
R. Clark Duarte
Roam
Malamed
Copyright © 2015 Accenture. All rights reserved.
![Page 20: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/20.jpg)
Graphic (learning)
typography
color shapes
Leverage available tools and products to help
apply your design style (technology)
R. Clark Duarte
Roam
Malamed
Color
Photoshop
PowerPoint
iconMonstr
iStock
Copyright © 2015 Accenture. All rights reserved.
![Page 21: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/21.jpg)
![Page 22: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/22.jpg)
scary taxi ride
![Page 23: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/23.jpg)
Instructional
Designer
Graphic
Designer
Multimedia
Designer
LMS
Programmer
the evolution of learning experience design
![Page 24: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/24.jpg)
It was the best of times,
it was the worst of times“
C H A R L E S D I C K E N S
![Page 25: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/25.jpg)
Create formal learning
![Page 26: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/26.jpg)
Create native apps
![Page 27: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/27.jpg)
Create digital storiesInklewriter
Storyform
Papermine
Immersive (Shorthand Social)
Adobe Slate, Spark
Inkling
Aquafadas
![Page 28: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/28.jpg)
“We become what we
behold. We shape our
tools and then our tools
shape us.
“
M A R S H A L L M C L U H A N
![Page 29: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/29.jpg)
What’s next?
![Page 30: Designing for All Screens: ATD ICE 2016](https://reader031.vdocument.in/reader031/viewer/2022030310/58f08a8a1a28ab7c408b4629/html5/thumbnails/30.jpg)
Build for use
(UX) not for
simple access
Build a design
language that
can be translated
across all screens
Use technology
to augment
your design, not
create it