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.

4447340ee30f2322cf1cefddfb7d0d08?s=128

Jenny Shen

August 30, 2013
Tweet

More Decks by Jenny Shen

Other Decks in Design

Transcript

  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 &