Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Communicating Design In a Multiscreen World

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

Dennis Kardys

May 09, 2014
Tweet

More Decks by Dennis Kardys

Other Decks in Design

Transcript

  1. Communicating
    Design
    in a MULTISCREEN World
    Dennis Kardys, Design Director, WSOL | @dkardys #wvpdx

    View full-size slide

  2. “We want a
    responsive design!”

    View full-size slide

  3. “We want a
    responsive design!”
    ...So that our site will work
    on my [boss’s] iPhone...

    View full-size slide

  4. NO! NOT JUST ONE SCREEN—

    View full-size slide

  5. ALLS THE SCREENS!

    View full-size slide

  6. It’s a good time to
    be a designer...

    View full-size slide

  7. But WILL the
    People know
    to click it?

    View full-size slide

  8. ...a good time to be in
    the deliverables
    business?

    View full-size slide

  9. Makers wanna
    make...
    not document

    View full-size slide

  10. How much
    of the design process
    is expendable?

    View full-size slide

  11. “The purpose of a design
    artifact, whether a
    wireframe, prototype or
    sketch, is to illustrate our
    thinking.”
    —Robert Hoekman

    View full-size slide

  12. designing for lots of screens...
    IT’S COMPLICATED, YO!

    View full-size slide

  13. A single user task,
    represented by a series
    of actions across time

    View full-size slide

  14. A single user task,
    represented by a series
    of actions across time

    View full-size slide

  15. 65% 60% 4%
    source: Think With Google, “The New Multi Screen World” - http://bit.ly/Qivs98
    multiscreen behavior
    ~ search ~

    View full-size slide

  16. A single user task,
    represented by a series
    of actions across
    screens and time

    View full-size slide

  17. A single user task,
    represented by a series
    of actions across
    screens and time

    View full-size slide

  18. new challenges demand
    a Flexible Workflow
    & Adaptive Process

    View full-size slide

  19. Facilitation
    Setting expectations

    View full-size slide

  20. CC licence: flickr Mitchell Joyce https://flic.kr/p/6TYNf1
    Alleviate concerns...

    View full-size slide

  21. CC licence: flickr Mitchell Joyce https://flic.kr/p/6TYNf1
    Foster healthy mindsets.

    View full-size slide

  22. Designing in
    the open...
    http://foodbank.bradfrostweb.com/timeline/

    View full-size slide

  23. Provides a
    line of sight

    View full-size slide

  24. Provides a
    line of sight

    View full-size slide

  25. Setting Guidelines
    • Design Studio Methods
    • Design Mini Brief
    • Structured Rules for Critique

    View full-size slide

  26. Totally arbitrary
    re-prioritization of
    objectives incoming!

    View full-size slide

  27. The purpose of a design
    artifact can also be to
    transform our thinking

    View full-size slide

  28. Participatory Sketching
    Getting stubborn ideas out of people’s
    heads and onto paper.

    View full-size slide

  29. Don’t Pause for Perfection
    (iterate for improvement)

    View full-size slide

  30. Experiential
    Prototyping

    View full-size slide

  31. Comics & Storyboards
    Great for getting to people focus on goals and
    scenarios instead of features and screens.

    View full-size slide

  32. Experience Maps
    Outlining the various points where users interact with a
    product or service, across channels. Can weave together
    personas, scenarios, and tasks.

    View full-size slide

  33. Role Playing / Bodystorming
    Performing the experience
    http://www.flickr.com/photos/xian/3763797756/in/photostream/
    http://www.flickr.com/photos/nlireland/5963130143/

    View full-size slide

  34. 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.

    View full-size slide

  35. Stories help you find
    gaps in the experience.
    http://www.flickr.com/photos/osucommons/3385601567/

    View full-size slide

  36. 1. Consistent
    2. Convenient
    3. Connected
    4. Contextual

    View full-size slide

  37. Tactical
    Prototyping

    View full-size slide

  38. Systems can be
    deconstructed.
    Systems have rules.

    View full-size slide

  39. Design Systems Breed
    • Structured Content
    • Modular Markup & CSS
    • More consistent UI

    View full-size slide

  40. Friction in the process between
    design and dev teams are often
    the result of poorly defined
    design systems.

    View full-size slide

  41. 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

    View full-size slide

  42. 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

    View full-size slide

  43. 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

    View full-size slide

  44. Paper Prototypes
    Quickly validate and adjust ideas while considering
    considering context and ergonomics

    View full-size slide

  45. Page Tables / Content Outlines
    Worksheets for evaluating, prioritizing and structuring
    content. Can map to how content will be structured
    within a content management system.

    View full-size slide

  46. Component Audit
    What components are existing? What components are
    needed? What components are redundant?

    View full-size slide

  47. Content Reference Wireframes
    Plotting template structure and content zones.

    View full-size slide

  48. Content Reference Wireframes
    Plotting template structure and content zones.
    BETTER
    IN
    THE BROW
    SER!

    View full-size slide

  49. Low Fidelity HTML Prototypes

    View full-size slide

  50. Annotations for HTML
    Wireframes
    Elliance Metaframe: https://github.com/elliance/metaframe

    View full-size slide

  51. evaluating decisions in their
    actual medium

    View full-size slide

  52. Visual Inventory - concept
    Inspirational screenshots to help gauge art direction

    View full-size slide

  53. Visual Inventory - concept
    Inspirational screenshots to help gauge art direction

    View full-size slide

  54. Visual Inventory - color

    View full-size slide

  55. Visual Inventory - color

    View full-size slide

  56. Visual Inventory - type

    View full-size slide

  57. Visual Inventory - type

    View full-size slide

  58. Element Collage
    Vignettes that explore style in context of key components

    View full-size slide

  59. Element Collage
    Vignettes that explore style in context of key components

    View full-size slide

  60. Style Prototype / Guide
    Basic elements with applied visual style

    View full-size slide

  61. Component Guide
    Components + design system rules

    View full-size slide

  62. Component Guide
    Components + design system rules

    View full-size slide

  63. High Fidelity Prototype

    View full-size slide

  64. High Fidelity Prototype

    View full-size slide

  65. Learn only what you need
    to learn to move on...

    View full-size slide

  66. Facilitation
    Pacing & Preparation

    View full-size slide

  67. Crossing the
    Chasm

    View full-size slide

  68. Pace The
    Conversation
    Focus on one thing at a time
    http://www.flickr.com/photos/nlireland/5963130143/

    View full-size slide

  69. Build Momentum
    distinguish between
    learning & reviewing.

    View full-size slide

  70. Project paralysis...

    View full-size slide

  71. Prime Time
    continually priming and
    reinforcing expectations
    _____________
    the right conversation the right
    time

    View full-size slide

  72. PREPARING
    for what’s to come

    View full-size slide

  73. How much
    documentation?

    View full-size slide

  74. Lifespan (disposable or living)
    Proximity (immediate, long term)
    Purpose (learning or specify)

    View full-size slide

  75. Create Props
    NOT
    Paperwork

    View full-size slide

  76. UX is a result...
    not a document.

    View full-size slide

  77. YOU GOT THIS, DUDE!

    View full-size slide

  78. THANKS!
    Dennis Kardys
    design director |
    book: mobile-web-triage.com
    @dkardys

    View full-size slide