Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Citrix Labs Rapid Prototyping Workshop

1,861 views

Published on

This presentation is part of a Citrix Labs workshop introducing the concepts of rapid prototyping for developers. It focuses on the creation of early samples, models, or releases of a product built to test a concept or process or to act as a thing to be replicated or learned from.

  • Be the first to comment

Citrix Labs Rapid Prototyping Workshop

  1. 1. Labs Introduction to Rapid Prototyping design by:
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Who are you? Creative Type. Engineer Type. Business Type. Not all people are the same, but neither are all prototyping tools.
  12. 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. 13. PrototypingTools - Lo-Fi PopApp.in Rapid prototyping on paper. Quickly import your paper sketches into an iphone app.
  14. 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. 15. High Fidelity Low Cost. Low Learning Curve. Highly Realistic. www.proto.io (click above to play video)
  16. 16. A Few Examples (Proto.io) design by:r Uv
  17. 17. http://kiosk.ctxs.co
  18. 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. 19. Free Templates Cheap. Quick. Easy. http://startbootstrap.com/template-categories/ popular/
  20. 20. Rapid HTML Prototyping Choose a Theme. Customize. Repeat.
  21. 21. Another Example. Bootstrap Theme Customized.
  22. 22. Google Web Fonts.
  23. 23. Charts.
  24. 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. 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. 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. 27. Workshop Template status logo button button ♥ ♨ ๑ ❀ ✿ ψ Copy and Paste Symbols ✿ ☺ ☻ ☹ ☼ ☂ ☃ ⌇ ⚛ ⌨ ✆ ☎ ⌘ ⌥ ⇧ ↩ ✞ ✡ ☭ ← → ↑ ↓ ➫ ⬇ ⬆ ☜ ☞ ☝ ☟ ✍ ✎ ✌ ☮ ✔ ★ ☆ ♺ ⚑ ⚐ ✉ ✄ ⌲ ✈ ♦ ♣ ♠ ♥ ❤ ♡ ♪ ♩ ♫ ♬ ♯ ♀ ♂ ⚢ ⚣ ❑ ❒ ◈ ◐ ◑ ✖ ∞ « » ‹ › “ ” ‘ ’ „ ‚ – — | ⁄ [ ] { } § ¶ ¡ ¿ ‽ ⁂ ※ ± × ~ ≈ ÷ ≠ π † ‡ ¥ € $ ¢ £ ß © ® @ ™ ° ‰ … · • ●

×