SlideShare a Scribd company logo
1 of 30
Download to read offline
Labs 
Introduction to 
Rapid Prototyping 
design by:
Agenda 
1. What is a Prototype? 
2. Choosing Fidelity? 
3. Who, what, how? 
4. Mashups & Timeboxing 
5. Tools 
6. Examples 
7. 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 
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.
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 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.
Who are you? 
Creative Type. Engineer Type. Business Type. 
Not all people are the same, but neither are all prototyping tools.
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
PrototypingTools - Lo-Fi 
PopApp.in 
Rapid prototyping on paper. 
Quickly import your paper sketches 
into an iphone app.
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.
High Fidelity 
Low Cost. 
Low Learning Curve. 
Highly Realistic. 
www.proto.io 
(click above to play video)
A Few Examples (Proto.io) 
design by:r Uv
http://kiosk.ctxs.co
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
Free Templates 
Cheap. 
Quick. 
Easy. 
http://startbootstrap.com/template-categories/ 
popular/
Rapid HTML Prototyping 
Choose a Theme. 
Customize. 
Repeat.
Another Example. 
Bootstrap Theme 
Customized.
Google Web Fonts.
Charts.
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/
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
Workshop - 90 Minutes 
Create a functional (hi-fi) Application prototype. 
Focus Areas 
● Internet of Things 
● Big Data / Analytics 
● Future of Healthcare 
● Mobile Work Life.
Workshop Template 
status 
logo 
button 
button 
♥ ♨ ๑ ❀ ✿ ψ 
Copy and Paste Symbols 
✿ ☺ ☻ ☹ ☼ ☂ ☃ ⌇ ⚛ ⌨ ✆ ☎ ⌘ ⌥ ⇧ ↩ ✞ ✡ ☭ ← → ↑ ↓ ➫ ⬇ ⬆ ☜ ☞ ☝ ☟ ✍ ✎ ✌ ☮ ✔ ★ ☆ ♺ ⚑ ⚐ ✉ ✄ ⌲ ✈ ♦ ♣ ♠ ♥ ❤ ♡ ♪ ♩ ♫ ♬ ♯ ♀ ♂ ⚢ ⚣ ❑ 
❒ ◈ ◐ ◑ ✖ ∞ « » ‹ › “ ” ‘ ’ „ ‚ – — | ⁄  [ ] { } § ¶ ¡ ¿ ‽ ⁂ ※ ± × ~ ≈ ÷ ≠ π † ‡ ¥ € $ ¢ £ ß © ® @ ™ ° ‰ … · • ●
Workshop Template - Tablet 
status 
logo 
button button 
♥ ♨ ๑ ❀ ✿ ψ 
Copy and Paste Symbols 
button 
✿ ☺ ☻ ☹ ☼ ☂ ☃ ⌇ ⚛ ⌨ ✆ ☎ ⌘ ⌥ ⇧ ↩ ✞ ✡ ☭ ← → ↑ ↓ ➫ ⬇ ⬆ ☜ ☞ ☝ ☟ ✍ ✎ ✌ ☮ ✔ ★ ☆ ♺ ⚑ ⚐ ✉ ✄ ⌲ ✈ ♦ ♣ ♠ ♥ ❤ ♡ ♪ ♩ ♫ ♬ ♯ ♀ ♂ ⚢ ⚣ ❑ 
❒ ◈ ◐ ◑ ✖ ∞ « » ‹ › “ ” ‘ ’ „ ‚ – — | ⁄  [ ] { } § ¶ ¡ ¿ ‽ ⁂ ※ ± × ~ ≈ ÷ ≠ π † ‡ ¥ € $ ¢ £ ß © ® @ ™ ° ‰ … · • ●
design by: 
REUVEN COHEN, CITRIX LABS 
Chief Technology Advocate

More Related Content

What's hot

Boost Turku - Prototyping Workshop - Mobile and Web Prototyping
Boost Turku - Prototyping Workshop -  Mobile and Web PrototypingBoost Turku - Prototyping Workshop -  Mobile and Web Prototyping
Boost Turku - Prototyping Workshop - Mobile and Web PrototypingJoni Juup
 
How Invision Help Designers
How Invision Help DesignersHow Invision Help Designers
How Invision Help DesignersAhmed Badran
 
Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design WorkshopPatrick McNeil
 
UX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design MissionUX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design MissionMarc-Oliver Gern
 
UX Design With Distributed Teams
UX Design With Distributed TeamsUX Design With Distributed Teams
UX Design With Distributed TeamsJohannes Baeck
 
Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Chad Udell
 
How to prototype like a pro
How to prototype like a proHow to prototype like a pro
How to prototype like a proAmir Khella
 
Mobile Prototyping
Mobile PrototypingMobile Prototyping
Mobile PrototypingDonna Lichaw
 
What does it mean to be a test engineer?
What does it mean to be a test engineer?What does it mean to be a test engineer?
What does it mean to be a test engineer?Andrii Dzynia
 
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to LifeDesign Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Lifegoodfriday
 
Andy Rachleff, Wealthfront Presentation at Lean Startup SXSW
Andy Rachleff, Wealthfront Presentation at Lean Startup SXSWAndy Rachleff, Wealthfront Presentation at Lean Startup SXSW
Andy Rachleff, Wealthfront Presentation at Lean Startup SXSW500 Startups
 
Quick Tips to Wireframing & Prototyping
Quick Tips to Wireframing & PrototypingQuick Tips to Wireframing & Prototyping
Quick Tips to Wireframing & PrototypingJenny Shen
 
Agile design pattern
Agile design patternAgile design pattern
Agile design patternPoppy Martono
 
Sins of a UX Researcher
Sins of a UX ResearcherSins of a UX Researcher
Sins of a UX ResearcherKyle Soucy
 

What's hot (20)

Boost Turku - Prototyping Workshop - Mobile and Web Prototyping
Boost Turku - Prototyping Workshop -  Mobile and Web PrototypingBoost Turku - Prototyping Workshop -  Mobile and Web Prototyping
Boost Turku - Prototyping Workshop - Mobile and Web Prototyping
 
How Invision Help Designers
How Invision Help DesignersHow Invision Help Designers
How Invision Help Designers
 
Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design Workshop
 
UX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design MissionUX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design Mission
 
UX Design With Distributed Teams
UX Design With Distributed TeamsUX Design With Distributed Teams
UX Design With Distributed Teams
 
Prototyping
PrototypingPrototyping
Prototyping
 
IoT Product Design and Prototyping
IoT Product Design and PrototypingIoT Product Design and Prototyping
IoT Product Design and Prototyping
 
Prototyping in the design process
Prototyping in the design processPrototyping in the design process
Prototyping in the design process
 
Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2
 
How to prototype like a pro
How to prototype like a proHow to prototype like a pro
How to prototype like a pro
 
Mobile Prototyping
Mobile PrototypingMobile Prototyping
Mobile Prototyping
 
What does it mean to be a test engineer?
What does it mean to be a test engineer?What does it mean to be a test engineer?
What does it mean to be a test engineer?
 
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to LifeDesign Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Life
 
Design Prototyping
Design PrototypingDesign Prototyping
Design Prototyping
 
Andy Rachleff, Wealthfront Presentation at Lean Startup SXSW
Andy Rachleff, Wealthfront Presentation at Lean Startup SXSWAndy Rachleff, Wealthfront Presentation at Lean Startup SXSW
Andy Rachleff, Wealthfront Presentation at Lean Startup SXSW
 
Quick Tips to Wireframing & Prototyping
Quick Tips to Wireframing & PrototypingQuick Tips to Wireframing & Prototyping
Quick Tips to Wireframing & Prototyping
 
Agile design pattern
Agile design patternAgile design pattern
Agile design pattern
 
Sins of a UX Researcher
Sins of a UX ResearcherSins of a UX Researcher
Sins of a UX Researcher
 
Prototyping
PrototypingPrototyping
Prototyping
 
Designing and prototyping
Designing and prototypingDesigning and prototyping
Designing and prototyping
 

Similar to Citrix Labs Rapid Prototyping Workshop

Create free website
Create free websiteCreate free website
Create free websitefullerhqim
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Michele Ide-Smith
 
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni MahariashaUX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni MahariashaAnton Chandra
 
Prototyping & User Testing
Prototyping & User TestingPrototyping & User Testing
Prototyping & User TestingLaura Levisay
 
Usability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysSTC India UX SIG
 
Prototyping and Piloting
Prototyping and PilotingPrototyping and Piloting
Prototyping and PilotingFung Hoi Si
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practicesuxpin
 
User Experience Bootcamp for Developers
User Experience Bootcamp for DevelopersUser Experience Bootcamp for Developers
User Experience Bootcamp for DevelopersCatherine Robson
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototypingMarcelo Graciolli
 
"Open" includes users - Leverage their input
"Open" includes users - Leverage their input"Open" includes users - Leverage their input
"Open" includes users - Leverage their inputRandy Earl
 
Uxpin guide to_uxdesign_process_and_documentation
Uxpin guide to_uxdesign_process_and_documentationUxpin guide to_uxdesign_process_and_documentation
Uxpin guide to_uxdesign_process_and_documentationMarcelo Graciolli
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersSarah Dutkiewicz
 
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper VerplankenUX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper VerplankenUX Antwerp Meetup
 
PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?ProductCamp Chicago
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your ProjectsKarl Kaufmann
 
10 Truths to Great Product Experiences
10 Truths to Great Product Experiences10 Truths to Great Product Experiences
10 Truths to Great Product ExperiencesJeremy Johnson
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for DevelopersSarah Dutkiewicz
 
4 D Techniques
4 D Techniques4 D Techniques
4 D Techniquespalani2808
 
Basics of-usability-testing
Basics of-usability-testingBasics of-usability-testing
Basics of-usability-testingWBC Software Lab
 
CampusSDN2017 - Jawdat: Product Management and Agile Development
CampusSDN2017 - Jawdat: Product Management and Agile DevelopmentCampusSDN2017 - Jawdat: Product Management and Agile Development
CampusSDN2017 - Jawdat: Product Management and Agile DevelopmentJawdatTI
 

Similar to Citrix Labs Rapid Prototyping Workshop (20)

Create free website
Create free websiteCreate free website
Create free website
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
 
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni MahariashaUX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
 
Prototyping & User Testing
Prototyping & User TestingPrototyping & User Testing
Prototyping & User Testing
 
Usability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, Misys
 
Prototyping and Piloting
Prototyping and PilotingPrototyping and Piloting
Prototyping and Piloting
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
 
User Experience Bootcamp for Developers
User Experience Bootcamp for DevelopersUser Experience Bootcamp for Developers
User Experience Bootcamp for Developers
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
 
"Open" includes users - Leverage their input
"Open" includes users - Leverage their input"Open" includes users - Leverage their input
"Open" includes users - Leverage their input
 
Uxpin guide to_uxdesign_process_and_documentation
Uxpin guide to_uxdesign_process_and_documentationUxpin guide to_uxdesign_process_and_documentation
Uxpin guide to_uxdesign_process_and_documentation
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
 
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper VerplankenUX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
 
PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 
10 Truths to Great Product Experiences
10 Truths to Great Product Experiences10 Truths to Great Product Experiences
10 Truths to Great Product Experiences
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
 
4 D Techniques
4 D Techniques4 D Techniques
4 D Techniques
 
Basics of-usability-testing
Basics of-usability-testingBasics of-usability-testing
Basics of-usability-testing
 
CampusSDN2017 - Jawdat: Product Management and Agile Development
CampusSDN2017 - Jawdat: Product Management and Agile DevelopmentCampusSDN2017 - Jawdat: Product Management and Agile Development
CampusSDN2017 - Jawdat: Product Management and Agile Development
 

Citrix Labs Rapid Prototyping Workshop

  • 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
  • 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.
  • 21. Rapid HTML Prototyping Choose a Theme. Customize. Repeat.
  • 22. Another Example. Bootstrap Theme Customized.
  • 25. 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/
  • 26. 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
  • 27. Workshop - 90 Minutes Create a functional (hi-fi) Application prototype. Focus Areas ● Internet of Things ● Big Data / Analytics ● Future of Healthcare ● Mobile Work Life.
  • 28. Workshop Template status logo button button ♥ ♨ ๑ ❀ ✿ ψ Copy and Paste Symbols ✿ ☺ ☻ ☹ ☼ ☂ ☃ ⌇ ⚛ ⌨ ✆ ☎ ⌘ ⌥ ⇧ ↩ ✞ ✡ ☭ ← → ↑ ↓ ➫ ⬇ ⬆ ☜ ☞ ☝ ☟ ✍ ✎ ✌ ☮ ✔ ★ ☆ ♺ ⚑ ⚐ ✉ ✄ ⌲ ✈ ♦ ♣ ♠ ♥ ❤ ♡ ♪ ♩ ♫ ♬ ♯ ♀ ♂ ⚢ ⚣ ❑ ❒ ◈ ◐ ◑ ✖ ∞ « » ‹ › “ ” ‘ ’ „ ‚ – — | ⁄ [ ] { } § ¶ ¡ ¿ ‽ ⁂ ※ ± × ~ ≈ ÷ ≠ π † ‡ ¥ € $ ¢ £ ß © ® @ ™ ° ‰ … · • ●
  • 29. Workshop Template - Tablet status logo button button ♥ ♨ ๑ ❀ ✿ ψ Copy and Paste Symbols button ✿ ☺ ☻ ☹ ☼ ☂ ☃ ⌇ ⚛ ⌨ ✆ ☎ ⌘ ⌥ ⇧ ↩ ✞ ✡ ☭ ← → ↑ ↓ ➫ ⬇ ⬆ ☜ ☞ ☝ ☟ ✍ ✎ ✌ ☮ ✔ ★ ☆ ♺ ⚑ ⚐ ✉ ✄ ⌲ ✈ ♦ ♣ ♠ ♥ ❤ ♡ ♪ ♩ ♫ ♬ ♯ ♀ ♂ ⚢ ⚣ ❑ ❒ ◈ ◐ ◑ ✖ ∞ « » ‹ › “ ” ‘ ’ „ ‚ – — | ⁄ [ ] { } § ¶ ¡ ¿ ‽ ⁂ ※ ± × ~ ≈ ÷ ≠ π † ‡ ¥ € $ ¢ £ ß © ® @ ™ ° ‰ … · • ●
  • 30. design by: REUVEN COHEN, CITRIX LABS Chief Technology Advocate