Prototyping Tools

Get Started. It's Free
or sign up with your email address
Rocket clouds
Prototyping Tools by Mind Map: Prototyping Tools

1. Low Fidelity

1.1. Wireframes

1.1.1. Desktop/Online Tools

1.1.1.1. Meetup Group Focused

1.1.1.1.1. Balsamiq

1.1.1.1.2. Nakee

1.1.1.2. Others Recommended from the Web

1.1.1.2.1. WireframeSketcher

1.1.1.2.2. SOFTANDGUI (Hybrid)

1.1.1.2.3. Moqups

1.1.1.2.4. Pencil Project

1.1.1.2.5. Mockingbird

1.1.1.2.6. Mockups.me

1.1.1.2.7. iPhonemockup

1.1.1.2.8. Mockup Builder

1.1.1.2.9. Pidoco

1.1.1.2.10. ForeUI

1.1.1.2.11. ClickDummy

1.1.1.3. Website Specific

1.1.1.3.1. MockFlow

1.1.1.3.2. HotGloo

1.1.1.3.3. JumpChart

1.1.1.3.4. UXPin

1.1.1.4. Free (Very Simple)

1.1.1.4.1. Wireframe.cc

1.1.1.4.2. RWD Wireframes

1.1.1.4.3. Framebox (Very Simple)

1.1.1.5. Microsoft Powerpoint

1.1.1.5.1. Tutorials (Coming Soon)

1.1.1.6. Adobe Fireworks

1.1.1.6.1. Tutorials (Coming Soon)

1.1.2. Mobile/Tablet Tools

1.1.2.1. iOS

1.1.2.1.1. Blueprint

1.1.2.1.2. AppCooker

1.1.2.1.3. Mockups.me

1.1.2.2. Android

1.1.2.2.1. Mockups.me

1.2. Wireframes, as the lowest fidelity prototype, allow you to create a blueprint, a starting point - a kind of outline for the design and development of your mobile app or web solution.

2. Mid Fidelity

2.1. Mockups

2.1.1. Tools

2.1.1.1. Meetup Group Focused

2.1.1.1.1. Adobe Photoshop

2.1.1.1.2. Adobe Illustrator

2.1.1.1.3. Adobe Fireworks

2.2. Mockups are mid-fidelity prototypes that illustrate more detailed representations of your mobile app or web solution. Mockups can be a standalone illustration, layered or other type of image; or mockups could be combined as a series of image, bundled together to represent a set of screens, features and/or functions.

3. High Fidelity Prototypes

3.1. Let's Call Them Prototypes

3.1.1. Tools

3.1.1.1. Meetup Group Focused

3.1.1.1.1. Proto.io

3.1.1.1.2. Axure

3.1.1.1.3. AppGyver

3.1.1.1.4. Invision

3.1.1.1.5. Framer

3.1.1.1.6. Divshot

3.1.1.2. Other Online Tools

3.1.1.2.1. codiqa

3.1.1.3. Interesting

3.1.1.3.1. Solidify

3.1.1.3.2. Concept.ly

3.1.1.3.3. Indigo Studio

3.1.1.3.4. Realizer (Hybrid)

3.1.1.3.5. eightshapes

3.1.1.4. Website Specific

3.1.1.4.1. Protytype (Beta)

3.2. High-fidelity prototypes, for a better name, are the ultimate graphical and interactive representation of a mobile app or web solution. These types of prototypes have all the details of mockups, but combine interactivity, like wireframes. This allows for walking through and testing a prototype that looks and feels like a real mobile app or website.

4. Distinguishing between mockups, wireframes, and prototypes can tough because they have been identified as each other many times over. From the most basic form of prototyping, sketches, to using the latest digital tools, the detail, quality and interaction is measured by it's fidelity. Fidelity comes in three flavors -low, medium, and high. Distinguishing between mockups, wireframes, and prototypes can tough because they have been identified as each other many times over. From the most basic form of prototyping, sketches, to using the latest digital tools, the detail, quality and interaction is measured by it's fidelity. Fidelity comes in three flavors -low, medium, and high.

5. Flowcharts

5.1. Lovely Charts

5.1.1. Checkout the iPad version

5.2. Lucid Chart

6. Inspiration

6.1. PTTNS.com

6.2. Beautiful Pixels

7. Articles

7.1. Wireframe tool comparison: MockFlow vs Axure vs Balsamiq

7.2. Inspiring UI Wireframe Sketches

8. Other Tools

8.1. Paper Templates

8.1.1. Free

8.1.1.1. iPhone 3-up Wireframe 8X11

8.1.1.2. iPad Template

8.1.1.3. iPhone & iPad printable sketching templates

8.1.1.4. Free Printable Sketching, Wireframing and Note-Taking PDF Templates

8.1.2. Premium

8.1.2.1. iOS

8.1.2.1.1. iPhone Sketch Pad

8.1.2.1.2. iPhone Sticky Pad

8.1.2.1.3. iPad Sketchbook

8.1.2.2. Android

8.1.2.2.1. Android Phone Sketch Pad

8.1.2.2.2. Android Tablet Sketch Pad

8.1.2.3. Windows

8.1.2.3.1. Windows Phone Sketch Pad

8.1.2.3.2. Windows 8 Sketch Pad

8.1.2.4. Browser

8.1.2.4.1. Browser Sketch Pad

8.1.2.4.2. Browser Sticky Pad

8.2. Stencils

8.2.1. iOS

8.2.1.1. iPhone

8.2.1.2. iPad

8.2.2. Android

8.2.2.1. Android Phone

8.2.2.1.1. Android Stencil Kit

8.2.2.1.2. Android Stencil Kit - Donut

8.2.2.2. Android Tablet

8.2.2.2.1. Android Tablet Stencil Kit

8.2.3. Windows

8.2.3.1. Windows Phone Stencil Kit

8.2.3.2. Windows 8 Stencil Kit

8.2.4. Browser

8.2.4.1. Website Stencil Kit

8.2.4.2. Browser Whiteboard Stencil

8.2.5. Quick Framer Stencil Kit

8.2.6. User Flow Stencil Kit

8.2.7. Google Chrome Stencil

8.2.8. T-Shirts

8.3. Adobe Fireworks wireframe templates for iPad & iPhone