1.
Labs
Introduction to
Rapid Prototyping
design by:

2.
Agenda
1. What is a Prototype?
2. Choosing Fidelity?
3. Who, what, how?
4. Mashups & Timeboxing
5. Tools
6. Examples
7. Workshop - (90min)

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

4.
Choosing The Right Fidelity
Medium Fidelity
Low Fidelity High 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.

5.
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?

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

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

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

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

10.
What tools can be leveraged
to 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.

11.
Who are you?
Creative Type. Engineer Type. Business Type.
Not all people are the same, but neither are all prototyping tools.

12.
Types of Mashups
1. 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

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

14.
Prototyping Tools - Medium Fidelity
Apple Keynote & Keynotopia
Why use Keynote?
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.

15.
High Fidelity
Low Cost.
Low Learning Curve.
Highly Realistic.
www.proto.io
(click above to play video)

16.
A Few Examples (Proto.io)
design by:r Uv

17.
http://kiosk.ctxs.co

18.
BootStrap
Bootstrap 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

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

20.
Rapid HTML Prototyping
Choose a Theme.
Customize.
Repeat.

21.
Another Example.
Bootstrap Theme
Customized.

22.
Google Web Fonts.

23.
Charts.

24.
A few Options
Google Docs.
chartio.com
highcharts.com
D3 - Data-Driven Documents
● http://d3js.org
Rickshaw - Rickshaw is a JavaScript toolkit for
creating interactive time series graphs.
● http://code.shutterstock.com/rickshaw/

25.
Free UI Elements
Collection of Free UI elements
http://ui-cloud.com/free-ui-elements/
Full Featured HTML Framework For Building iOS 7 Apps
http://www.idangero.us/framework7/#.U8_xBIBdWzg

26.
Workshop - 90 Minutes
Create a functional (hi-fi) Application prototype.
Focus Areas
● Internet of Things
● Big Data / Analytics
● Future of Healthcare
● Mobile Work Life.

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