Introduction toRapid Prototyping

Labs

design by:

Agenda

1. What is a Prototype?2. Choosing Fidelity?3. Who, what, how?4. Mashups & Timeboxing5. Tools6. Examples7. Workshop - (90min)

pro·to·type

A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.

Choosing The Right Fidelity

Low Fidelity High Fidelity

Medium Fidelity

Low fidelity prototypes, such as hand sketches, are fast and enable more iterations.

High fidelity prototypes, however, might better engage an audience for feedback.

To choose the right level of fidelity, consider the following five questions:1. Who is the audience for this prototype?2. What is the one most important purpose of this prototype?3. How many iterations of this prototype are necessary?4. How much uncertainty is there in the project at this stage?5. What tools can be leveraged to create the prototype?

Who is the audience for this prototype?

You should not prototype at a level your audience will not understand. If your audience can understand hand sketches, great. That gives you more options. If not, identify the lowest level of fidelity comfortable for your audience. If the lowest level is fairly high, you may need to prototype fewer screens or ideas.

What is the one most important purpose of this prototype? Prototypes should almost always be focused on one purpose. Are you testing an idea to see if people understand it? Are you evaluating the organization or navigation of a UI? Even if your prototype must do a few things, figure out the most important to help determine the proper fidelity.

How much uncertainty is there in the project at this stage?When a project has a lot of uncertainty, often it is best to prototype quickly and get some feedback. It’s likely in this kind of situation lower fidelity prototypes should be used. When the idea or direction of the project is more certain, a higher level of fidelity may be best to help refine specifics.

How many iterations of this prototype are necessary?Often prototyping is most useful when a sequence of prototypes can be done in rapid succession. Each builds on the learning and discoveries from the previous iteration. When choosing a fidelity, consider the benefit of doing more iterations at lower fidelity.

What tools can be leveragedto create the prototype?There are lots of great prototyping tools out there with more coming online all the time. Many are free or available at a modest cost. When looking at tools, though, be sure to consider the speed with which a new tool can be learned and used effectively. Where speed is a high priority, sometimes familiar tools are the best way to go.

Who are you?

Creative Type. Engineer Type. Business Type.

Not all people are the same, but neither are all prototyping tools.

Types of Mashups1. Business (or enterprise) mashups define applications that combine their own resources,

application and data, with other external Web services. They focus data into a single presentation and allow for collaborative action among businesses and developers. This works well for an agile development project, which requires collaboration between the developers and customer (or customer proxy, typically a product manager) for defining and implementing the business requirements.

2. Consumer mashups combine data from multiple public sources in the browser and organize it through a simple browser user interface.

3. Data mashups, opposite to the consumer mashups, combine similar types of media and information from multiple sources into a single representation. The combination of all these resources create a new and distinct Web service that was not originally provided by either source.

http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)#Types_of_mashup

PrototypingTools - Lo-FiPopApp.in Rapid prototyping on paper.Quickly import your paper sketches into an iphone app.

Prototyping Tools - Medium Fidelity

Keynote includes powerful drawing tools, smart guides, styles, locking, and grouping. Master slides make it possible to reuse interface components across multiple screens, hyperlinks add “clickability” to the prototype, and slide transitions create cool interface animations with a single click. It works seamlessly with Adobe CS apps, so copying and pasting graphics works seamlessly.

Apple Keynote & Keynotopia Why use Keynote?

High Fidelity

Low Cost.Low Learning Curve.Highly Realistic.www.proto.io

(click above to play video)

A Few Examples (Proto.io)

design by: rUv

http://kiosk.ctxs.co

BootStrapBootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools.

Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.http://getbootstrap.com

Free Templates

Cheap.Quick.Easy.http://startbootstrap.com/template-categories/popular/

Rapid HTML Prototyping

Choose a Theme.Customize. Repeat.

Another Example.

Bootstrap ThemeCustomized.

Google Web Fonts.

Charts.

A few OptionsGoogle Docs.chartio.comhighcharts.comD3 - Data-Driven Documents

● http://d3js.org

Rickshaw - Rickshaw is a JavaScript toolkit for creating interactive time series graphs.

● http://code.shutterstock.com/rickshaw/

Free UI ElementsCollection of Free UI elements http://ui-cloud.com/free-ui-elements/

Full Featured HTML Framework For Building iOS 7 Appshttp://www.idangero.us/framework7/#.U8_xBIBdWzg

Workshop - 90 Minutes

Create a functional (hi-fi) Application prototype.Focus Areas

● Internet of Things● Big Data / Analytics● Future of Healthcare● Mobile Work Life.

status

♥ ♨ ๑ ❀ ✿ ψ

logo

button

button

Workshop Template

✿ ☺ ☻ ☹ ☼ ☂ ☃ ⌇ ⚛ ⌨ ✆ ☎ ⌘ ⌥ ⇧ ↩ ✞ ✡ ☭ ← → ↑ ↓ ➫ ⬇ ⬆ ☜ ☞ ☝ ☟ ✍ ✎ ✌ ☮ ✔ ★ ☆ ♺ ⚑ ⚐ ✉ ✄ ⌲ ✈ ♦ ♣ ♠ ♥ ❤ ♡ ♪ ♩ ♫ ♬ ♯ ♀ ♂ ⚢ ⚣ ❑ ❒ ◈ ◐ ◑ ✖ ∞ « » ‹ › “ ” ‘ ’ „ ‚ – — | ⁄ \ [ ] { } § ¶ ¡ ¿ ‽ ⁂ ※ ± × ~ ≈ ÷ ≠ π † ‡ ¥ € $ ¢ £ ß © ® @ ™ ° ‰ … · • ● � � � � � � � � � � � � � � � �

Copy and Paste Symbols

status

♥ ♨ ๑ ❀ ✿ ψ

logo

button button

Workshop Template - Tablet

✿ ☺ ☻ ☹ ☼ ☂ ☃ ⌇ ⚛ ⌨ ✆ ☎ ⌘ ⌥ ⇧ ↩ ✞ ✡ ☭ ← → ↑ ↓ ➫ ⬇ ⬆ ☜ ☞ ☝ ☟ ✍ ✎ ✌ ☮ ✔ ★ ☆ ♺ ⚑ ⚐ ✉ ✄ ⌲ ✈ ♦ ♣ ♠ ♥ ❤ ♡ ♪ ♩ ♫ ♬ ♯ ♀ ♂ ⚢ ⚣ ❑ ❒ ◈ ◐ ◑ ✖ ∞ « » ‹ › “ ” ‘ ’ „ ‚ – — | ⁄ \ [ ] { } § ¶ ¡ ¿ ‽ ⁂ ※ ± × ~ ≈ ÷ ≠ π † ‡ ¥ € $ ¢ £ ß © ® @ ™ ° ‰ … · • ● � � � � � � � � � � � � � � � �

Copy and Paste Symbols

button

design by:

REUVEN COHEN, CITRIX LABSChief Technology Advocate