Communicating Design In a Multiscreen World

Presented at Webvisions Portland 2014

Much of the conventional design process and documentation we rely on is ineffective when it comes to communicating how we want our designs to translate across a wide range of devices and screen sizes. This talk is all about producing effective, efficient deliverables for an increasingly mobile-accessed Web, and practical design methods you can put into use right away.

links referenced:
http://foodbank.bradfrostweb.com/timeline/
http://rif.superfriend.ly/
https://github.com/elliance/metaframe

Transcript

1. Communicating Design in a MULTISCREEN World Dennis Kardys, Design Director, WSOL | @dkardys #wvpdx
2. “We want a responsive design!”
3. “We want a responsive design!” ...So that our site will work on my [boss’s] iPhone...
4. NO! NOT JUST ONE SCREEN—
5. ALLS THE SCREENS!
6. It’s a good time to be a designer...
7. But WILL the People know to click it?
9. ...a good time to be in the deliverables business?
10. Makers wanna make... not document
11. How much of the design process is expendable?
12. “The purpose of a design artifact, whether a wireframe, prototype or sketch, is to illustrate our thinking.” —Robert Hoekman
13. designing for lots of screens... IT’S COMPLICATED, YO!
14. A single user task, represented by a series of actions across time
15. A single user task, represented by a series of actions across time
16. 65% 60% 4% source: Think With Google, “The New Multi Screen World” - http://bit.ly/Qivs98 multiscreen behavior ~ search ~
17. A single user task, represented by a series of actions across screens and time
18. A single user task, represented by a series of actions across screens and time
19. new challenges demand a Flexible Workflow & Adaptive Process
20. Facilitation Setting expectations
21. CC licence: flickr Mitchell Joyce https://flic.kr/p/6TYNf1 Alleviate concerns...
22. CC licence: flickr Mitchell Joyce https://flic.kr/p/6TYNf1 Foster healthy mindsets.
23. Designing in the open... http://foodbank.bradfrostweb.com/timeline/
24. Provides a line of sight
25. Provides a line of sight
26. Setting Guidelines • Design Studio Methods • Design Mini Brief • Structured Rules for Critique
29. Totally arbitrary re-prioritization of objectives incoming!
30. The purpose of a design artifact can also be to transform our thinking
31. Participatory Sketching Getting stubborn ideas out of people’s heads and onto paper.
35. Don’t Pause for Perfection (iterate for improvement)
36. Experiential Prototyping
37. Comics & Storyboards Great for getting to people focus on goals and scenarios instead of features and screens.
38. Experience Maps Outlining the various points where users interact with a product or service, across channels. Can weave together personas, scenarios, and tasks.
39. Role Playing / Bodystorming Performing the experience http://www.flickr.com/photos/xian/3763797756/in/photostream/ http://www.flickr.com/photos/nlireland/5963130143/
40. http://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows A Shorthand for UI Flows Build a sense of place across screens by building consistency in what the user can see and do.
41. Stories help you find gaps in the experience. http://www.flickr.com/photos/osucommons/3385601567/
42. 1. Consistent 2. Convenient 3. Connected 4. Contextual
43. Tactical Prototyping
44. Systems can be deconstructed. Systems have rules.
45. Design Systems Breed • Structured Content • Modular Markup & CSS • More consistent UI
46. Friction in the process between design and dev teams are often the result of poorly defined design systems.
47. Style Exploration (UI lead) Content / Layout/IxD Exploration (interaction/IA lead/front end) High Fidelity (all hands on deck) Explore in tandem Discuss In Isolation Discuss In Isolation Evaluate in Context
48. Visual Inventory Component Audit Element Collage Style Guide Explore in tandem Content Inventory Page Tables Content Reference Low-fi Prototypes Component Library High Fidelity Prototype Refine in context
49. KJ Method An efficient way to exhaust content ideas or goals and arrive at consensus when dealing with large or divided groups. http://www.netmagazine.com/features/how-run-effective-meeting
50. Paper Prototypes Quickly validate and adjust ideas while considering considering context and ergonomics
51. Page Tables / Content Outlines Worksheets for evaluating, prioritizing and structuring content. Can map to how content will be structured within a content management system.
52. Component Audit What components are existing? What components are needed? What components are redundant?
54. Content Reference Wireframes Plotting template structure and content zones.
55. Content Reference Wireframes Plotting template structure and content zones. BETTER IN THE BROW SER!
56. Low Fidelity HTML Prototypes
57. Annotations for HTML Wireframes Elliance Metaframe: https://github.com/elliance/metaframe
59. evaluating decisions in their actual medium
60. Visual Inventory - concept Inspirational screenshots to help gauge art direction
61. Visual Inventory - concept Inspirational screenshots to help gauge art direction
62. Visual Inventory - color
63. Visual Inventory - color
64. Visual Inventory - type
65. Visual Inventory - type
66. Element Collage Vignettes that explore style in context of key components
67. Element Collage Vignettes that explore style in context of key components
68. Style Prototype / Guide Basic elements with applied visual style
69. Component Guide Components + design system rules
70. Component Guide Components + design system rules
73. High Fidelity Prototype
74. High Fidelity Prototype
75. Learn only what you need to learn to move on...
76. Facilitation Pacing & Preparation
78. Crossing the Chasm
79. Pace The Conversation Focus on one thing at a time http://www.flickr.com/photos/nlireland/5963130143/
80. Build Momentum distinguish between learning & reviewing.
81. Project paralysis...
82. Prime Time continually priming and reinforcing expectations _____________ the right conversation the right time
83. PREPARING for what’s to come
84. How much documentation?
85. Lifespan (disposable or living) Proximity (immediate, long term) Purpose (learning or specify)
86. Create Props NOT Paperwork
87. UX is a result... not a document.
88. YOU GOT THIS, DUDE!
89. THANKS! Dennis Kardys design director | book: mobile-web-triage.com @dkardys