WireframingPrototyping

@ jennyshen

&

@ 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

@ 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

@ jennyshen

Examples

@ jennyshen

Tool #1 - Pen(cil) & Paper

Fast, cheap, easily accessible, can draw anywhere, no learning new software

Pencil + notebook + anywhere

@ jennyshen

Tool #2 - Axure

Advanced, complex interactivity Annotation tools & simultaneous collaboration Export wireframes as clickable HTML prototypes http://axure.com

@ 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

@ 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

@ jennyshen

Tool #5 - Quirktools Wires

Free cloud-based wireframe tool http://quirktools.com/wires/

@ jennyshen

Tool #6 - Wireframe.cc

Free cloud-based wireframe tool. Generate links for each page Chrome app available https://wireframe.cc/

@ 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!

@ jennyshen

Tool #8 - Google Doc

Google Doc + Wireframe templates Search #wfkit in Templates Free! Stored in the cloud. You can share and add collaborators

@ 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

@ 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

@ jennyshen

Tool #1 - Paper Prototyping

Fast, cheap and easy to make Can get a bit messy when there are a lot of pages

@ jennyshen

Tool #2 - Prototyping On Paper

Take photos of sketches and create hotspots View on mobile and screen https://popapp.in/

@ jennyshen

Tool #2 - Prototyping On Paper

https://popapp.in/w#!/projects/513028de8ea71d611200031f/preview

@ jennyshen

Tool #3 - Invision App

invisionapp.com

@ jennyshen

Tool #3 - Invision App

Create hot spots, comments, view revision history. Stored in Cloud

@ jennyshen

Tool #4 - Proto.io

Mobile-specific tool (include tablet sizes) https://proto.io

@ jennyshen

Tool #5 - FluidUI

With touch gestures and animated transitions https://fluidui.com

@ jennyshen

Tool #6 - Composite

A new tool to preview Layer Comps with interactions http://www.getcomposite.com/

@ jennyshen

Tool #7 - Flinto

Like Invision except you can use prototype on mobile https://www.flinto.com/

@ jennyshen

Tool #8 - Powerpoint/Keynote

Create linked pages and demo easily One less app/software to download or learn

@ 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/

Use whichever works for youThank you! P.s. follow me on Twitter @jennyshen

Get feedback&