A super quick journey through the interactive prototyping landscape

462d2b374bfea4d99c40d3a1885fcda7?s=47 Dan Goodwin
June 27, 2017
77

A super quick journey through the interactive prototyping landscape

Presented at North Devon Web Meetup, 27 June 2017
https://www.meetup.com/North-Devon-Web-Meetup/events/239964239/

462d2b374bfea4d99c40d3a1885fcda7?s=128

Dan Goodwin

June 27, 2017
Tweet

Transcript

  1. A super quick journey through the interactive prototyping landscape

  2. fffunction: a user-centred design agency…

  3. …and we love creating prototypes

  4. None
  5. Wave your hands in the air like you really do

    care, actually
  6. The bit where I say what I’ll say What a

    prototype is. Why prototyping is a good thing to do. Mapping the prototyping landscape. A tour round that landscape. Lots of time for questions, help, and chat.
  7. Prototype: our definition Something to test, explore, and communicate design

    ideas for a thing which we’re designing. Something: a lower fidelity representation. Could be a paper sketch, wireframe-like clickable prototype, or a fully interactive implementation. A thing: something we’re designing. A website, web app, native app, system, or a process.
  8. Why prototype? Work collaboratively. Communicate our design ideas in a

    more powerful and engaging way. Engage stakeholders. Bring users into our design process: research, collaboration, testing. Save time and money.
  9. Why? Save time and money

  10. The prototyping landscape is big! Lots of tools. Lots of

    techniques. Lots of folk have attempted to classify prototyping tools: typically by fidelity, complexity / speed of tool, or some combination of these.
  11. https://blog.prototypr.io/14-prototyping-tools-how-each-can-be-used-1c804fab33a6

  12. Problems with classifying by fidelity More than just visual design

    quality: level of complexity; breadth and/or depth being presented; richness of interactions. Easy to conflate fidelity with complexity and speed of prototyping. They don’t always correlate. Many tools operate across a range of fidelities.
  13. Problems with classifying by prototyping tool complexity Learning curve, speed

    of prototype creation, and complexity sometimes correlate, sometimes don’t. Different tools suit different designers and teams. Some tools are quicker to get going with if you’re already creating design deliverables of some kind (e.g. sketches, mockups in Sketch or Photoshop).
  14. Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure

    Adobe XD HTML Hand sketch Wireframe Full-fidelity design mockup Fidelity
  15. Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure

    Adobe XD HTML Easy / quick / shallow Medium Hard / slow / steep Complexity / speed of prototype creation / learning curve
  16. Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure

    Adobe XD HTML Rapidly generate design ideas for interfaces and user flow Design and present simple structures and layouts Design and present more complex content structures and / or lengthy, involved user journeys What you’re using a prototype to do
  17. Paper Prototyping Creating Clickable Prototypes from Designs Integrated Tools for

    Drawing and Creating Prototypes HTML Prototypes
  18. Paper prototyping

  19. Paper prototyping

  20. Paper prototyping

  21. Great for working rapidly and collaboratively; generating ideas; testing and

    iterating. Anyone can get involved. Quickly becomes impractical to prototype and test a large site. Not easy to share and present prototypes. Paper prototyping
  22. Clickable prototypes from designs: Marvel

  23. Clickable prototypes from designs: PDFs

  24. Clickable prototypes from designs: InVision

  25. Clickable prototypes from designs: InVision

  26. Clickable prototypes from designs: InVision

  27. Can take any existing design deliverables, including simple sketches, and

    turn them into clickable prototypes quickly and easily. Clickable prototypes can be created with existing tools for creating / editing PDFs. Tools like InVision and Marvel bring a wide range of features specifically to aid prototyping workflow. Clickable prototypes from designs
  28. Tools for drawing and creating prototypes: Keynote / Powerpoint

  29. Tools for drawing and creating prototypes: Keynote / Powerpoint

  30. Tools for drawing and creating prototypes: Keynote / Powerpoint

  31. Tools for drawing and creating prototypes: Balsamiq

  32. Tools for drawing and creating prototypes: Axure

  33. Tools for drawing and creating prototypes: Adobe XD

  34. Wide range of tools to suit those prototyping across a

    range of design and development experience. From Keynote / Powerpoint through to Axure and Adobe XD. Some tools can be used to prototype larger sites; with real data and content; and complex interactions. A wide range of fidelities available across the various tools. Tools for drawing and creating prototypes
  35. HTML prototypes

  36. HTML prototypes

  37. Full responsive prototyping. Good for building structural prototypes across the

    breadth and / or depth of a full site structure. Can prototype interactions to whatever depth you wish. A wide range of frameworks and tools. With hosting and workflow sorted, sharing is ‘easy’. Potentially steep learning curve, or work with developers! HTML prototypes
  38. Other prototyping tools: Principle

  39. Other prototyping tools: Framer

  40. Other prototyping tools: Facebook Origami Studio

  41. Too many to list! Always changing: old tools die or

    get bought, new tools arriving all the time. Think about tools in terms of our categories (and maybe your own too). Then as tools come and go, you can get a feel for which ones will be useful to you. Other prototyping tools
  42. Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure

    Adobe XD HTML Hand sketch Wireframe Full-fidelity design mockup Fidelity
  43. Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure

    Adobe XD HTML Easy / quick / shallow Medium Hard / slow / steep Complexity / speed of prototype creation / learning curve
  44. Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure

    Adobe XD HTML Rapidly generate design ideas for interfaces and user flow Design and present simple structures and layouts Design and present more complex content structures and / or lengthy, involved user journeys What you’re using a prototype to do
  45. https://www.sitepoint.com/premium/books/designing-ux-prototyping Designing UX - Prototyping Ben Coleman, Dan Goodwin SitePoint

    ISBN: 0994347081 Thank you @bouncingdan @fffunction http://fffunction.co https://www.amazon.co.uk/dp/0994347081