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.
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
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
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
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
&