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

Quick Tips to Wireframing & Prototyping

4447340ee30f2322cf1cefddfb7d0d08?s=47 Jenny Shen
August 30, 2013

Quick Tips to Wireframing & Prototyping

I joined 3 other UX experts to teach and consult hackers and makers about UX at #Startathon Singapore, the largest 24-hour future-driven hackathon/makathon event in Asia.

My talk was on how to use wireframes and prototypes to craft a beautiful and well thought out user experience. In this talk, I compare different wireframing and prototyping tools, and advised on how to choose the right tool.


Jenny Shen

August 30, 2013

More Decks by Jenny Shen

Other Decks in Design


  1. Wireframing Prototyping @ jennyshen &

  2. @ jennyshen What is a wireframe? The ‘specs’ and outline

    of a design Commonly used for web/mobile pages Does not concern the design such as color, graphics, spacing or typography Typically outlines the components together with associated interactions
  3. @ jennyshen Why wireframing? Quickly find problems in the design

    Organize the content from the most to the least important before making mockups Cheaper and faster to produce than a visual comp Help the team to imagine what the final product might look like in the early stage
  4. @ jennyshen Examples

  5. @ jennyshen Tool #1 - Pen(cil) & Paper Fast, cheap,

    easily accessible, can draw anywhere, no learning new software Pencil + notebook + anywhere
  6. @ jennyshen Tool #2 - Axure Advanced, complex interactivity Annotation

    tools & simultaneous collaboration Export wireframes as clickable HTML prototypes http://axure.com
  7. @ jennyshen Tool #3 - Balsamiq Comic Sans-y, drag-and-drop wireframe

    + prototype tool Make click-through prototype. You can choose who can edit. http://balsamiq.com
  8. @ jennyshen Tool #4 - Omnigraffle Lots of built-in &

    stencil libraries online Does not produce a playable/HTML prototype http://www.omnigroup.com/applications/omnigraffle quirktools
  9. @ jennyshen Tool #5 - Quirktools Wires Free cloud-based wireframe

    tool http://quirktools.com/wires/
  10. @ jennyshen Tool #6 - Wireframe.cc Free cloud-based wireframe tool.

    Generate links for each page Chrome app available https://wireframe.cc/
  11. @ jennyshen Tool #7 - Powerpoint Powerpoint + Stencils or

    PowerMockup http://www.powermockup.com/ You might already have it on your computer, and you don’t need to learn or download any new program!
  12. @ jennyshen Tool #8 - Google Doc Google Doc +

    Wireframe templates Search #wfkit in Templates Free! Stored in the cloud. You can share and add collaborators
  13. @ jennyshen What is a prototype? A simulation of the

    design to demonstrate how the product works Unlike static wireframes, prototypes are interactive. Many wireframing tools have prototyping abilities
  14. @ jennyshen Why prototyping? Quickly find problems in the (interaction)

    design Cheaper and faster to produce than going all out on coding/making the real product Allow the team/client/stakeholders to visualize and use the product before it’s created fully Using wireframes alone isn’t enough for design because interactions are not defined
  15. @ jennyshen Tool #1 - Paper Prototyping Fast, cheap and

    easy to make Can get a bit messy when there are a lot of pages
  16. @ jennyshen Tool #2 - Prototyping On Paper Take photos

    of sketches and create hotspots View on mobile and screen https://popapp.in/
  17. @ jennyshen Tool #2 - Prototyping On Paper https://popapp.in/w#!/projects/ 513028de8ea71d611200031f/preview

  18. @ jennyshen Tool #3 - Invision App invisionapp.com

  19. @ jennyshen Tool #3 - Invision App Create hot spots,

    comments, view revision history. Stored in Cloud
  20. @ jennyshen Tool #4 - Proto.io Mobile-specific tool (include tablet

    sizes) https://proto.io
  21. @ jennyshen Tool #5 - FluidUI With touch gestures and

    animated transitions https://fluidui.com
  22. @ jennyshen Tool #6 - Composite A new tool to

    preview Layer Comps with interactions http://www.getcomposite.com/
  23. @ jennyshen Tool #7 - Flinto Like Invision except you

    can use prototype on mobile https://www.flinto.com/
  24. @ jennyshen Tool #8 - Powerpoint/Keynote Create linked pages and

    demo easily One less app/software to download or learn
  25. @ jennyshen Tool #9 - Ratchet For HTML/CSS gurus. Prototype

    iPhone apps with simple HTML, CSS, and JS components If you are making a web app then you are one step closer to making the real app http://maker.github.io/ratchet/
  26. Use whichever works for you Thank you! P.s. follow me

    on Twitter @jennyshen Get feedback &