Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Quick Tips to Wireframing & Prototyping

358 views

Published on

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.

Published in: Design
  • Be the first to comment

Quick Tips to Wireframing & Prototyping

  1. 1. Wireframing Prototyping @ jennyshen &
  2. 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. 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. 4. @ jennyshen Examples
  5. 5. @ jennyshen Tool #1 - Pen(cil) & Paper Fast, cheap, easily accessible, can draw anywhere, no learning new software Pencil + notebook + anywhere
  6. 6. @ jennyshen Tool #2 - Axure Advanced, complex interactivity Annotation tools & simultaneous collaboration Export wireframes as clickable HTML prototypes http://axure.com
  7. 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. 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. 9. @ jennyshen Tool #5 - Quirktools Wires Free cloud-based wireframe tool http://quirktools.com/wires/
  10. 10. @ jennyshen Tool #6 - Wireframe.cc Free cloud-based wireframe tool. Generate links for each page Chrome app available https://wireframe.cc/
  11. 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. 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. 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. 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. 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. 16. @ jennyshen Tool #2 - Prototyping On Paper Take photos of sketches and create hotspots View on mobile and screen https://popapp.in/
  17. 17. @ jennyshen Tool #2 - Prototyping On Paper https://popapp.in/w#!/projects/ 513028de8ea71d611200031f/preview
  18. 18. @ jennyshen Tool #3 - Invision App invisionapp.com
  19. 19. @ jennyshen Tool #3 - Invision App Create hot spots, comments, view revision history. Stored in Cloud
  20. 20. @ jennyshen Tool #4 - Proto.io Mobile-specific tool (include tablet sizes) https://proto.io
  21. 21. @ jennyshen Tool #5 - FluidUI With touch gestures and animated transitions https://fluidui.com
  22. 22. @ jennyshen Tool #6 - Composite A new tool to preview Layer Comps with interactions http://www.getcomposite.com/
  23. 23. @ jennyshen Tool #7 - Flinto Like Invision except you can use prototype on mobile https://www.flinto.com/
  24. 24. @ jennyshen Tool #8 - Powerpoint/Keynote Create linked pages and demo easily One less app/software to download or learn
  25. 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. 26. Use whichever works for you Thank you! P.s. follow me on Twitter @jennyshen Get feedback &

×