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

Aff5641764408271f7bc398f2097edd0?s=128

Dennis Kardys

May 09, 2014
Tweet

Transcript

  1. 8.
  2. 12.

    “The purpose of a design artifact, whether a wireframe, prototype

    or sketch, is to illustrate our thinking.” —Robert Hoekman
  3. 16.

    65% 60% 4% source: Think With Google, “The New Multi

    Screen World” - http://bit.ly/Qivs98 multiscreen behavior ~ search ~
  4. 27.
  5. 28.
  6. 32.
  7. 33.
  8. 34.
  9. 37.

    Comics & Storyboards Great for getting to people focus on

    goals and scenarios instead of features and screens.
  10. 38.

    Experience Maps Outlining the various points where users interact with

    a product or service, across channels. Can weave together personas, scenarios, and tasks.
  11. 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.
  12. 46.

    Friction in the process between design and dev teams are

    often the result of poorly defined design systems.
  13. 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
  14. 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
  15. 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
  16. 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.
  17. 53.
  18. 58.
  19. 71.
  20. 72.
  21. 77.
  22. 79.

    Pace The Conversation Focus on one thing at a time

    http://www.flickr.com/photos/nlireland/5963130143/